usePasskeyAutofill

usePasskeyAutofill() · UsePasskeyAutofillResult

Hook React qui active la fonctionnalité d’UI conditionnelle du navigateur (remplissage automatique par clé d’accès) pour les champs d’identifiant de connexion sur les écrans ACUL (Auth0 Advanced Customization of Universal Login).

Ce hook initialise l’API Conditional Mediation du navigateur, qui affiche les clés d’accès stockées sur l’appareil dans la liste déroulante d’autocomplétion du champ de nom d’utilisateur, sans nécessiter d’interaction supplémentaire de l’utilisateur.

• Le hook s’enregistre une seule fois par cycle de vie de la page — vous pouvez l’appeler plusieurs fois sans risque.
• Se dégrade de façon transparente dans les navigateurs non pris en charge, sans bloquer l’interaction de l’utilisateur.
• L’association de inputRef retourné à un champ de saisie garantit que le bon attribut autocomplete="username webauthn" est appliqué automatiquement.
• Si votre champ de saisie déclare déjà autocomplete="username webauthn" dans le balisage, l’association de la ref est facultative — le hook s’enregistre quand même correctement.

Fonctionnalités clés

• Conditional Mediation automatique — initialise le remplissage automatique par clé d’accès sans appel manuel à l’API du navigateur.
• Conception avec ref facultative — fonctionne avec ou sans association de inputRef au champ de saisie.
• Repli sans friction — les environnements non pris en charge sont gérés silencieusement, ce qui préserve le flux de connexion normal.

Paramètres

Aucun.

Valeur de retour

UsePasskeyAutofillResult

Objet contenant :

• inputRef (facultatif) — une ref React à attacher au champ de saisie du nom d’utilisateur. Garantit que le bon attribut autocomplete est défini lorsqu’elle est associée.

Écrans pris en charge

• login-id

Example

import { usePasskeyAutofill } from '@auth0/auth0-acul-react/login-id';

export function LoginIdentifierInput() {
  const { inputRef } = usePasskeyAutofill();

  return (
    <input
      ref={inputRef}
      type="text"
      name="username"
      placeholder="Email or username"
    />
  );
}

Remarques

• Si inputRef n’est pas associé à un champ de saisie, assurez-vous que celui-ci déclare explicitement autocomplete="username webauthn" afin que le navigateur puisse l’associer au remplissage automatique par clé d’accès.
• Le hook n’a aucun effet dans les environnements où l’API Conditional Mediation n’est pas disponible (par ex. les anciens navigateurs ou les contextes non HTTPS) — aucune erreur n’est générée.
• Appelez usePasskeyAutofill une seule fois au niveau supérieur de votre composant; ne l’appelez pas conditionnellement ni à l’intérieur des gestionnaires d’événements.