---
title: "@vonvon-kit/expo"
description: "Adaptadores Expo SecureStore y WebBrowser para @vonvon-kit/react-native más un hook guard de rutas para Expo Router."
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/expo

## 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**. Los adaptadores Expo SecureStore y WebBrowser, VonvonProvider y el hook guard de rutas para Expo Router están implementados. Una prueba de ida y vuelta real contra un IdP en infraestructura de producción está pendiente de verificación manual.

Toda la lógica PKCE, el intercambio de tokens y la gestión de sesiones viven en [@vonvon-kit/react-native](/es/sdks/react-native); este paquete solo provee adaptadores e integración con Expo Router.

## Configuración del proveedor

Inyecta `createSecureStoreAdapter` y `createExpoWebBrowserAdapter` en `VonvonProvider`. No se necesita importar el módulo Expo en el nivel raíz; los adaptadores aceptan instancias de módulo para que el typecheck en CI funcione sin las dependencias peer de Expo instaladas.

```tsx
import * as SecureStore from 'expo-secure-store'
import * as WebBrowser from 'expo-web-browser'
import { VonvonProvider, createSecureStoreAdapter, createExpoWebBrowserAdapter } from '@vonvon-kit/expo'

const tokenCache = createSecureStoreAdapter({ secureStore: SecureStore })
const browser = createExpoWebBrowserAdapter({ webBrowser: WebBrowser })

export default function App() {
  return (
<VonvonProvider
  issuer="https://vonvon.id"
  clientId="your_client_id"
  redirectUri="myapp://auth/callback"
  tokenCache={tokenCache}
  browser={browser}
>
  <RootLayout />
</VonvonProvider>
  )
}
```

## Inicio y cierre de sesión

```tsx
import { useSignIn, useSignOut } from '@vonvon-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 rutas de Expo Router

Llama a `useProtectedRoute` en un componente de layout. Lee `isLoaded`/`isSignedIn` desde `useAuth` y llama a `replace` de Expo Router dentro de un `useEffect`.

```tsx
import { useProtectedRoute } from '@vonvon-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 />
}
```

## Espaciado de nombres de claves SecureStore

Usa `keyPrefix` para agrupar las claves bajo un prefijo personalizado. El separador es `.` (punto), que está dentro del conjunto de caracteres permitidos por `expo-secure-store`.

```ts
const tokenCache = createSecureStoreAdapter({
  secureStore: SecureStore,
  keyPrefix: 'myapp',
  // Current session key: 'myapp.vonvon.session.v1'.
})
```

## API exportada

| Exportar | Tipo | Propósito |
| --- | --- | --- |
| `VonvonProvider` | componente | Re-exportación de VonvonProvider de @vonvon-kit/react-native que acepta adaptadores tokenCache y browser |
| `createSecureStoreAdapter` | function | Adaptador TokenCache respaldado por expo-secure-store; acepta una instancia secureStore y un keyPrefix opcional |
| `createExpoWebBrowserAdapter` | function | Adaptador BrowserInterface respaldado por expo-web-browser |
| `useSignIn` | hook | Re-exportación de @vonvon-kit/react-native: signIn, handleRedirect, signInState |
| `useSignOut` | hook | Re-exportación de @vonvon-kit/react-native: signOut, signOutState |
| `useProtectedRoute` | hook | Lee isLoaded/isSignedIn y llama al replace de Expo Router para proteger rutas |

## Limitaciones conocidas

- `useAuth().isSignedIn` refleja la sesión nativa verificada y almacenada localmente de `VonvonProvider`. No lee una sesión de cookie web; offline\_access se rechaza hasta que se implemente la vinculación de remitente DPoP y, cuando caduca el token de acceso, es necesario volver a autorizar.
- Este paquete solo proporciona adaptadores e integración con Expo Router. Para el flujo PKCE base de React Native, consulta [@vonvon-kit/react-native](/es/sdks/react-native).

Source: https://vonvon.id/es/sdks/expo/index.mdx