mchisolm0•3mo ago

Migrating from Clerk components - Expo

I figured this out, but I wanted to still post this to document for someone else. I am switching from Clerk auth components (i.e. <SignedIn>) to Convex with Clerk components (i.e. <Authenticated) in my Expo app mobile/web app. I want to show sign up/in buttons if unauthenticated and a sign out button if they are.

      <View style={themed($authContainer)}>
        <Authenticated>
          <SignOutButton />
        </Authenticated>
        <Unauthenticated>
          <SignInButtons />
        </Unauthenticated>
        <AuthLoading>
          <Text>Loading...</Text>
        </AuthLoading>
      </View>

      <View style={themed($authContainer)}>
        <Authenticated>
          <SignOutButton />
        </Authenticated>
        <Unauthenticated>
          <SignInButtons />
        </Unauthenticated>
        <AuthLoading>
          <Text>Loading...</Text>
        </AuthLoading>
      </View>

When the user signs in, it still shows the <Unauthenticated> parts. Possible reasons: 1. I think this is because I need to update my sign in/up pages from using the import { useSignIn } from '@clerk/clerk-expo'. 2. It is also possible that the problem is Clerk in Expo only works with some of their components (e.g. <SignOutButton> is one I made, because Clerk's will not work in Expo). 3. I am misunderstanding how/where the useConvexAuth hook should be used. The docs don't seem to say I need to update the useSignIn hook to a Convex specific one. The docs do say

It's important to use the useConvexAuth() hook instead of Clerk's useAuth() hook when you need to check whether the user is logged in or not.

Does this mean I should change all my useAuth() hooks to useConvexAuth()s? Like All import {useAuth} from '@clerk/clerk-expo' should change to import {useConvexAuth} from 'convex/react' and const {isSignedIn} = useAuth(); should change to const {isAuthenticated} = useConvexAuth();

2 Replies

Convex Bot•3mo ago

Thanks for posting in <#1088161997662724167>. Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets. - Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.) - Use search.convex.dev to search Docs, Stack, and Discord all at once. - Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI. - Avoid tagging staff unless specifically instructed. Thank you!

erquhart•2mo ago

Yes you'll want to use Convex components/hooks to check auth status. This is because the user is authenticated in Clerk first, and then a token is provided which Convex verifies. So there's a very short window where Clerk will show the user as authenticated while Convex won't.

Migrating from Clerk components - Expo

Did you find this page helpful?