@xid-kit/expo

@xid-kit/react-native 用の Expo SecureStore と WebBrowser アダプター、および Expo Router ルートガードフック。

状態

パッケージステータス：現行パッケージ。Expo SecureStore と WebBrowser アダプター、XidProvider、Expo Router ルートガードフックが実装済みです。本番インフラでの実際の IdP ラウンドトリップはまだ手動検証待ちです。

すべての PKCE ロジック、トークン交換、セッション管理は @xid-kit/react-native にあります。このパッケージはアダプターと Expo Router 統合のみを提供します。

プロバイダーの設定

createSecureStoreAdapter と createExpoWebBrowserAdapter を XidProvider に注入します。トップレベルの Expo モジュールインポートは不要です。アダプターはモジュールインスタンスを受け入れるため、Expo ピア依存関係なしで CI の型チェックがクリーンに保たれます。

import * as SecureStore from 'expo-secure-store'
import * as WebBrowser from 'expo-web-browser'
import { XidProvider, createSecureStoreAdapter, createExpoWebBrowserAdapter } from '@xid-kit/expo'

const tokenCache = createSecureStoreAdapter({ secureStore: SecureStore })
const browser = createExpoWebBrowserAdapter({ webBrowser: WebBrowser })

export default function App() {
  return (
    <XidProvider
      publishableKey="pk_live_..."
      issuer="https://xid.dev"
      clientId="your_client_id"
      redirectUri="myapp://auth/callback"
      tokenCache={tokenCache}
      browser={browser}
    >
      <RootLayout />
    </XidProvider>
  )
}

サインインとサインアウト

import { useSignIn, useSignOut } from '@xid-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 ルートガード

レイアウトコンポーネントで useProtectedRoute を呼び出します。useAuth から isLoaded/isSignedIn を読み取り、useEffect 内で Expo Router の replace を呼び出します。

import { useProtectedRoute } from '@xid-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 キーの名前空間

keyPrefix を使ってカスタムプレフィックス配下のキーを名前空間化します。区切り文字は .（ドット）で、expo-secure-store で使用可能な文字セット内です。

const tokenCache = createSecureStoreAdapter({
  secureStore: SecureStore,
  keyPrefix: 'myapp',
  // keys: 'myapp.xid.access_token', 'myapp.xid.refresh_token', etc.
})

エクスポートされた API

エクスポート	種別	目的
`XidProvider`	コンポーネント	tokenCache と browser アダプターを受け入れる @xid-kit/react-native XidProvider の再エクスポート
`createSecureStoreAdapter`	function	expo-secure-store を使用した TokenCache アダプター。secureStore インスタンスとオプションの keyPrefix を受け入れます
`createExpoWebBrowserAdapter`	function	expo-web-browser を使用した BrowserInterface アダプター
`useSignIn`	フック	@xid-kit/react-native からの再エクスポート：signIn、handleRedirect、signInState
`useSignOut`	フック	@xid-kit/react-native からの再エクスポート：signOut、signOutState
`useProtectedRoute`	フック	isLoaded/isSignedIn を読み取り、ルート保護のために Expo Router の replace を呼び出します

既知の制限事項

useAuth().isSignedIn は XidClient の Web Cookie セッション状態を反映します。トークン交換後にローカルの SecureStore トークンから自動取得されません。サインイン成功後はクライアント状態を明示的にリロードしてください。
このパッケージはアダプターと Expo Router 統合のみを提供します。基本的な React Native PKCE フローについては @xid-kit/react-native を参照してください。