---
title: "@vonvon-kit/react-native"
description: "React-Native-Provider und Hooks für Hosted-Auth-Redirect, PKCE S256,Deep-Link-Callback und sichere Token-Speicher-Adapter."
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/react-native

## Zustand

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

Der Paketstatus lautet **Aktuelles Paket**. Es implementiert einen nativen Token-Sitzungsvertrag: Weiterleitung von Hosted Auth mit PKCE S256, State- und Nonce-Validierung beim Deep-Link-Callback, verifizierte ID-Token-Claims, Austausch des Autorisierungscodes und sichere Sitzungspersistenz über einen injizierten Speicheradapter.

Ein echter IdP-Round-Trip auf Produktionsinfrastruktur steht noch aus undmuss manuell verifiziert werden. Diese Seite dokumentiert implementiertesVerhalten und stellt keinen Bereitschaftsnachweis dar.

## Anbieter-Einrichtung

Injizieren Sie einen `TokenCache` (plattformsicherer Speicher) undein `BrowserInterface` (In-App-Browser) in `VonvonProvider`. DasSDK bindet kein natives Modul fest; Expo-Apps können die vorgefertigtenAdapter aus [@vonvon-kit/expo](/de/sdks/expo) verwenden.

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

## Anmelden

`signIn()` erstellt die PKCE-S256-Autorisierungs-URL, speichert Verifier, OAuth-State und Nonce im Token-Cache, öffnet den Browser-Adapter und tauscht den zurückgegebenen Code gegen eine verifizierte native Sitzung aus. Browserfehler, ein abweichender State sowie Fehler bei der ID-Token-Verifizierung und beim Token-Austausch werden als `signInState.status === 'error'` angezeigt.

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

## Deep-Link-Callback

Wenn der Browser-Adapter die Weiterleitung nicht selbst erfassen kann, registrieren Sie das Weiterleitungs-URI-Schema in Ihrem App-Manifest und leiten Sie den Deep Link an `handleRedirect(url)` weiter. Die Funktion validiert und verbraucht OAuth-State, Verifier und Nonce, tauscht den Code aus, verifiziert das ID-Token und speichert die native Sitzung.

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

## Exportierte API

| Exportieren | Art | Zweck |
| --- | --- | --- |
| `VonvonProvider` | Komponente | Stellt einen nativen Token-Sitzungskontext mit tokenCache, browser, issuer, clientId, redirectUri, scopes und optionalem fetcher bereit |
| `useSignIn` | Hook | signIn(options?) führt den vollständigen Redirect-Flow aus;handleRedirect(url) verarbeitet einen Deep-Link-Callback; signInStatemeldet idle, pending, complete, cancelled oder error |
| `useSignOut` | Hook | signOut() löscht die lokale Sitzung und veraltete Anmeldedaten; signOutState meldet Fortschritt oder Speicherfehler; es wird keine Widerrufsanforderung gesendet |
| `useVonvonRnContext` | Hook | Roher Adapter-Kontext (erweiterte Verwendung und Tests) |
| `exchangeCodeForTokens` | function | Direkter POST an den Token-Endpunkt mit grant\_type authorization\_code undPKCE-Verifier; gibt ein TokenSet zurück |
| `saveTokenSet / clearTokenSet` | Funktionen | Token-Set im TokenCache-Adapter speichern oder entfernen |
| `TOKEN_KEYS` | as-const-Objekt | TokenCache-Schlüsselnamen für den aktuellen Sitzungsumschlag und ausstehende PKCE-, State- und Nonce-Datensätze; veraltete Token-Schlüssel dienen nur der Bereinigung |
| `createPkceVerifier / createPkceChallenge` | Funktionen | PKCE-S256-Hilfsprogramme delegiert an @vonvon-kit/protocol (Web Crypto) |
| `createRandomString / base64UrlEncode` | Funktionen | URL-sicherer Zufallsstring für OAuth-State;base64url-Codierungs-Hilfsfunktion |

## Native Hooks und Steuerelemente

Im Gegensatz zu [@vonvon-kit/react](/de/sdks/react) verwendet dieses Paket einen eigenen nativen Token-Kontext. Es exportiert `useAuth`, `useUser`, `useSession`, `useSignIn`, `useSignOut`, `useVonvonRnContext`, `SignedIn`, `SignedOut`, `VonvonLoaded`, `VonvonLoading`, `exchangeCodeForTokens`, `saveTokenSet`, `readTokenSet` und `clearTokenSet`; es importiert oder reexportiert das React-Web-SDK nicht.

## Typen

| Typ | Beschreibung |
| --- | --- |
| `VonvonProviderProps` | Props des nativen Providers: children, tokenCache, browser, issuer, clientId, redirectUri, optionale scopes (standardmäßig openid, profile, email) und optionaler fetcher |
| `TokenCache` | Speicher-Adapter-Vertrag: getToken, saveToken, deleteToken (alleasynchron) |
| `BrowserInterface` | openAuthSession(url, redirectUri), das zu einem BrowserResult auflöst |
| `BrowserResult` | Union aus Erfolg (mit Callback-URL), Abbrechen und Schließen |
| `SignInOptions` | Pro-Aufruf-Überschreibungen für signIn: redirectUri, scopes |
| `SignInState / SignOutState` | Discriminated-Status-Unions, die von den Hooks zurückgegeben werden |
| `UseSignInReturn / UseSignOutReturn` | Hook-Rückgabestrukturen: Aktionen plus Status |
| `TokenExchangeInput / TokenSet` | Eingabe und Ergebnis von exchangeCodeForTokens: accessToken, idToken, expiresIn und verifizierte ID-Token-Claims |
| `VonvonRnContextValue` | Adapter-Kontextstruktur, die von useVonvonRnContext zurückgegeben wird |

## Bekannte Einschränkungen

- Das SDK besitzt keine DPoP-Absenderbindung, lehnt offline\_access ab und erfordert nach Ablauf des Zugriffstokens einen neuen Autorisierungsablauf.
- useAuth().isSignedIn spiegelt eine lokal gespeicherte Sitzung erst nach der ID-Token-Verifizierung wider; es liest keine Web-Cookie-Sitzung.
- Der Organisationskontext wird noch nicht aus gespeicherten Tokens befüllt.

## Sicherheit

- Autorisierungscode ausschließlich mit PKCE S256. Kein Implicit Flow oder Password Grant.
- Öffentliche Clients speichern niemals Client-Geheimnisse.
- PKCE-Verifier und OAuth-State liegen im injizierten sicherenSpeicher-Adapter und werden nach dem Code-Tausch gelöscht.
- signOut löscht die lokale Sitzung und veraltete Anmeldedaten ohne Refresh- oder Widerrufsanforderung; Speicherfehler werden in signOutState angezeigt.

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