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

> Documentation Index
> Fetch the locale documentation index at: https://xid.dev/ja/llms.txt
> Use this file to discover all available pages before exploring further.

# @xid-kit/react-native

## 状態

パッケージステータス：**現行パッケージ**。共有ネイティブコントラクトを実装しています：PKCE S256 付き Hosted Auth リダイレクト、ディープリンクコールバックでの CSRF state 検証、トークンエンドポイントに対する認可コード交換、注入されたストレージアダプター経由のセキュアトークン永続化。

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

## プロバイダーの設定

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

## サインイン

`signIn()` は PKCE S256 認可 URL を構築し、ベリファイアーと OAuth state をトークンキャッシュに保存し、ブラウザアダプターを開き、返されたコードをトークンと交換します。ブラウザ失敗、CSRF state 不一致、トークン交換エラーは `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()}
/>
  )
}
```

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

ブラウザアダプターがリダイレクトを自身でキャプチャできない場合は、アプリのマニフェストにリダイレクト URI スキームを登録し、ディープリンクを `handleRedirect(url)` に転送してください。OAuth state を検証し、コードを交換して、トークンセットを保存します。

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

| エクスポート | 種別 | 目的 |
| --- | --- | --- |
| `XidProvider` | コンポーネント | @xid-kit/react プロバイダーをラップし、tokenCache、browser、issuer、clientId、redirectUri、scopes を注入します |
| `useSignIn` | フック | signIn(options?) はリダイレクトフロー全体を実行します。handleRedirect(url) はディープリンクコールバックを処理し、signInState は idle、pending、complete、cancelled、error を返します |
| `useSignOut` | フック | signOut() はローカルトークンセットをクリアし、useAuth().signOut を通じてサーバーセッションを取り消します。signOutState で進捗を報告します |
| `useXidRnContext` | フック | 生のアダプターコンテキスト（高度な使用およびテスト向け） |
| `exchangeCodeForTokens` | function | grant\_type authorization\_code と PKCE ベリファイアーを使ったトークンエンドポイントへの低レベル POST。TokenSet を返します |
| `saveTokenSet / clearTokenSet` | 関数 | TokenCache アダプターでトークンセットを永続化または削除します |
| `TOKEN_KEYS` | as const オブジェクト | アクセス、リフレッシュ、ID トークンおよび PKCE ベリファイアーと OAuth state 用の TokenCache キー名 |
| `createPkceVerifier / createPkceChallenge` | 関数 | PKCE S256 ユーティリティは @xid-kit/protocol（Web Crypto）に委譲 |
| `createRandomString / base64UrlEncode` | 関数 | OAuth state 用の URL セーフなランダム文字列。base64url エンコーディングヘルパー |

## @xid-kit/react からの再エクスポート

セッションフックと制御コンポーネントは [@xid-kit/react](/ja/sdks/react) からそのまま再エクスポートされます：`useAuth`、`useUser`、`useSession`、`useSessionList`、`useOrganization`、`useOrganizationList`、`useAPIKeys`、`SignedIn`、`SignedOut`、`Protect`、`XidLoaded`、`XidLoading`、`XidFailed`、`XidDegraded`。

## 型

| 種別 | 説明 |
| --- | --- |
| `XidProviderProps` | @xid-kit/react のプロバイダー props に加え、tokenCache、browser、issuer、clientId、redirectUri、オプションの scopes（デフォルト：openid、profile、email） |
| `TokenCache` | ストレージアダプターコントラクト：getToken、saveToken、deleteToken（すべて非同期） |
| `BrowserInterface` | BrowserResult に解決される openAuthSession(url, redirectUri) |
| `BrowserResult` | 成功（コールバック URL 付き）、キャンセル、非表示のユニオン |
| `SignInOptions` | signIn の呼び出しごとのオーバーライド：redirectUri、scopes |
| `SignInState / SignOutState` | フックが返す判別ステータスユニオン |
| `UseSignInReturn / UseSignOutReturn` | フック戻り値の形状：アクションとステート |
| `TokenExchangeInput / TokenSet` | exchangeCodeForTokens の入力と結果：accessToken、refreshToken、idToken、expiresIn |
| `XidRnContextValue` | useXidRnContext が返すアダプターコンテキストの形状 |

## 既知の制限事項

- トークン有効期限切れ時の自動セッション更新はありません。保存されたリフレッシュトークンはアプリケーション管理の更新に利用できます。
- useAuth().isSignedIn は TokenCache の内容ではなく XidClient の Cookie セッションを反映します。ライブ認証状態を維持するには、トークン交換が成功した後にクライアント状態をリロードしてください。
- 組織コンテキストは保存済みトークンからまだ取得されていません。

## セキュリティ

- PKCE S256 のみの認可コード。Implicit グラントおよびパスワードグラントは使用できません。
- パブリッククライアントはクライアントシークレットを保存しません。
- PKCE ベリファイアーと OAuth state は注入されたセキュアストレージアダプターに保存され、コード交換後に削除されます。
- signOut はローカルトークンセットをクリアし、サーバーセッションを取り消します。失敗は飲み込まれず signOutState に反映されます。

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