---
title: "@xid-kit/react"
description: "Provider, hooks, componentes de control y bloques de interfaz alojada de React 19 para aplicaciones de clientes."
locale: "es"
---

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

# @xid-kit/react

## Configuración del proveedor

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

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