@xid-kit/expo

Adaptadores Expo SecureStore e WebBrowser para @xid-kit/react-nativemais um hook de guard de rota do Expo Router.

Estado

O status do pacote é Pacote atual. Adaptadores ExpoSecureStore e WebBrowser, XidProvider e hook de guard de rota do ExpoRouter estão implementados. Uma ida e volta real com o IdP eminfraestrutura de produção ainda está pendente de verificação manual.

Toda a lógica PKCE, troca de tokens e gerenciamento de sessão residemem @xid-kit/react-native; este pacote fornece apenasadaptadores e integração com o Expo Router.

Configuração do provedor

Injete createSecureStoreAdapter ecreateExpoWebBrowserAdapter em XidProvider. Nenhumimport de módulo Expo de nível superior é necessário; adaptadoresaceitam instâncias de módulo para que a verificação de tipos no CIfique limpa sem as peer deps do Expo instaladas.

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

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 rota do Expo Router

Chame useProtectedRoute em um componente de layout. LêisLoaded/isSignedIn de useAuth e chamareplace do Expo Router dentro de um 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 />
}

Namespacing de chaves do SecureStore

Use keyPrefix para colocar chaves sob um prefixopersonalizado. O separador é . (ponto), que está dentro doconjunto de caracteres permitidos para expo-secure-store.

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

API exportada

Exportar	Tipo	Finalidade
`XidProvider`	componente	Re-export de @xid-kit/react-native XidProvider que aceita adaptadorestokenCache e browser
`createSecureStoreAdapter`	function	Adaptador TokenCache baseado em expo-secure-store; aceita instânciasecureStore e keyPrefix opcional
`createExpoWebBrowserAdapter`	function	Adaptador BrowserInterface suportado por expo-web-browser
`useSignIn`	hook	Re-export de @xid-kit/react-native: signIn, handleRedirect,signInState
`useSignOut`	hook	Re-export de @xid-kit/react-native: signOut, signOutState
`useProtectedRoute`	hook	Lê isLoaded/isSignedIn e chama replace do Expo Router para proteçãode rota

Limitações conhecidas

useAuth().isSignedIn reflete o estado de sessão por cookie doXidClient, que não é preenchido automaticamente a partir dostokens locais do SecureStore após a troca de token. Recarregue oestado do cliente explicitamente após um login bem-sucedido.
Este pacote fornece apenas adaptadores e integração com o ExpoRouter. Para o fluxo PKCE base do React Native, veja@xid-kit/react-native.