---
title: "@xid-kit/react-native"
description: "Provider e hooks React Native para redirecionamento do Hosted Auth,PKCE S256, callback de deep link e adaptadores de armazenamentoseguro de tokens."
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/react-native

## Estado

O status do pacote é **Pacote atual**. Implementa o contratonativo compartilhado: redirecionamento do Hosted Auth com PKCE S256,validação do estado CSRF no callback de deep link, troca de código deautorização no endpoint de token e persistência segura de tokens viaadaptador de armazenamento injetado.

Uma ida e volta real com o IdP em infraestrutura de produção aindaestá pendente de verificação manual. Esta página documenta ocomportamento implementado; não é uma declaração de prontidão.

## Configuração do provedor

Injete um `TokenCache` (armazenamento seguro da plataforma) e um`BrowserInterface` (navegador in-app) em `XidProvider`. OSDK não vincula rigidamente nenhum módulo nativo; apps Expo podemusar os adaptadores prontos de [@xid-kit/expo](/pt-br/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>
  )
}
```

## Entrar

`signIn()` constrói a URL de autorização PKCE S256, armazena overificador e o estado OAuth no cache de token, abre o adaptador denavegador e troca o código retornado por tokens. Falhas do navegador,divergência do estado CSRF e erros de troca de token aparecem como`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 de deep link

Quando o adaptador de navegador não consegue capturar oredirecionamento por conta própria, registre o esquema de URI deredirecionamento no manifesto do seu aplicativo e encaminhe o deeplink para `handleRedirect(url)`. Ele valida o state OAuth, trocao código e armazena o conjunto de tokens.

```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 exportada

| Exportar | Tipo | Finalidade |
| --- | --- | --- |
| `XidProvider` | componente | Encapsula o provider @xid-kit/react e injeta tokenCache, browser,issuer, clientId, redirectUri e escopos |
| `useSignIn` | hook | signIn(options?) executa o fluxo completo de redirecionamento;handleRedirect(url) processa um callback de deep link; signInStatereporta idle, pending, complete, cancelled ou error |
| `useSignOut` | hook | signOut() limpa o conjunto de tokens local e, em seguida, revoga asessão do servidor via useAuth().signOut; signOutState relata oprogresso |
| `useXidRnContext` | hook | Contexto bruto do adaptador (uso avançado e testes) |
| `exchangeCodeForTokens` | function | POST de baixo nível para o endpoint de token com grant\_typeauthorization\_code e o verificador PKCE; retorna um TokenSet |
| `saveTokenSet / clearTokenSet` | funções | Persiste ou remove o conjunto de tokens no adaptador TokenCache |
| `TOKEN_KEYS` | objeto as const | Nomes de chave do TokenCache para tokens de acesso, refresh e ID,mais o verificador PKCE e o state OAuth |
| `createPkceVerifier / createPkceChallenge` | funções | Utilitários PKCE S256 delegados a @xid-kit/protocol (Web Crypto) |
| `createRandomString / base64UrlEncode` | funções | String aleatória segura para URL para o state OAuth; auxiliar decodificação base64url |

## Re-exports de @xid-kit/react

Hooks de sessão e componentes de controle são re-exportados semalterações de [@xid-kit/react](/pt-br/sdks/react): `useAuth`, `useUser`,`useSession`, `useSessionList`, `useOrganization`,`useOrganizationList`, `useAPIKeys`, `SignedIn`,`SignedOut`, `Protect`, `XidLoaded`,`XidLoading`, `XidFailed` e `XidDegraded`.

## Tipos

| Tipo | Descrição |
| --- | --- |
| `XidProviderProps` | Props do provider @xid-kit/react mais tokenCache, browser, issuer,clientId, redirectUri e escopos opcionais (padrão: openid, profile,email) |
| `TokenCache` | Contrato do adaptador de armazenamento: getToken, saveToken,deleteToken (todos assíncronos) |
| `BrowserInterface` | openAuthSession(url, redirectUri) que resolve para um BrowserResult |
| `BrowserResult` | União de sucesso (com URL de callback), cancelamento e descarte |
| `SignInOptions` | Substituições por chamada para signIn: redirectUri, scopes |
| `SignInState / SignOutState` | Uniões discriminadas de status retornadas pelos hooks |
| `UseSignInReturn / UseSignOutReturn` | Formatos de retorno dos hooks: ações mais estado |
| `TokenExchangeInput / TokenSet` | Entrada e resultado de exchangeCodeForTokens: accessToken,refreshToken, idToken, expiresIn |
| `XidRnContextValue` | Formato do contexto do adaptador retornado por useXidRnContext |

## Limitações conhecidas

- Sem atualização automática de sessão na expiração do token; o refreshtoken armazenado está disponível para renovação gerenciada peloaplicativo.
- useAuth().isSignedIn reflete a sessão por cookie do XidClient, não oconteúdo do TokenCache. Recarregue o estado do cliente após uma trocade token bem-sucedida para atualizar o estado de autenticação.
- O contexto da organização ainda não é preenchido a partir dos tokensarmazenados.

## Segurança

- Código de autorização com PKCE S256 exclusivamente. Sem fluxo implícito nem password grant.
- Clientes públicos nunca armazenam segredos do cliente.
- O verificador PKCE e o state OAuth residem no adaptador dearmazenamento seguro injetado e são excluídos após a troca de código.
- signOut limpa o conjunto de tokens local e revoga a sessão doservidor; falhas aparecem em signOutState em vez de serem silenciadas.

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