mchisolm0M
Convex Community•9mo 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?