---
title: "@vonvon-kit/react-native"
description: "Provider y hooks de React Native para redirección a Hosted Auth, PKCE S256, callback de deep link y adaptadores de almacenamiento seguro de tokens."
locale: "es"
---

> Documentation Index
> Fetch the relevant documentation index at: https://vonvon.id/es/sdks/llms.txt
> Use this file to discover all available pages before exploring further.

# @vonvon-kit/react-native

## Estado

Estado del registro: UNPUBLISHED. Instala este SDK únicamente desde el checkout del código fuente del repositorio; no uses un registro de paquetes externo.

El estado del paquete es **Paquete actual**. Implementa un contrato nativo de sesión de tokens: redirección de Hosted Auth con PKCE S256, validación de estado y nonce en el callback del enlace profundo, claims verificadas del token de ID, intercambio del código de autorización y persistencia segura de la sesión mediante un adaptador de almacenamiento inyectado.

Una prueba de ida y vuelta real contra un IdP en infraestructura de producción está pendiente de verificación manual. Esta página documenta el comportamiento implementado; no es una declaración de disponibilidad para producción.

## Configuración del proveedor

Inyecta un `TokenCache` (almacenamiento seguro de la plataforma) y un `BrowserInterface` (navegador en app) en `VonvonProvider`. El SDK no vincula ningún módulo nativo de forma rígida; las apps Expo pueden usar los adaptadores listos de [@vonvon-kit/expo](/es/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>
  )
}
```

## Iniciar sesión

`signIn()` crea la URL de autorización PKCE S256, almacena el verificador, el estado de OAuth y el nonce en la caché de tokens, abre el adaptador del navegador e intercambia el código devuelto por una sesión nativa verificada. Los fallos del navegador, las discrepancias de estado y los errores de verificación del token de ID o de intercambio de tokens se muestran 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

Cuando el adaptador del navegador no pueda capturar por sí mismo la redirección, registre el esquema de URI de redirección en el manifiesto de la aplicación y reenvíe el enlace profundo a `handleRedirect(url)`. La función valida y consume el estado de OAuth, el verificador y el nonce, intercambia el código, verifica el token de ID y almacena la sesión 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 | Propósito |
| --- | --- | --- |
| `VonvonProvider` | componente | Proporciona un contexto nativo de sesión de tokens mediante tokenCache, browser, issuer, clientId, redirectUri, scopes y un fetcher opcional |
| `useSignIn` | hook | signIn(options?) ejecuta el flujo de redirección completo; handleRedirect(url) procesa un callback de deep link; signInState reporta idle, pending, complete, cancelled o error |
| `useSignOut` | hook | signOut() borra la sesión local y las credenciales heredadas; signOutState informa del progreso o de fallos de almacenamiento; no se envía ninguna solicitud de revocación |
| `useVonvonRnContext` | hook | Contexto del adaptador sin procesar (uso avanzado y pruebas) |
| `exchangeCodeForTokens` | function | POST de bajo nivel al endpoint de tokens con grant\_type authorization\_code y el verificador PKCE; devuelve un TokenSet |
| `saveTokenSet / clearTokenSet` | funciones | Persiste o elimina el conjunto de tokens en el adaptador TokenCache |
| `TOKEN_KEYS` | objeto as const | Nombres de claves de TokenCache para el sobre de sesión actual y los registros pendientes de PKCE, estado y nonce; las claves de tokens heredadas solo se usan para limpieza |
| `createPkceVerifier / createPkceChallenge` | funciones | Utilidades PKCE S256 delegadas a @vonvon-kit/protocol (Web Crypto) |
| `createRandomString / base64UrlEncode` | funciones | Cadena aleatoria segura para URLs como estado OAuth; utilidad de codificación base64url |

## Hooks y controles nativos

A diferencia de [@vonvon-kit/react](/es/sdks/react), este paquete usa su propio contexto nativo de tokens. Exporta `useAuth`, `useUser`, `useSession`, `useSignIn`, `useSignOut`, `useVonvonRnContext`, `SignedIn`, `SignedOut`, `VonvonLoaded`, `VonvonLoading`, `exchangeCodeForTokens`, `saveTokenSet`, `readTokenSet` y `clearTokenSet`; no importa ni vuelve a exportar el SDK web de React.

## Tipos

| Tipo | Descripción |
| --- | --- |
| `VonvonProviderProps` | Props del proveedor nativo: children, tokenCache, browser, issuer, clientId, redirectUri, scopes opcionales (openid, profile y email de forma predeterminada) y fetcher opcional |
| `TokenCache` | Contrato del adaptador de almacenamiento: getToken, saveToken, deleteToken (todos asíncronos) |
| `BrowserInterface` | openAuthSession(url, redirectUri) que resuelve a un BrowserResult |
| `BrowserResult` | Unión de éxito (con URL de callback), cancelación y cierre |
| `SignInOptions` | Anulaciones por llamada para signIn: redirectUri, scopes |
| `SignInState / SignOutState` | Uniones discriminadas de estado devueltas por los hooks |
| `UseSignInReturn / UseSignOutReturn` | Formas de retorno del hook: acciones más estado |
| `TokenExchangeInput / TokenSet` | Entrada y resultado de exchangeCodeForTokens: accessToken, idToken, expiresIn y claims verificadas del token de ID |
| `VonvonRnContextValue` | Forma del contexto del adaptador devuelta por useVonvonRnContext |

## Limitaciones conocidas

- El SDK no tiene vinculación de remitente DPoP, rechaza offline\_access y requiere un nuevo flujo de autorización después de que caduque el token de acceso.
- useAuth().isSignedIn refleja una sesión almacenada localmente solo después de verificar el token de ID; no lee una sesión de cookie web.
- El contexto de organización aún no se rellena desde los tokens almacenados.

## Seguridad

- Código de autorización solo con PKCE S256. Sin flujo implícito ni password grant.
- Los clientes públicos nunca almacenan secretos de cliente.
- El verificador PKCE y el estado OAuth viven en el adaptador de almacenamiento seguro inyectado y se eliminan tras el intercambio de código.
- signOut borra la sesión local y las credenciales heredadas sin enviar una solicitud de actualización ni de revocación; los fallos de almacenamiento se muestran en signOutState.

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