---
title: "@vonvon-kit/react-native"
description: "Hosted Auth リダイレクト、PKCE S256、ディープリンクコールバック、セキュアトークンストレージアダプター用の React Native プロバイダーとフック。"
locale: "ja"
---

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

# @vonvon-kit/react-native

## 状態

Registry 状態: UNPUBLISHED。この SDK はリポジトリのソース checkout からのみインストールし、外部 package registry は使用しないでください。

パッケージのステータスは **現行パッケージ** です。ネイティブ token-session contract として、PKCE S256 を使用する Hosted Auth redirect、deep-link callback での state と nonce の検証、検証済み ID token claims、authorization code exchange、注入された storage adapter を介した安全なセッション永続化を実装しています。

本番インフラでの実際の IdP ラウンドトリップはまだ手動検証待ちです。このページは実装済みの動作を記録したものであり、準備完了の主張ではありません。

## プロバイダーの設定

`TokenCache`（プラットフォームセキュアストレージ）と `BrowserInterface`（アプリ内ブラウザ）を `VonvonProvider` に注入します。SDK はネイティブモジュールをハードバインドしません。Expo アプリは [@vonvon-kit/expo](/ja/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>
  )
}
```

## サインイン

`signIn()` は PKCE S256 認可 URL を生成し、verifier、OAuth state、nonce を token cache に保存して browser adapter を開き、返された code を検証済みのネイティブセッションと交換します。ブラウザーの失敗、state の不一致、ID token の検証エラー、token exchange のエラーは `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()}
/>
  )
}
```

## ディープリンクコールバック

browser adapter 自体で redirect を捕捉できない場合は、アプリの manifest に redirect URI scheme を登録し、deep link を `handleRedirect(url)` に転送してください。このメソッドは OAuth state、verifier、nonce を検証して消費し、code を交換し、ID token を検証して、ネイティブセッションを保存します。

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

| エクスポート | 種別 | 目的 |
| --- | --- | --- |
| `VonvonProvider` | コンポーネント | tokenCache、browser、issuer、clientId、redirectUri、scopes、任意の fetcher を使用するネイティブ token-session context を提供します |
| `useSignIn` | フック | signIn(options?) はリダイレクトフロー全体を実行します。handleRedirect(url) はディープリンクコールバックを処理し、signInState は idle、pending、complete、cancelled、error を返します |
| `useSignOut` | フック | signOut() はローカルセッションとレガシー credentials を消去します。signOutState は進行状況または storage の失敗を通知します。revoke request は送信されません |
| `useVonvonRnContext` | フック | 生のアダプターコンテキスト（高度な使用およびテスト向け） |
| `exchangeCodeForTokens` | function | grant\_type authorization\_code と PKCE ベリファイアーを使ったトークンエンドポイントへの低レベル POST。TokenSet を返します |
| `saveTokenSet / clearTokenSet` | 関数 | TokenCache アダプターでトークンセットを永続化または削除します |
| `TOKEN_KEYS` | as const オブジェクト | 現在の session envelope、および保留中の PKCE、state、nonce records に使用する TokenCache key names。レガシー token keys はクリーンアップ専用です |
| `createPkceVerifier / createPkceChallenge` | 関数 | PKCE S256 ユーティリティは @vonvon-kit/protocol（Web Crypto）に委譲 |
| `createRandomString / base64UrlEncode` | 関数 | OAuth state 用の URL セーフなランダム文字列。base64url エンコーディングヘルパー |

## ネイティブの hooks と controls

[@vonvon-kit/react](/ja/sdks/react) とは異なり、このパッケージは独自のネイティブ token context を使用します。`useAuth`、`useUser`、`useSession`、`useSignIn`、`useSignOut`、`useVonvonRnContext`、`SignedIn`、`SignedOut`、`VonvonLoaded`、`VonvonLoading`、`exchangeCodeForTokens`、`saveTokenSet`、`readTokenSet`、`clearTokenSet` をエクスポートします。React web SDK の import または re-export は行いません。

## 型

| 種別 | 説明 |
| --- | --- |
| `VonvonProviderProps` | ネイティブ provider props: children、tokenCache、browser、issuer、clientId、redirectUri、任意の scopes (既定値は openid、profile、email)、任意の fetcher |
| `TokenCache` | ストレージアダプターコントラクト：getToken、saveToken、deleteToken（すべて非同期） |
| `BrowserInterface` | BrowserResult に解決される openAuthSession(url, redirectUri) |
| `BrowserResult` | 成功（コールバック URL 付き）、キャンセル、非表示のユニオン |
| `SignInOptions` | signIn の呼び出しごとのオーバーライド：redirectUri、scopes |
| `SignInState / SignOutState` | フックが返す判別ステータスユニオン |
| `UseSignInReturn / UseSignOutReturn` | フック戻り値の形状：アクションとステート |
| `TokenExchangeInput / TokenSet` | exchangeCodeForTokens の入力と結果: accessToken、idToken、expiresIn、検証済み ID token claims |
| `VonvonRnContextValue` | useVonvonRnContext が返すアダプターコンテキストの形状 |

## 既知の制限事項

- SDK には DPoP sender binding がないため offline\_access を拒否し、access token の有効期限が切れた後は新しい authorization flow を要求します。
- useAuth().isSignedIn は ID token の検証後にのみ、ローカルに保存されたセッションを反映します。web cookie session は読み取りません。
- 組織コンテキストは保存済みトークンからまだ取得されていません。

## セキュリティ

- PKCE S256 のみの認可コード。Implicit グラントおよびパスワードグラントは使用できません。
- パブリッククライアントはクライアントシークレットを保存しません。
- PKCE ベリファイアーと OAuth state は注入されたセキュアストレージアダプターに保存され、コード交換後に削除されます。
- signOut は refresh request や revoke request を送信せずに、ローカルセッションとレガシー credentials を消去します。storage の失敗は signOutState で通知されます。

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