---
title: "@xid-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 locale documentation index at: https://xid.dev/es/llms.txt
> Use this file to discover all available pages before exploring further.

# @xid-kit/react-native

## Estado

El estado del paquete es **Paquete actual**. Implementa el contrato nativo compartido: redirección a Hosted Auth con PKCE S256, validación de estado CSRF en el callback de deep link, intercambio de código de autorización contra el endpoint de tokens y persistencia segura de tokens 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 `XidProvider`. El SDK no vincula ningún módulo nativo de forma rígida; las apps Expo pueden usar los adaptadores listos de [@xid-kit/expo](/es/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>
  )
}
```

## Iniciar sesión

`signIn()` construye la URL de autorización PKCE S256, almacena el verificador y el estado OAuth en el caché de tokens, abre el adaptador de navegador e intercambia el código devuelto por tokens. Los errores del navegador, el desfase de estado CSRF y los errores de intercambio de tokens se exponen 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

Cuando el adaptador del navegador no pueda capturar la redirección por sí mismo, registra el esquema URI de redirección en el manifiesto de tu app y reenvía el deep link a `handleRedirect(url)`. Valida el estado OAuth, intercambia el código y almacena el 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 | Propósito |
| --- | --- | --- |
| `XidProvider` | componente | Envuelve el provider @xid-kit/react e inyecta tokenCache, browser, issuer, clientId, redirectUri y scopes |
| `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() limpia el conjunto de tokens locales y luego revoca la sesión del servidor mediante useAuth().signOut; signOutState reporta el progreso |
| `useXidRnContext` | 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 access, refresh e ID tokens más el verificador PKCE y el estado OAuth |
| `createPkceVerifier / createPkceChallenge` | funciones | Utilidades PKCE S256 delegadas a @xid-kit/protocol (Web Crypto) |
| `createRandomString / base64UrlEncode` | funciones | Cadena aleatoria segura para URLs como estado OAuth; utilidad de codificación base64url |

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

Los hooks de sesión y los componentes de control se re-exportan sin cambios desde [@xid-kit/react](/es/sdks/react): `useAuth`, `useUser`, `useSession`, `useSessionList`, `useOrganization`, `useOrganizationList`, `useAPIKeys`, `SignedIn`, `SignedOut`, `Protect`, `XidLoaded`, `XidLoading`, `XidFailed` y `XidDegraded`.

## Tipos

| Tipo | Descripción |
| --- | --- |
| `XidProviderProps` | Props del provider @xid-kit/react más tokenCache, browser, issuer, clientId, redirectUri y scopes opcionales (por defecto: openid, profile, email) |
| `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, refreshToken, idToken, expiresIn |
| `XidRnContextValue` | Forma del contexto del adaptador devuelta por useXidRnContext |

## Limitaciones conocidas

- Sin renovación automática de sesión al expirar el token; el refresh token almacenado está disponible para renovación gestionada por la aplicación.
- useAuth().isSignedIn refleja la sesión por cookie de XidClient, no el contenido de TokenCache. Recarga el estado del cliente tras un intercambio de tokens exitoso para actualizar el estado de autenticación en vivo.
- 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 limpia el conjunto de tokens locales y revoca la sesión del servidor; los errores se exponen en signOutState en lugar de ignorarse.

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