---
title: "@vonvon-kit/expo"
description: "Expo-SecureStore- und WebBrowser-Adapter für @vonvon-kit/react-native sowieein Expo-Router-Route-Guard-Hook."
locale: "de"
---

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

# @vonvon-kit/expo

## Zustand

Registry-Status: UNPUBLISHED. Installieren Sie dieses SDK nur aus einem Checkout des Repository-Quellcodes; verwenden Sie keine externe Paket-Registry.

Paketstatus: **Aktuelles Paket**. Expo-SecureStore- undWebBrowser-Adapter, VonvonProvider und Expo-Router-Route-Guard-Hook sindimplementiert. Ein echter IdP-Round-Trip auf Produktionsinfrastruktursteht noch manuell aus.

Gesamte PKCE-Logik, Token-Tausch und Sitzungsverwaltung liegen in[@vonvon-kit/react-native](/de/sdks/react-native); dieses Paket stellt nur Adapter und dieExpo-Router-Integration bereit.

## Anbieter-Einrichtung

Injizieren Sie `createSecureStoreAdapter` und`createExpoWebBrowserAdapter` in `VonvonProvider`. Es ist keinTop-Level-Expo-Modulimport erforderlich; Adapter akzeptierenModulinstanzen, damit der CI-Typecheck ohne installierte Expo-Peer-Depssauber bleibt.

```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>
  )
}
```

## Anmelden und abmelden

```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()} />
}
```

## Expo-Router-Route-Guard

Rufen Sie `useProtectedRoute` in einer Layout-Komponente auf. Esliest `isLoaded`/`isSignedIn` aus `useAuth` und ruft`replace` von Expo Router innerhalb eines `useEffect` auf.

```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 />
}
```

## SecureStore-Schlüssel-Namensgebung

Verwenden Sie `keyPrefix`, um Schlüssel unter einembenutzerdefinierten Prefix einzuordnen. Das Trennzeichen ist `.`(Punkt), das im erlaubten Zeichensatz von `expo-secure-store`enthalten ist.

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

## Exportierte API

| Exportieren | Art | Zweck |
| --- | --- | --- |
| `VonvonProvider` | Komponente | Re-Export von @vonvon-kit/react-native VonvonProvider, der tokenCache undBrowser-Adapter akzeptiert |
| `createSecureStoreAdapter` | function | TokenCache-Adapter auf Basis von expo-secure-store; akzeptiertsecureStore-Instanz und optionales keyPrefix |
| `createExpoWebBrowserAdapter` | function | BrowserInterface-Adapter auf Basis von expo-web-browser |
| `useSignIn` | Hook | Re-Export aus @vonvon-kit/react-native: signIn, handleRedirect, signInState |
| `useSignOut` | Hook | Re-Export aus @vonvon-kit/react-native: signOut, signOutState |
| `useProtectedRoute` | Hook | Liest isLoaded/isSignedIn und ruft Expo Router replace für denRoutenschutz auf |

## Bekannte Einschränkungen

- `useAuth().isSignedIn` spiegelt die lokal gespeicherte, verifizierte native Sitzung aus `VonvonProvider` wider. Es liest keine Web-Cookie-Sitzung; offline\_access wird abgelehnt, bis die DPoP-Absenderbindung implementiert ist, und nach Ablauf des Zugriffstokens ist eine erneute Autorisierung erforderlich.
- Dieses Paket stellt nur Adapter und die Expo-Router-Integration bereit.Für den grundlegenden React-Native-PKCE-Flow siehe[@vonvon-kit/react-native](/de/sdks/react-native).

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