@xid-kit/react-native

Hosted Auth リダイレクト、PKCE S256、ディープリンクコールバック、セキュアトークンストレージアダプター用の React Native プロバイダーとフック。

状態

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

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

プロバイダーの設定

TokenCache（プラットフォームセキュアストレージ）と BrowserInterface（アプリ内ブラウザ）を XidProvider に注入します。SDK はネイティブモジュールをハードバインドしません。Expo アプリは @xid-kit/expo の既製アダプターを使用できます。

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' として表面化します。

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 を検証し、コードを交換して、トークンセットを保存します。

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 からそのまま再エクスポートされます：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 に反映されます。