---
title: "@xid-kit/react"
description: "React 19 Provider, Hooks, Steuerungskomponenten und Hosted UI-Bausteine für Kundenanwendungen."
locale: "de"
---

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

# @xid-kit/react

## Anbieter-Einrichtung

```tsx
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.

Source: https://xid.dev/de/sdks/react/index.mdx