---
title: "@vonvon-kit/expo"
description: "Adaptateurs Expo SecureStore et WebBrowser pour @vonvon-kit/react-native plusun hook de guard de route Expo Router."
locale: "fr"
---

> Documentation Index
> Fetch the relevant documentation index at: https://vonvon.id/fr/sdks/llms.txt
> Use this file to discover all available pages before exploring further.

# @vonvon-kit/expo

## Statut

Statut du registre : UNPUBLISHED. Installez ce SDK uniquement depuis un checkout du code source du dépôt ; n'utilisez pas de registre de paquets externe.

Le statut du package est **Package actuel**. Les adaptateurs ExpoSecureStore et WebBrowser, VonvonProvider et le hook de guard de route ExpoRouter sont implémentés. Un aller-retour réel avec un IdP sur uneinfrastructure de production est en attente de vérification manuelle.

Toute la logique PKCE, l'échange de jetons et la gestion de session sontdans [@vonvon-kit/react-native](/fr/sdks/react-native) ; ce package fournit uniquement desadaptateurs et l'intégration Expo Router.

## Configuration du fournisseur

Injectez `createSecureStoreAdapter` et`createExpoWebBrowserAdapter` dans `VonvonProvider`. Aucun importde module Expo de niveau supérieur n'est nécessaire ; les adaptateursacceptent des instances de module pour que la vérification de types CIreste propre sans les dépendances pair Expo installées.

```tsx
import * as SecureStore from 'expo-secure-store'
import * as WebBrowser from 'expo-web-browser'
import { VonvonProvider, createSecureStoreAdapter, createExpoWebBrowserAdapter } from '@vonvon-kit/expo'

const tokenCache = createSecureStoreAdapter({ secureStore: SecureStore })
const browser = createExpoWebBrowserAdapter({ webBrowser: WebBrowser })

export default function App() {
  return (
<VonvonProvider
  issuer="https://vonvon.id"
  clientId="your_client_id"
  redirectUri="myapp://auth/callback"
  tokenCache={tokenCache}
  browser={browser}
>
  <RootLayout />
</VonvonProvider>
  )
}
```

## Connexion et déconnexion

```tsx
import { useSignIn, useSignOut } from '@vonvon-kit/expo'
import { Button } from 'react-native'

function SignInScreen() {
  const { signIn, signInState } = useSignIn()
  return (
<Button
  title={signInState.status === 'pending' ? 'Signing in...' : 'Sign In'}
  onPress={() => void signIn()}
/>
  )
}

function SignOutScreen() {
  const { signOut } = useSignOut()
  return <Button title="Sign Out" onPress={() => void signOut()} />
}
```

## Guard de route Expo Router

Appelez `useProtectedRoute` dans un composant de mise en page. Il lit`isLoaded`/`isSignedIn` depuis `useAuth` et appelle`replace` d'Expo Router dans un `useEffect`.

```tsx
import { useProtectedRoute } from '@vonvon-kit/expo'
import { useRouter, usePathname } from 'expo-router'

export default function RootLayout() {
  const router = useRouter()
  const pathname = usePathname()

  useProtectedRoute({
signInRoute: '/sign-in',
protectedRoute: '/(app)',
pathname,
replace: router.replace,
  })

  return <Slot />
}
```

## Espace de nommage des clés SecureStore

Utilisez `keyPrefix` pour mettre les clés sous un préfixepersonnalisé. Le séparateur est `.` (point), qui fait partie du jeude caractères autorisés pour `expo-secure-store`.

```ts
const tokenCache = createSecureStoreAdapter({
  secureStore: SecureStore,
  keyPrefix: 'myapp',
  // Current session key: 'myapp.vonvon.session.v1'.
})
```

## API exportée

| Exporter | Type | Objectif |
| --- | --- | --- |
| `VonvonProvider` | composant | Ré-export du VonvonProvider @vonvon-kit/react-native acceptant les adaptateurstokenCache et browser |
| `createSecureStoreAdapter` | function | Adaptateur TokenCache reposant sur expo-secure-store ; accepte uneinstance secureStore et un keyPrefix optionnel |
| `createExpoWebBrowserAdapter` | function | Adaptateur BrowserInterface reposant sur expo-web-browser |
| `useSignIn` | hook | Ré-export de @vonvon-kit/react-native : signIn, handleRedirect, signInState |
| `useSignOut` | hook | Ré-export de @vonvon-kit/react-native : signOut, signOutState |
| `useProtectedRoute` | hook | Lit isLoaded/isSignedIn et appelle replace d'Expo Router pour laprotection des routes |

## Limites connues

- `useAuth().isSignedIn` reflète la session native vérifiée stockée localement par `VonvonProvider`. Il ne lit pas une session de cookie web; offline\_access est rejeté tant que la liaison d'expéditeur DPoP n'est pas implémentée, et l'expiration du jeton d'accès exige une nouvelle autorisation.
- Ce package fournit uniquement des adaptateurs et l'intégration ExpoRouter. Pour le flux PKCE React Native de base, consultez[@vonvon-kit/react-native](/fr/sdks/react-native).

Source: https://vonvon.id/fr/sdks/expo/index.mdx