SDK de React

@keenauth/react le ofrece componentes incrustables de inicio de sesión, registro y cuenta, además de los hooks que los sustentan. Se apoya en el núcleo para navegador @keenauth/js, que realiza todas las llamadas de red y los procesos PKCE, DPoP y WebAuthn; los componentes nunca llaman a fetch ni a WebCrypto por sí mismos. El paquete todavía no está publicado en npm.

Para un inicio de sesión por redirección a la página de inicio de sesión alojada, no necesita este paquete: consulte la guía de inicio rápido de React, que usa @keenauth/js directamente.

Configurar el proveedor

Cree el núcleo una sola vez y páselo a KeenAuthProvider. Pase la clase de error del paquete de React al núcleo para que los componentes reconozcan los problemas del servidor:

import { KeenAuth } from "@keenauth/js";
import { KeenAuthProblemError, KeenAuthProvider, SignIn } from "@keenauth/react";

const core = new KeenAuth({
  issuer: "https://acme.eu.keenauth.app",
  clientId: "app_01j9zzzzzzzzzzzzzzzzzzzz",
  redirectUri: "https://login.acme.example/callback",
  createProblemError: (problem) => new KeenAuthProblemError(problem),
});

export function App() {
  return (
    <KeenAuthProvider core={core} locale="en">
      <SignIn transaction={{ client_id: "app_01j9zzzzzzzzzzzzzzzzzzzz", redirect_uri: "https://login.acme.example/callback" }} />
    </KeenAuthProvider>
  );
}

KeenAuthProvider acepta:

Propiedad	Significado
`core`	El cliente `@keenauth/js` (cualquier objeto que implemente el contrato `KeenAuthCore`)
`locale`	Idioma de la interfaz (BCP 47); por defecto `en`
`appearance`	Personalizaciones opcionales del tema, véase Apariencia

Los componentes llaman a la API de frontend (/fapi/v1) con las cookies de su entorno y una cabecera CSRF. El servidor acepta estas llamadas únicamente desde el propio origen de inicio de sesión del entorno y solo para aplicaciones de primera parte.

Componentes

Componente	Qué hace
`SignIn`	Inicio de sesión que pide primero el identificador: contraseña, clave de acceso, código por correo electrónico o enlace mágico, y segundos factores
`SignUp`	Registro con la configuración de registro del entorno
`UserProfile`	El perfil del usuario con sesión iniciada, sus correos electrónicos (con verificación por código), claves de acceso y sesiones

SignIn y SignUp aceptan transaction, el cuerpo que inicia una transacción de inicio de sesión:

en el flujo de redirección, { authorization_request: "azr_…" } de la solicitud de autorización;
sin redirección, { client_id, redirect_uri } con una URI de redirección registrada.

onComplete se invoca cuando el núcleo ha terminado la transacción en la página; en el flujo de redirección, la página navega a otro lugar en su lugar. Un paso que los componentes no muestran (por ejemplo, un desafío o la elección de una organización) se convierte en un enlace para continuar en la página de inicio de sesión alojada.

UserProfile acepta sections, un subconjunto de profile, emails, passkeys y sessions (las cuatro por defecto). Si una modificación del perfil entra en conflicto con un cambio realizado en otro lugar, se muestra un error y se recargan los valores actuales.

Hooks

Hook	Devuelve
`useKeenAuth()`	El valor del proveedor: `core`, `locale`, `appearance`
`useEnvironment()`	La configuración de inicio de sesión del entorno y una función de búsqueda de textos `t` para el idioma activo
`useTransaction()`	Una máquina de estados de transacciones sobre la API `transactions` del núcleo
`useMe()`	El perfil del usuario con sesión iniciada y la API de cuenta

Apariencia

appearance.variables sobrescribe los tokens del tema (por ejemplo, color.primary); se escriben como propiedades personalizadas --idp-* en el elemento raíz del componente mediante CSSOM, de modo que funciona una Content Security Policy estricta sin estilos 'unsafe-inline'. appearance.elements añade sus nombres de clase a los elementos de los componentes. El paquete no incluye hoja de estilos: dé estilo a las clases idp-* en su propio CSS.

<KeenAuthProvider core={core} appearance={{ variables: { "color.primary": "#1f6feb" }, elements: { buttonPrimary: "acme-button" } }}>

Idiomas y accesibilidad

Los componentes incluyen textos en inglés, turco, francés, alemán, coreano, japonés, italiano y español. Las personalizaciones de textos de su entorno tienen prioridad; otro idioma recurre al inglés, con la dirección de texto de ese idioma.
Cada campo tiene una etiqueta, el resumen de errores recibe el foco, se establecen los valores de autocomplete y nunca se bloquea el pegado.

Claves de acceso

El botón de clave de acceso aparece cuando el ID de la parte que confía (relying party) de la clave de acceso cubre el host de la página (o el origen de la página es un origen relacionado del entorno); en caso contrario, el componente enlaza a la página de inicio de sesión alojada. Las claves de acceso requieren un contexto seguro (https o localhost).

Límites actuales

Los botones de inicio de sesión con redes sociales todavía no se muestran; un entorno que ofrezca inicio de sesión social recibe un enlace a la página de inicio de sesión alojada.
Los números de teléfono todavía no están disponibles: UserProfile no tiene sección de teléfono.
Los componentes de organización (un selector de organización y de perfil) todavía no están disponibles.