@vonvon-kit/expo

Zustand

Registry-Status: UNPUBLISHED. Installieren Sie dieses SDK nur aus einem Checkout des Repository-Quellcodes; verwenden Sie keine externe Paket-Registry.

Paketstatus: Aktuelles Paket. Expo-SecureStore- undWebBrowser-Adapter, VonvonProvider und Expo-Router-Route-Guard-Hook sindimplementiert. Ein echter IdP-Round-Trip auf Produktionsinfrastruktursteht noch manuell aus.

Gesamte PKCE-Logik, Token-Tausch und Sitzungsverwaltung liegen in@vonvon-kit/react-native; dieses Paket stellt nur Adapter und dieExpo-Router-Integration bereit.

Anbieter-Einrichtung

Injizieren Sie createSecureStoreAdapter undcreateExpoWebBrowserAdapter in VonvonProvider. Es ist keinTop-Level-Expo-Modulimport erforderlich; Adapter akzeptierenModulinstanzen, damit der CI-Typecheck ohne installierte Expo-Peer-Depssauber bleibt.

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

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

export default function App() {
  return (
    <VonvonProvider
      issuer="https://vonvon.id"
      clientId="your_client_id"
      redirectUri="myapp://auth/callback"
      tokenCache={tokenCache}
      browser={browser}
    >
      <RootLayout />
    </VonvonProvider>
  )
}

Anmelden und abmelden

import { useSignIn, useSignOut } from '@vonvon-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-Route-Guard

Rufen Sie useProtectedRoute in einer Layout-Komponente auf. Esliest isLoaded/isSignedIn aus useAuth und ruftreplace von Expo Router innerhalb eines useEffect auf.

import { useProtectedRoute } from '@vonvon-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-Schlüssel-Namensgebung

Verwenden Sie keyPrefix, um Schlüssel unter einembenutzerdefinierten Prefix einzuordnen. Das Trennzeichen ist .(Punkt), das im erlaubten Zeichensatz von expo-secure-storeenthalten ist.

const tokenCache = createSecureStoreAdapter({
  secureStore: SecureStore,
  keyPrefix: 'myapp',
  // Current session key: 'myapp.vonvon.session.v1'.
})

Exportierte API

Bekannte Einschränkungen

• useAuth().isSignedIn spiegelt die lokal gespeicherte, verifizierte native Sitzung aus VonvonProvider wider. Es liest keine Web-Cookie-Sitzung; offline_access wird abgelehnt, bis die DPoP-Absenderbindung implementiert ist, und nach Ablauf des Zugriffstokens ist eine erneute Autorisierung erforderlich.
• Dieses Paket stellt nur Adapter und die Expo-Router-Integration bereit.Für den grundlegenden React-Native-PKCE-Flow siehe@vonvon-kit/react-native.