---
title: "@xid-kit/react-native"
description: "Fournisseur et hooks React Native pour la redirection Hosted Auth, PKCES256, le callback deeplink et les adaptateurs de stockage sécurisé desjetons."
locale: "fr"
---

> Documentation Index
> Fetch the locale documentation index at: https://xid.dev/fr/llms.txt
> Use this file to discover all available pages before exploring further.

# @xid-kit/react-native

## Statut

Le statut du package est **Package actuel**. Il implémente le contratnatif partagé : redirection Hosted Auth avec PKCE S256, validation d'étatCSRF sur le callback deeplink, échange de code d'autorisation contre lepoint de terminaison de jeton et persistance sécurisée des jetons via unadaptateur de stockage injecté.

Un aller-retour réel avec un IdP sur une infrastructure de production esten attente de vérification manuelle. Cette page documente le comportementimplémenté ; ce n'est pas une affirmation de disponibilité en production.

## Configuration du fournisseur

Injectez un `TokenCache` (stockage sécurisé de la plateforme) et un`BrowserInterface` (navigateur in-app) dans `XidProvider`. LeSDK ne lie pas en dur de module natif ; les applications Expo peuventutiliser les adaptateurs prêts à l'emploi de [@xid-kit/expo](/fr/sdks/expo).

```tsx
import { XidProvider } from '@xid-kit/react-native'
import type { BrowserInterface, TokenCache } from '@xid-kit/react-native'
import * as Keychain from 'react-native-keychain'

const tokenCache: TokenCache = {
  async getToken(key) {
const result = await Keychain.getGenericPassword({ service: key })
return result ? result.password : null
  },
  async saveToken(key, value) {
await Keychain.setGenericPassword('xid', value, { service: key })
  },
  async deleteToken(key) {
await Keychain.resetGenericPassword({ service: key })
  },
}

const browser: BrowserInterface = {
  async openAuthSession(url, redirectUri) {
// Open url with your in-app browser library, wait for the redirectUri
// deep link, then return { type: 'success', url } or { type: 'cancel' }.
throw new Error('Implement with your preferred in-app browser library.')
  },
}

export function App() {
  return (
<XidProvider
  publishableKey="pk_live_..."
  apiUrl="https://xid.dev"
  issuer="https://xid.dev"
  clientId="your_client_id"
  redirectUri="myapp://auth/callback"
  tokenCache={tokenCache}
  browser={browser}
>
  <RootNavigator />
</XidProvider>
  )
}
```

## Se connecter

`signIn()` construit l'URL d'autorisation PKCE S256, stocke levérificateur et l'état OAuth dans le cache de jetons, ouvre l'adaptateurnavigateur et échange le code retourné contre des jetons. Les échecs dunavigateur, les incohérences d'état CSRF et les erreurs d'échange dejetons remontent sous forme de `signInState.status === 'error'`.

```tsx
import { useSignIn } from '@xid-kit/react-native'

function SignInScreen() {
  const { signIn, signInState } = useSignIn()

  return (
<Button
  title={signInState.status === 'pending' ? 'Signing in...' : 'Sign in'}
  onPress={() => void signIn()}
/>
  )
}
```

## Callback deeplink

Lorsque l'adaptateur navigateur ne peut pas capturer la redirectionlui-même, enregistrez le schéma d'URI de redirection dans le manifeste devotre application et transmettez le deep link à`handleRedirect(url)`. Il valide l'état OAuth, échange le code etstocke l'ensemble de jetons.

```tsx
import { useSignIn } from '@xid-kit/react-native'
import { useEffect } from 'react'
import { Linking } from 'react-native'

function DeepLinkHandler() {
  const { handleRedirect } = useSignIn()

  useEffect(() => {
const sub = Linking.addEventListener('url', ({ url }) => {
  if (url.startsWith('myapp://auth/callback')) {
    void handleRedirect(url)
  }
})
return () => sub.remove()
  }, [handleRedirect])

  return null
}
```

## API exportée

| Exporter | Type | Objectif |
| --- | --- | --- |
| `XidProvider` | composant | Encapsule le fournisseur @xid-kit/react et injecte tokenCache, browser,issuer, clientId, redirectUri et scopes |
| `useSignIn` | hook | signIn(options?) exécute le flux de redirection complet ;handleRedirect(url) traite un callback deeplink ; signInState rapporteidle, pending, complete, cancelled ou error |
| `useSignOut` | hook | signOut() efface l'ensemble de jetons local, puis révoque la sessionserveur via useAuth().signOut ; signOutState rapporte la progression |
| `useXidRnContext` | hook | Contexte d'adaptateur brut (usage avancé et tests) |
| `exchangeCodeForTokens` | function | POST de bas niveau vers le point de terminaison de jeton avec grant\_typeauthorization\_code et le vérificateur PKCE ; retourne un TokenSet |
| `saveTokenSet / clearTokenSet` | fonctions | Persister ou supprimer l'ensemble de jetons dans l'adaptateur TokenCache |
| `TOKEN_KEYS` | objet as const | Noms des clés TokenCache pour les jetons d'accès, d'actualisation et d'ID,plus le vérificateur PKCE et l'état OAuth |
| `createPkceVerifier / createPkceChallenge` | fonctions | Utilitaires PKCE S256 délégués à @xid-kit/protocol (Web Crypto) |
| `createRandomString / base64UrlEncode` | fonctions | Chaîne aléatoire sûre pour les URL pour l'état OAuth ; assistantd'encodage base64url |

## Ré-exports de @xid-kit/react

Les hooks de session et les composants de contrôle sont ré-exportés sansmodification depuis [@xid-kit/react](/fr/sdks/react) : `useAuth`,`useUser`, `useSession`, `useSessionList`,`useOrganization`, `useOrganizationList`, `useAPIKeys`,`SignedIn`, `SignedOut`, `Protect`, `XidLoaded`,`XidLoading`, `XidFailed` et `XidDegraded`.

## Types

| Type | Description |
| --- | --- |
| `XidProviderProps` | Props du fournisseur @xid-kit/react plus tokenCache, browser, issuer,clientId, redirectUri et portées optionnelles (par défaut openid, profile,email) |
| `TokenCache` | Contrat de l'adaptateur de stockage : getToken, saveToken, deleteToken(tous asynchrones) |
| `BrowserInterface` | openAuthSession(url, redirectUri) se résolvant en un BrowserResult |
| `BrowserResult` | Union de succès (avec URL de callback), annulation et fermeture |
| `SignInOptions` | Surcharges par appel pour signIn : redirectUri, scopes |
| `SignInState / SignOutState` | Unions de statuts discriminantes retournées par les hooks |
| `UseSignInReturn / UseSignOutReturn` | Formes de retour des hooks : actions et état |
| `TokenExchangeInput / TokenSet` | Entrée et résultat de exchangeCodeForTokens : accessToken, refreshToken,idToken, expiresIn |
| `XidRnContextValue` | Forme du contexte d'adaptateur retournée par useXidRnContext |

## Limites connues

- Pas de rafraîchissement automatique de session à l'expiration du jeton ;le jeton d'actualisation stocké est disponible pour un renouvellement gérépar l'application.
- useAuth().isSignedIn reflète la session cookie XidClient, pas le contenudu TokenCache. Rechargez l'état du client après un échange de jetonsréussi pour maintenir l'état d'authentification en direct.
- Le contexte d'organisation n'est pas encore alimenté depuis les jetonsstockés.

## Sécurité

- Code d'autorisation avec PKCE S256 uniquement. Pas de flux implicite ni de password grant.
- Les clients publics ne stockent jamais de secrets client.
- Le vérificateur PKCE et l'état OAuth résident dans l'adaptateur destockage sécurisé injecté et sont supprimés après l'échange de code.
- signOut efface l'ensemble de jetons local et révoque la session serveur ;les échecs remontent dans signOutState au lieu d'être ignorés.

Source: https://xid.dev/fr/sdks/react-native/index.mdx