npx skills add ...
npx skills add clerk/skills --skill clerk-expo-patterns
npx skills add clerk/skills --skill clerk-expo-patterns
Expo / React Native patterns with Clerk — SecureStore token cache, OAuth
SDK: @clerk/expo v3+. Requires Expo 53+, React Native 0.73+.
| Task | Reference |
|---|---|
| Persist tokens with SecureStore | references/token-storage.md |
| OAuth (Google, Apple, GitHub) | references/oauth-deep-linking.md |
| Protected screens with Expo Router | references/protected-routes.md |
| Push notifications with user data | references/push-notifications.md |
Clerk stores the session token in memory by default. In native apps:
tokenCache — prop on <ClerkProvider> that provides custom storageuseAuth — same API as web, works in any componentuseSSO + deep link scheme configured in app.jsonCRITICAL: Use
EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY— notNEXT_PUBLIC_. Env vars insidenode_modulesare not inlined in production builds. Always passpublishableKeyexplicitly.
This uses expo-secure-store with keychainAccessible: AFTER_FIRST_UNLOCK. Install the peer dep:
| Symptom | Cause | Fix |
|---|---|---|
publishableKey undefined in prod | Using env var without EXPO_PUBLIC_ | Rename to EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY |
| Token lost on app restart | No tokenCache | Pass tokenCache from @clerk/expo/token-cache |
| OAuth redirect not working | Missing scheme in app.json | Add "scheme": "myapp" to app.json |
WebBrowser.maybeCompleteAuthSession | Not called | Call it at the top level of the OAuth callback screen |
useSSO not found | Old @clerk/expo version | useSSO replaced useOAuth in v3+ |
| What | Import From |
|---|---|
ClerkProvider | @clerk/expo |
tokenCache | @clerk/expo/token-cache |
useAuth, useUser, useSignIn | @clerk/expo |
useSSO | @clerk/expo |
useOrganization, useOrganizationList | @clerk/expo |
clerk-setup - Initial Clerk installclerk-custom-ui - Custom flows & appearanceclerk-orgs - B2B organizationsimport { tokenCache } from '@clerk/expo/token-cache'npx expo install expo-secure-storeimport { useAuth, useUser, useSignIn, useSignUp, useClerk } from '@clerk/expo'
export function ProfileScreen() {
const { isSignedIn, userId, signOut } = useAuth()
const { user } = useUser()
if (!isSignedIn) return <Redirect href="/sign-in" />
return (
<View>
<Text>{user?.fullName}</Text>
<Button title="Sign Out" onPress={() => signOut()} />
</View>
)
}import { useSSO } from '@clerk/expo'
import * as WebBrowser from 'expo-web-browser'
WebBrowser.maybeCompleteAuthSession()
export function GoogleSignIn() {
const { startSSOFlow } = useSSO()
const handlePress = async () => {
try {
const { createdSessionId, setActive } = await startSSOFlow({
strategy: 'oauth_google',
redirectUrl: 'myapp://oauth-callback',
})
if (createdSessionId) await setActive!({ session: createdSessionId })
} catch (err) {
console.error(err)
}
}
return <Button title="Continue with Google" onPress={handlePress} />
}import { useOrganization, useOrganizationList } from '@clerk/expo'
export function OrgSwitcher() {
const { organization } = useOrganization()
const { setActive, userMemberships } = useOrganizationList()
return (
<View>
<Text>Current: {organization?.name ?? 'Personal'}</Text>
{userMemberships.data?.map(mem => (
<Button
key={mem.organization.id}
title={mem.organization.name}
onPress={() => setActive({ organization: mem.organization.id })}
/>
))}
</View>
)
}