@xid-kit/react

React 19 Provider, Hooks, Steuerungskomponenten und Hosted UI-Bausteine für Kundenanwendungen.

Anbieter-Einrichtung

import { XidProvider } from '@xid-kit/react'

export function AppProviders({ children }: { children: React.ReactNode }) {
  return (
    <XidProvider publishableKey="pk_live_..." apiUrl="https://xid.dev">
      {children}
    </XidProvider>
  )
}

Hooks

Hook	Gibt zurück
`useAuth`	isLoaded, isSignedIn, userId, signOut, getToken
`useUser`	isLoaded, isSignedIn, user: XidUser \| null
`useSession`	isLoaded, isSignedIn, session: XidSession \| null
`useSessionList`	isLoaded, sessions, setActive für Multi-Sitzungs-Umschalter
`useSignIn`	Hosted Auth Anmeldeablauf-Helfer
`useOrganization`	isLoaded, organization: XidOrganization \| null, membership
`useOrganizationList`	isLoaded, userMemberships für Organisations-Umschalter-UI
`useAPIKeys`	Management-API-Schlüsselliste und Aktionen für Konsolen-Einbettungen
`useXidContext`	Rohwert XidContextValue (erweiterte Nutzung; typisierte Hooks bevorzugen)

Steuerungskomponenten

Komponente	Props-Typ	Zweck
`SignedIn`	`SignedInProps`	Rendert Kindelemente nur wenn die Sitzung geladen und angemeldet ist
`SignedOut`	`SignedOutProps`	Rendert Kindelemente nur wenn geladen und nicht angemeldet
`Protect`	`ProtectProps`	Berechtigungs- und Rollenprüfung mit optionaler Fallback-UI
`XidLoaded`	`XidLoadedProps`	Rendert Kindelemente nach Abschluss der SDK-Hydration (isLoaded true)
`XidLoading`	`XidLoadingProps`	Rendert Kindelemente während das SDK noch lädt (isLoaded false)
`XidFailed`	`XidFailedProps`	Rendert Kindelemente wenn das SDK-Laden mit einem nicht behebbaren Fehler scheitert (Status error)
`XidDegraded`	`XidDegradedProps`	Rendert Kindelemente wenn das SDK geladen, aber im beeinträchtigten Zustand ist (Status degraded)
`AuthenticateWithRedirectCallback`	`AuthenticateWithRedirectCallbackProps`	OAuth-Redirect-Callback-Handler: laedt den Sitzungsstatus neu und leitet zu afterSignInUrl weiter oder ruft onSuccess auf
`RedirectToSignIn`	`RedirectToSignInProps`	Wird eingebunden und leitet sofort zur Anmeldeseite weiter
`RedirectToSignUp`	`RedirectToSignUpProps`	Wird eingebunden und leitet sofort zur Registrierungsseite weiter
`RedirectToUserProfile`	`RedirectToUserProfileProps`	Wird eingebunden und leitet sofort zur Benutzerprofil-Seite weiter
`RedirectToOrganizationProfile`	`RedirectToOrganizationProfileProps`	Wird eingebunden und leitet sofort zur Organisationsprofil-Seite weiter
`RedirectToCreateOrganization`	`RedirectToCreateOrganizationProps`	Wird eingebunden und leitet sofort zur Seite zum Erstellen einer Organisation weiter
`SignInButton`	`SignInButtonProps`	Ungestaltete Schaltfläche, die beim Klicken zur Anmelde-URL navigiert
`SignUpButton`	`SignUpButtonProps`	Ungestaltete Schaltfläche, die beim Klicken zur Registrierungs-URL navigiert
`SignOutButton`	`SignOutButtonProps`	Ungestaltete Schaltfläche, die beim Klicken signOut aufruft

UI-Komponenten

Komponente	Verwenden
`SignIn`	Eingebettetes Anmeldefenster (Hosted Auth)
`SignUp`	Eingebettetes Registrierungsfenster
`UserAvatar`	Benutzeravatar-Bild mit Initialen als Fallback
`UserButton`	Avatar-Menü mit Sitzungswechsel und Abmelden
`UserProfile`	Kontosicherheit und Profilverwaltung
`OrganizationSwitcher`	Aktive Organisationsauswahl
`OrganizationProfile`	Mitglieder, Rollen, SSO-Admin-Einbettung
`CreateOrganization`	Ablauf zur Organisationserstellung
`OrganizationList`	Liste der Benutzerorganisationen für die Umschalter-UI

Noch nicht implementiert

Folgende Funktionen stehen auf der öffentlichen Roadmap, werden jedoch nicht vom aktuellen Paket exportiert. Gehen Sie nicht davon aus, dass sie in dieser Version verfügbar sind.

Symbol	Designzusage
`GoogleOneTap`	Ein-Tippen-Anmeldung einbetten
`Waitlist`	Wartelisten-Registrierungs-Gate-Komponente
Abrechnungskomponenten	Nutzungs- und Planverwaltungs-Einbettungen
`useReverification`	Hook für Step-up-Authentifizierung

Erscheinungsbild

Übergeben Sie appearance an XidProvider, um CSS-Variablen für White-Label-Einbettungen zu überschreiben. Alle benutzersichtbaren Zeichenketten verwenden Lingui-Laufzeitdeskriptoren; die Typen Appearance, AppearanceVariables und AppearanceElements werden für typisierte Überschreibungen exportiert.