@xid-kit/react

Provider, hooks, componentes de control y bloques de interfaz alojada de React 19 para aplicaciones de clientes.

Configuración del proveedor

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	Devuelve
`useAuth`	isLoaded, isSignedIn, userId, signOut, getToken
`useUser`	isLoaded, isSignedIn, user: XidUser \| null
`useSession`	isLoaded, isSignedIn, session: XidSession \| null
`useSessionList`	isLoaded, sessions, setActive para selector de sesión múltiple
`useSignIn`	Utilidades para el flujo de inicio de sesión de Hosted Auth
`useOrganization`	isLoaded, organization: XidOrganization \| null, membership
`useOrganizationList`	isLoaded, userMemberships para la interfaz del selector de organización
`useAPIKeys`	Lista de claves de la API de administración y acciones para embeds de consola
`useXidContext`	XidContextValue bruto (uso avanzado; prefiere los hooks tipados anteriores)

Componentes de control

Componente	Tipo Props	Propósito
`SignedIn`	`SignedInProps`	Renderiza hijos solo cuando la sesión está cargada e iniciada
`SignedOut`	`SignedOutProps`	Renderiza hijos solo cuando está cargado y no hay sesión iniciada
`Protect`	`ProtectProps`	Control de permiso y rol con interfaz de respaldo opcional
`XidLoaded`	`XidLoadedProps`	Renderiza hijos cuando la hidratación del SDK se completa (isLoaded true)
`XidLoading`	`XidLoadingProps`	Renderiza hijos mientras el SDK aún está cargando (isLoaded false)
`XidFailed`	`XidFailedProps`	Renderiza hijos cuando la carga del SDK falla con un error irrecuperable (status error)
`XidDegraded`	`XidDegradedProps`	Renderiza hijos cuando el SDK está cargado pero en estado degradado (status degraded)
`AuthenticateWithRedirectCallback`	`AuthenticateWithRedirectCallbackProps`	Manejador de callback de redirección OAuth: recarga el estado de sesión y redirige a afterSignInUrl o llama a onSuccess
`RedirectToSignIn`	`RedirectToSignInProps`	Se monta y redirige inmediatamente a la página de inicio de sesión
`RedirectToSignUp`	`RedirectToSignUpProps`	Se monta y redirige inmediatamente a la página de registro
`RedirectToUserProfile`	`RedirectToUserProfileProps`	Se monta y redirige inmediatamente a la página de perfil de usuario
`RedirectToOrganizationProfile`	`RedirectToOrganizationProfileProps`	Se monta y redirige inmediatamente a la página de perfil de organización
`RedirectToCreateOrganization`	`RedirectToCreateOrganizationProps`	Se monta y redirige inmediatamente a la página de creación de organización
`SignInButton`	`SignInButtonProps`	Botón sin estilo que navega a la URL de inicio de sesión al hacer clic
`SignUpButton`	`SignUpButtonProps`	Botón sin estilo que navega a la URL de registro al hacer clic
`SignOutButton`	`SignOutButtonProps`	Botón sin estilo que llama a signOut al hacer clic

Componentes de interfaz

Componente	Uso previsto
`SignIn`	Panel de inicio de sesión embebido (Hosted Auth)
`SignUp`	Panel de registro embebido
`UserAvatar`	Imagen de avatar de usuario con iniciales como alternativa
`UserButton`	Menú de avatar con cambio de sesión y cierre de sesión
`UserProfile`	Seguridad de la cuenta y gestión del perfil
`OrganizationSwitcher`	Selector de organización activa
`OrganizationProfile`	Miembros, roles, embed de administración SSO
`CreateOrganization`	Flujo de creación de organización
`OrganizationList`	Lista de organizaciones del usuario para la interfaz del selector

Aún no implementado

Los siguientes están en la hoja de ruta pública pero no se exportan desde el paquete actual. No asumas su disponibilidad en esta versión.

Símbolo	Compromiso de diseño
`GoogleOneTap`	Embed de inicio de sesión con un toque
`Waitlist`	Componente de barrera de registro en lista de espera
Componentes de facturación	Embeds de gestión de uso y plan
`useReverification`	Hook de autenticación escalonada

Apariencia

Pasa appearance a XidProvider para anular variables CSS en embeds de marca blanca. Todas las cadenas visibles para el usuario usan descriptores de tiempo de ejecución de Lingui; los tipos Appearance, AppearanceVariables y AppearanceElements se exportan para anulaciones tipadas.