---
title: "@xid-kit/react"
description: "React 19 provider, hooks, control components, and hosted UI building blocks for customer applications."
locale: "en"
---

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

# @xid-kit/react

## Provider setup

```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 | Returns |
| --- | --- |
| `useAuth` | isLoaded, isSignedIn, userId, signOut, getToken |
| `useUser` | isLoaded, isSignedIn, user: XidUser \| null |
| `useSession` | isLoaded, isSignedIn, session: XidSession \| null |
| `useSessionList` | isLoaded, sessions, setActive for multi-session switcher |
| `useSignIn` | Hosted Auth sign-in flow helpers |
| `useOrganization` | isLoaded, organization: XidOrganization \| null, membership |
| `useOrganizationList` | isLoaded, userMemberships for organization switcher UI |
| `useAPIKeys` | Management API key list and actions for console embeds |
| `useXidContext` | Raw XidContextValue (advanced use; prefer typed hooks above) |

## Control components

| Component | Props type | Purpose |
| --- | --- | --- |
| `SignedIn` | `SignedInProps` | Renders children only when the session is loaded and signed in |
| `SignedOut` | `SignedOutProps` | Renders children only when loaded and not signed in |
| `Protect` | `ProtectProps` | Permission and role gate with optional fallback UI |
| `XidLoaded` | `XidLoadedProps` | Renders children after SDK hydration completes (isLoaded true) |
| `XidLoading` | `XidLoadingProps` | Renders children while SDK is still loading (isLoaded false) |
| `XidFailed` | `XidFailedProps` | Renders children when SDK load fails with an unrecoverable error (status error) |
| `XidDegraded` | `XidDegradedProps` | Renders children when SDK is loaded but in degraded state (status degraded) |
| `AuthenticateWithRedirectCallback` | `AuthenticateWithRedirectCallbackProps` | OAuth redirect callback handler: reloads session state and redirects to afterSignInUrl or calls onSuccess |
| `RedirectToSignIn` | `RedirectToSignInProps` | Mounts and immediately redirects to the sign-in page |
| `RedirectToSignUp` | `RedirectToSignUpProps` | Mounts and immediately redirects to the sign-up page |
| `RedirectToUserProfile` | `RedirectToUserProfileProps` | Mounts and immediately redirects to the user profile page |
| `RedirectToOrganizationProfile` | `RedirectToOrganizationProfileProps` | Mounts and immediately redirects to the organization profile page |
| `RedirectToCreateOrganization` | `RedirectToCreateOrganizationProps` | Mounts and immediately redirects to the create organization page |
| `SignInButton` | `SignInButtonProps` | Unstyled button that navigates to the sign-in URL on click |
| `SignUpButton` | `SignUpButtonProps` | Unstyled button that navigates to the sign-up URL on click |
| `SignOutButton` | `SignOutButtonProps` | Unstyled button that calls signOut on click |

## UI components

| Component | Use |
| --- | --- |
| `SignIn` | Embedded sign-in panel (Hosted Auth) |
| `SignUp` | Embedded sign-up panel |
| `UserAvatar` | User avatar image with fallback initials |
| `UserButton` | Avatar menu with session switch and sign-out |
| `UserProfile` | Account security and profile management |
| `OrganizationSwitcher` | Active org selector |
| `OrganizationProfile` | Members, roles, SSO admin embed |
| `CreateOrganization` | Org creation flow |
| `OrganizationList` | List of user organizations for switcher UI |

## Not yet implemented

The following are on the public roadmap but are not exported from the current package. Do not assume availability in this version.

| Symbol | Design commitment |
| --- | --- |
| `GoogleOneTap` | One-tap sign-in embed |
| `Waitlist` | Waitlist sign-up gate component |
| Billing components | Usage and plan management embeds |
| `useReverification` | Step-up authentication hook |

## Appearance

Pass `appearance` to `XidProvider` to override CSS variables for white-label embeds. All user-visible strings use Lingui runtime descriptors; the `Appearance`, `AppearanceVariables`, and `AppearanceElements` types are exported for typed overrides.

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