Name: clerk-expo-patterns
Availability: InStock

Expo Patterns
SDK:
@clerk/expo
v3+. Requires Expo 53+, React Native 0.73+.
What Do You Need?
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
Mental Model
Clerk stores the session token in memory by default. In native apps:
SecureStore
— encrypt token in device keychain (recommended for production)
tokenCache
— prop on

that provides custom storage
useAuth
— same API as web, works in any component
OAuth
— requires
useSSO
+ deep link scheme configured in
app.json
Minimal Setup
app/_layout.tsx
import
{
ClerkProvider
}
from
'@clerk/expo'
import
{
tokenCache
}
from
'@clerk/expo/token-cache'
import
{
Stack
}
from
'expo-router'
const
publishableKey
=
process
.
env
.
EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY
!
export
default
function
RootLayout
(
)
{
return
(
<
ClerkProvider
publishableKey
=
{
publishableKey
}
tokenCache
=
{
tokenCache
}
>
<
Stack
/>
</
ClerkProvider
>
)
}
CRITICAL: Use EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY — not NEXT_PUBLIC_ . Env vars inside node_modules are not inlined in production builds. Always pass publishableKey explicitly. Built-in Token Cache import { tokenCache } from '@clerk/expo/token-cache' This uses expo-secure-store with keychainAccessible: AFTER_FIRST_UNLOCK . Install the peer dep: npx expo install expo-secure-store Auth Hooks import { 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

) } OAuth Flow (Google) 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 } /> } Org Switching 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

) } Common Pitfalls 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+ Import Map What Import From ClerkProvider @clerk/expo tokenCache @clerk/expo/token-cache useAuth , useUser , useSignIn @clerk/expo useSSO @clerk/expo useOrganization , useOrganizationList @clerk/expo See Also clerk-setup - Initial Clerk install clerk-custom-ui - Custom flows & appearance clerk-orgs - B2B organizations Docs Expo SDK

安装