Modèles Expo

SDK : @clerk/expo v3+. Nécessite Expo 53+, React Native 0.73+.

De Quoi Avez-Vous Besoin ?

Modèle Mental

Clerk stocke le token de session en mémoire par défaut. Dans les applications natives :

• SecureStore — chiffre le token dans le trousseau du dispositif (recommandé pour la production)
• tokenCache — prop sur <ClerkProvider> qui fournit un stockage personnalisé
• useAuth — même API que le web, fonctionne dans n'importe quel composant
• OAuth — nécessite useSSO + schéma de deep link configuré dans app.json

Configuration Minimale

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>
  )
}

CRITIQUE : Utilisez EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY — pas NEXT_PUBLIC_. Les variables d'environnement à l'intérieur de node_modules ne sont pas inlined dans les builds de production. Passez toujours publishableKey explicitement.

Cache de Token Intégré

import { tokenCache } from '@clerk/expo/token-cache'

Ceci utilise expo-secure-store avec keychainAccessible: AFTER_FIRST_UNLOCK. Installez la dépendance peer :

npx expo install expo-secure-store

Hooks d'Authentification

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>
  )
}

Flux OAuth (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} />
}

Changement d'Organisation

import { useOrganization, useOrganizationList } from '@clerk/expo'

export function OrgSwitcher() {
  const { organization } = useOrganization()
  const { setActive, userMemberships } = useOrganizationList()

  return (
    <View>
      <Text>Actuelle : {organization?.name ?? 'Personnel'}</Text>
      {userMemberships.data?.map(mem => (
        <Button
          key={mem.organization.id}
          title={mem.organization.name}
          onPress={() => setActive({ organization: mem.organization.id })}
        />
      ))}
    </View>
  )
}

Pièges Courants

Carte d'Imports

Voir Aussi

• clerk-setup - Installation initiale de Clerk
• clerk-custom-ui - Flux personnalisés & apparence
• clerk-orgs - Organisations B2B

Docs

SDK Expo