mchisolm0M
Convex Community•7mo ago•
2 replies
mchisolm0

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>

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();
Was this page helpful?