@xid-kit/expo

Adaptateurs Expo SecureStore et WebBrowser pour @xid-kit/react-native plusun hook de guard de route Expo Router.

Statut

Le statut du package est Package actuel. Les adaptateurs ExpoSecureStore et WebBrowser, XidProvider 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 @xid-kit/react-native ; ce package fournit uniquement desadaptateurs et l’intégration Expo Router.

Configuration du fournisseur

Injectez createSecureStoreAdapter etcreateExpoWebBrowserAdapter dans XidProvider. 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.

import * as SecureStore from 'expo-secure-store'
import * as WebBrowser from 'expo-web-browser'
import { XidProvider, createSecureStoreAdapter, createExpoWebBrowserAdapter } from '@xid-kit/expo'

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

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

Connexion et déconnexion

import { useSignIn, useSignOut } from '@xid-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 litisLoaded/isSignedIn depuis useAuth et appellereplace d’Expo Router dans un useEffect.

import { useProtectedRoute } from '@xid-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.

const tokenCache = createSecureStoreAdapter({
  secureStore: SecureStore,
  keyPrefix: 'myapp',
  // keys: 'myapp.xid.access_token', 'myapp.xid.refresh_token', etc.
})

API exportée

Exporter	Type	Objectif
`XidProvider`	composant	Ré-export du XidProvider @xid-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 @xid-kit/react-native : signIn, handleRedirect, signInState
`useSignOut`	hook	Ré-export de @xid-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 l’état de session cookie web deXidClient, qui ne se peuple pas automatiquement depuis les jetonsSecureStore locaux après l’échange de jetons. Rechargez explicitementl’état du client après une connexion réussie.
Ce package fournit uniquement des adaptateurs et l’intégration ExpoRouter. Pour le flux PKCE React Native de base, consultez@xid-kit/react-native.