---
title: "@xid-kit/expo"
description: "@xid-kit/react-native용 Expo SecureStore 및 WebBrowser 어댑터와 Expo Router 라우트 가드 hook."
locale: "ko"
---

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

# @xid-kit/expo

## 상태

패키지 상태: **현재 패키지**. Expo SecureStore 및 WebBrowser 어댑터, XidProvider, Expo Router 라우트 가드 hook이 구현되었습니다. 프로덕션 인프라에서의 실제 IdP 왕복 테스트는 아직 수동 검증 대기 중입니다.

모든 PKCE 로직, 토큰 교환, 세션 관리는 [@xid-kit/react-native](/ko/sdks/react-native)에 있으며, 이 패키지는 어댑터와 Expo Router 통합만 제공합니다.

## 공급자 설정

`XidProvider`에 `createSecureStoreAdapter`와 `createExpoWebBrowserAdapter`를 주입하세요. 최상위 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` | hook | @xid-kit/react-native 재내보내기: signIn, handleRedirect, signInState |
| `useSignOut` | hook | @xid-kit/react-native 재내보내기: signOut, signOutState |
| `useProtectedRoute` | hook | isLoaded/isSignedIn을 읽고 라우트 보호를 위해 Expo Router replace를 호출합니다 |

## 알려진 제한 사항

- `useAuth().isSignedIn`은 `XidClient` 웹 cookie 세션 상태를 반영하며, 토큰 교환 후 로컬 SecureStore 토큰에서 자동으로 채워지지 않습니다. 로그인 성공 후 클라이언트 상태를 명시적으로 다시 로드하세요.
- 이 패키지는 어댑터와 Expo Router 통합만 제공합니다. 기본 React Native PKCE 흐름은 [@xid-kit/react-native](/ko/sdks/react-native)를 참조하세요.

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