@xid-kit/expo

@xid-kit/react-native용 Expo SecureStore 및 WebBrowser 어댑터와 Expo Router 라우트 가드 hook.

상태

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

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

공급자 설정

XidProvider에 createSecureStoreAdapter와 createExpoWebBrowserAdapter를 주입하세요. 최상위 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`	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를 참조하세요.