---
title: "@xid-kit/expo"
description: "Adaptadores Expo SecureStore e WebBrowser para @xid-kit/react-nativemais um hook de guard de rota do Expo Router."
locale: "pt-BR"
---

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

# @xid-kit/expo

## 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](/pt-br/sdks/react-native); este pacote fornece apenasadaptadores e integração com o Expo Router.

## Configuração do provedor

Injete `createSecureStoreAdapter` e`createExpoWebBrowserAdapter` 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.

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

## Login e logout

```tsx
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 chama`replace` do Expo Router dentro de um `useEffect`.

```tsx
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`.

```ts
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 do`XidClient`, 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](/pt-br/sdks/react-native).

Source: https://xid.dev/pt-br/sdks/expo/index.mdx