Zum Inhalt springen

@xid-kit/react-native

React-Native-Provider und Hooks für Hosted-Auth-Redirect, PKCE S256,Deep-Link-Callback und sichere Token-Speicher-Adapter.

Als Markdown anzeigen

Zustand

Paketstatus: Aktuelles Paket. Es implementiert den gemeinsamennativen Vertrag: Hosted-Auth-Redirect mit PKCE S256,CSRF-State-Validierung beim Deep-Link-Callback, Autorisierungscode-Tauscham Token-Endpunkt und sichere Token-Persistenz über einen injiziertenSpeicher-Adapter.

Ein echter IdP-Round-Trip auf Produktionsinfrastruktur steht noch aus undmuss manuell verifiziert werden. Diese Seite dokumentiert implementiertesVerhalten und stellt keinen Bereitschaftsnachweis dar.

Anbieter-Einrichtung

Injizieren Sie einen TokenCache (plattformsicherer Speicher) undein BrowserInterface (In-App-Browser) in XidProvider. DasSDK bindet kein natives Modul fest; Expo-Apps können die vorgefertigtenAdapter aus @xid-kit/expo verwenden.

import { XidProvider } from '@xid-kit/react-native'
import type { BrowserInterface, TokenCache } from '@xid-kit/react-native'
import * as Keychain from 'react-native-keychain'

const tokenCache: TokenCache = {
  async getToken(key) {
    const result = await Keychain.getGenericPassword({ service: key })
    return result ? result.password : null
  },
  async saveToken(key, value) {
    await Keychain.setGenericPassword('xid', value, { service: key })
  },
  async deleteToken(key) {
    await Keychain.resetGenericPassword({ service: key })
  },
}

const browser: BrowserInterface = {
  async openAuthSession(url, redirectUri) {
    // Open url with your in-app browser library, wait for the redirectUri
    // deep link, then return { type: 'success', url } or { type: 'cancel' }.
    throw new Error('Implement with your preferred in-app browser library.')
  },
}

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

Anmelden

signIn() erstellt die PKCE-S256-Autorisierungs-URL, speichert denVerifier und den OAuth-State im Token-Cache, öffnet den Browser-Adapterund tauscht den zurückgegebenen Code gegen Token ein. Browser-Fehler,CSRF-State-Abweichungen und Token-Tauschfehler werden alssignInState.status === 'error' zurückgegeben.

import { useSignIn } from '@xid-kit/react-native'

function SignInScreen() {
  const { signIn, signInState } = useSignIn()

  return (
    <Button
      title={signInState.status === 'pending' ? 'Signing in...' : 'Sign in'}
      onPress={() => void signIn()}
    />
  )
}

Wenn der Browser-Adapter den Redirect nicht selbst erfassen kann,registrieren Sie das Redirect-URI-Schema in Ihrem App-Manifest und leitenSie den Deep Link an handleRedirect(url) weiter. Es validiert denOAuth-State, tauscht den Code ein und speichert den Token-Satz.

import { useSignIn } from '@xid-kit/react-native'
import { useEffect } from 'react'
import { Linking } from 'react-native'

function DeepLinkHandler() {
  const { handleRedirect } = useSignIn()

  useEffect(() => {
    const sub = Linking.addEventListener('url', ({ url }) => {
      if (url.startsWith('myapp://auth/callback')) {
        void handleRedirect(url)
      }
    })
    return () => sub.remove()
  }, [handleRedirect])

  return null
}

Exportierte API

Exportieren Art Zweck
XidProvider Komponente Kapselt den @xid-kit/react-Provider und injiziert tokenCache, browser,issuer, clientId, redirectUri und scopes
useSignIn Hook signIn(options?) führt den vollständigen Redirect-Flow aus;handleRedirect(url) verarbeitet einen Deep-Link-Callback; signInStatemeldet idle, pending, complete, cancelled oder error
useSignOut Hook signOut() löscht den lokalen Token-Satz und widerruft dann dieServer-Sitzung über useAuth().signOut; signOutState meldet den Fortschritt
useXidRnContext Hook Roher Adapter-Kontext (erweiterte Verwendung und Tests)
exchangeCodeForTokens function Direkter POST an den Token-Endpunkt mit grant_type authorization_code undPKCE-Verifier; gibt ein TokenSet zurück
saveTokenSet / clearTokenSet Funktionen Token-Set im TokenCache-Adapter speichern oder entfernen
TOKEN_KEYS as-const-Objekt TokenCache-Schlüsselnamen für Access-, Refresh- und ID-Tokens sowiePKCE-Verifier und OAuth-State
createPkceVerifier / createPkceChallenge Funktionen PKCE-S256-Hilfsprogramme delegiert an @xid-kit/protocol (Web Crypto)
createRandomString / base64UrlEncode Funktionen URL-sicherer Zufallsstring für OAuth-State;base64url-Codierungs-Hilfsfunktion

Re-Exporte aus @xid-kit/react

Sitzungs-Hooks und Steuerungskomponenten werden unverändert aus@xid-kit/react re-exportiert: useAuth, useUser,useSession, useSessionList, useOrganization,useOrganizationList, useAPIKeys, SignedIn,SignedOut, Protect, XidLoaded,XidLoading, XidFailed und XidDegraded.

Typen

Typ Beschreibung
XidProviderProps @xid-kit/react Provider-Props sowie tokenCache, browser, issuer, clientId,redirectUri und optionale Scopes (Standard: openid, profile, email)
TokenCache Speicher-Adapter-Vertrag: getToken, saveToken, deleteToken (alleasynchron)
BrowserInterface openAuthSession(url, redirectUri), das zu einem BrowserResult auflöst
BrowserResult Union aus Erfolg (mit Callback-URL), Abbrechen und Schließen
SignInOptions Pro-Aufruf-Überschreibungen für signIn: redirectUri, scopes
SignInState / SignOutState Discriminated-Status-Unions, die von den Hooks zurückgegeben werden
UseSignInReturn / UseSignOutReturn Hook-Rückgabestrukturen: Aktionen plus Status
TokenExchangeInput / TokenSet Eingabe und Ergebnis von exchangeCodeForTokens: accessToken, refreshToken,idToken, expiresIn
XidRnContextValue Adapter-Kontextstruktur, die von useXidRnContext zurückgegeben wird

Bekannte Einschränkungen

  • Keine automatische Sitzungserneuerung beim Token-Ablauf; das gespeicherteRefresh-Token steht für eine anwendungsverwaltete Erneuerung zurVerfügung.
  • useAuth().isSignedIn spiegelt die XidClient-Cookie-Sitzung wider, nichtden TokenCache-Inhalt. Laden Sie den Client-Status nach einemerfolgreichen Token-Tausch neu, um den Live-Auth-Status zu treiben.
  • Der Organisationskontext wird noch nicht aus gespeicherten Tokens befüllt.

Sicherheit

  • Autorisierungscode ausschließlich mit PKCE S256. Kein Implicit Flow oder Password Grant.
  • Öffentliche Clients speichern niemals Client-Geheimnisse.
  • PKCE-Verifier und OAuth-State liegen im injizierten sicherenSpeicher-Adapter und werden nach dem Code-Tausch gelöscht.
  • signOut löscht den lokalen Token-Satz und widerruft die Server-Sitzung;Fehler werden in signOutState angezeigt statt verschluckt.
Navigation

Suchbegriff eingeben...

Mit den Pfeiltasten navigierenEingabetaste zum AuswählenEscape zum Schließen