---
title: "@xid-kit/expo"
description: "@xid-kit/react-native 用の Expo SecureStore と WebBrowser アダプター、および Expo Router ルートガードフック。"
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/expo

## 状態

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

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

## プロバイダーの設定

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

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

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

```tsx
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` を呼び出します。

```tsx
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` で使用可能な文字セット内です。

```ts
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](/ja/sdks/react-native) を参照してください。

Source: https://xid.dev/ja/sdks/expo/index.mdx