# 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`](/docs/sdk/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](/docs/quickstarts/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 :

```tsx
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](#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 :

- dans le flux par redirection, `{ authorization_request: "azr_…" }` issu de la demande d'autorisation ;
- sans redirection, `{ client_id, redirect_uri }` avec une URI de redirection enregistrée.

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

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

## Langues et accessibilité

- Les composants incluent des textes en anglais, turc, français, allemand, coréen, japonais, italien et espagnol. Les surcharges de textes de votre environnement sont prioritaires ; une autre langue revient à l'anglais, avec le sens d'écriture de cette langue.
- Chaque champ a un libellé, le résumé des erreurs reçoit le focus, les valeurs `autocomplete` sont définies et le collage n'est jamais bloqué.

## 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

- Les boutons de connexion sociale ne sont pas encore affichés ; un environnement qui propose la connexion sociale affiche un lien vers la page de connexion hébergée.
- Les numéros de téléphone ne sont pas encore disponibles : `UserProfile` ne comporte pas de section téléphone.
- Les composants d'organisation (sélecteur et profil d'organisation) ne sont pas encore disponibles.