SDK React

@keenauth/react fournit des composants intégrables de connexion, d'inscription et de gestion de compte, ainsi que les hooks qui les sous-tendent. Il s'appuie sur le cœur navigateur @keenauth/js, qui effectue tous les appels réseau, PKCE, DPoP et les cérémonies WebAuthn ; les composants n'appellent jamais fetch ni WebCrypto directement. Le package n'est pas encore publié sur npm.

Pour une connexion par redirection vers la page de connexion hébergée, ce package n'est pas nécessaire : consultez le démarrage rapide React, qui utilise directement @keenauth/js.

Configurer le fournisseur

Créez le cœur une seule fois et transmettez-le à KeenAuthProvider. Transmettez la classe d'erreur du package React au cœur, afin que les composants reconnaissent les problèmes côté serveur :

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 accepte les propriétés suivantes :

Propriété Signification
core Le client @keenauth/js (tout objet qui implémente le contrat KeenAuthCore)
locale Langue de l'interface (BCP 47) ; valeur par défaut en
appearance Surcharges facultatives du thème, voir Apparence

Les composants appellent l'API frontale (/fapi/v1) avec les cookies de votre environnement et un en-tête CSRF. Le serveur n'accepte ces appels que depuis l'origine de connexion de l'environnement lui-même, et uniquement pour les applications de première partie.

Composants

Composant Fonction
SignIn Connexion qui commence par l'identifiant : mot de passe, clé d'accès, code par e-mail ou lien magique, et deuxièmes facteurs
SignUp Inscription selon les paramètres d'enregistrement de l'environnement
UserProfile Le profil de l'utilisateur connecté, ses adresses e-mail (avec vérification par code), ses clés d'accès et ses sessions

SignIn et SignUp acceptent transaction, le corps qui démarre une transaction de connexion :

onComplete est appelée lorsque le cœur a terminé la transaction dans la page ; dans le flux par redirection, la page quitte à la place. Une étape que les composants ne dessinent pas (par exemple un défi ou un choix d'organisation) devient un lien permettant de continuer sur la page de connexion hébergée.

UserProfile accepte sections, un sous-ensemble de profile, emails, passkeys et sessions (les quatre par défaut). Une écriture du profil qui entre en conflit avec une modification effectuée ailleurs affiche une erreur et recharge les valeurs actuelles.

Hooks

Hook Renvoie
useKeenAuth() La valeur du fournisseur : core, locale, appearance
useEnvironment() Les paramètres de connexion de l'environnement et une fonction de recherche de textes t pour la langue active
useTransaction() Une machine à états de transaction au-dessus de l'API transactions du cœur
useMe() Le profil de l'utilisateur connecté et l'API de compte

Apparence

appearance.variables surcharge les jetons de thème (par exemple color.primary) ; ils sont écrits sous forme de propriétés personnalisées --idp-* sur la racine du composant via le CSSOM, de sorte qu'une Content Security Policy stricte sans styles 'unsafe-inline' fonctionne. appearance.elements ajoute vos noms de classes aux éléments des composants. Le package ne fournit aucune feuille de style : mettez en forme les classes idp-* dans votre propre CSS.

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

Langues et accessibilité

Clés d'accès

Le bouton de clé d'accès apparaît lorsque l'ID de partie utive (relying party) de la clé d'accès couvre l'hôte de la page (ou si l'origine de la page est une origine liée de l'environnement) ; sinon, le composant renvoie vers la page de connexion hébergée. Les clés d'accès nécessitent un contexte sécurisé (https ou localhost).

Limites actuelles