---
title: "@vonvon-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 relevant documentation index at: https://vonvon.id/pt-br/sdks/llms.txt
> Use this file to discover all available pages before exploring further.

# @vonvon-kit/react-native

## Estado

Status do registry: UNPUBLISHED. Instale este SDK somente a partir do checkout do código-fonte do repositório; não use um registry de pacotes externo.

O status do package é **Package atual**. Ele implementa um contrato nativo de sessão por token: redirecionamento do Hosted Auth com PKCE S256, validação de estado e nonce no callback de deep link, claims verificados do token de ID, troca do código de autorização e persistência segura da sessão por meio de um adaptador 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 `VonvonProvider`. OSDK não vincula rigidamente nenhum módulo nativo; apps Expo podemusar os adaptadores prontos de [@vonvon-kit/expo](/pt-br/sdks/expo).

```tsx
import { VonvonProvider } from '@vonvon-kit/react-native'
import type { BrowserInterface, TokenCache } from '@vonvon-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('vonvon', 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 (
<VonvonProvider
  issuer="https://vonvon.id"
  clientId="your_client_id"
  redirectUri="myapp://auth/callback"
  tokenCache={tokenCache}
  browser={browser}
>
  <RootNavigator />
</VonvonProvider>
  )
}
```

## Entrar

`signIn()` cria a URL de autorização PKCE S256, armazena o verificador, o estado OAuth e o nonce no cache de tokens, abre o adaptador de navegador e troca o código retornado por uma sessão nativa verificada. Falhas do navegador, divergência de estado, erros de verificação do token de ID e de troca de tokens são expostos como `signInState.status === 'error'`.

```tsx
import { useSignIn } from '@vonvon-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 conseguir capturar o redirecionamento, registre o esquema de URI de redirecionamento no manifesto da aplicação e encaminhe o deep link para `handleRedirect(url)`. Ele valida e consome o estado OAuth, o verificador e o nonce, troca o código, verifica o token de ID e armazena a sessão nativa.

```tsx
import { useSignIn } from '@vonvon-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 |
| --- | --- | --- |
| `VonvonProvider` | componente | Fornece um contexto nativo de sessão por token usando tokenCache, browser, issuer, clientId, redirectUri, scopes e um fetcher opcional |
| `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 a sessão local e as credenciais legadas; signOutState informa o progresso ou falhas de armazenamento; nenhuma solicitação de revogação é enviada |
| `useVonvonRnContext` | 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 chaves TokenCache para o envelope da sessão atual e registros pendentes de PKCE, estado e nonce; chaves de tokens legadas servem apenas para limpeza |
| `createPkceVerifier / createPkceChallenge` | funções | Utilitários PKCE S256 delegados a @vonvon-kit/protocol (Web Crypto) |
| `createRandomString / base64UrlEncode` | funções | String aleatória segura para URL para o state OAuth; auxiliar decodificação base64url |

## Hooks e controles nativos

Ao contrário de [@vonvon-kit/react](/pt-br/sdks/react), este package usa seu próprio contexto nativo de tokens. Ele exporta `useAuth`, `useUser`, `useSession`, `useSignIn`, `useSignOut`, `useVonvonRnContext`, `SignedIn`, `SignedOut`, `VonvonLoaded`, `VonvonLoading`, `exchangeCodeForTokens`, `saveTokenSet`, `readTokenSet` e `clearTokenSet`; ele não importa nem reexporta o SDK Web React.

## Tipos

| Tipo | Descrição |
| --- | --- |
| `VonvonProviderProps` | Props do provider nativo: children, tokenCache, browser, issuer, clientId, redirectUri, scopes opcionais (padrão openid, profile, email) e fetcher opcional |
| `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, idToken, expiresIn e claims verificados do token de ID |
| `VonvonRnContextValue` | Formato do contexto do adaptador retornado por useVonvonRnContext |

## Limitações conhecidas

- O SDK não possui vinculação de remetente DPoP, rejeita offline\_access e exige um novo fluxo de autorização após a expiração do token de acesso.
- useAuth().isSignedIn reflete uma sessão armazenada localmente somente após a verificação do token de ID; ele não lê uma sessão de cookie da Web.
- 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 a sessão local e as credenciais legadas sem solicitação de renovação ou revogação; falhas de armazenamento são expostas em signOutState.

Source: https://vonvon.id/pt-br/sdks/react-native/index.mdx