@xid-kit/react

React 19 provider, hooks, control components, and hosted UI building blocks for customer applications.

Provider setup

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.