usePasskeyAutofill

• Le hook s’enregistre une seule fois par cycle de vie de la page — l’appeler plusieurs fois est sans danger.
• Se dégrade harmonieusement sur les navigateurs non pris en charge sans bloquer l’interaction utilisateur.
• L’association du 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.

​

Principales fonctionnalités

• Conditional Mediation automatique — initialise le remplissage automatique par passkey sans aucun appel manuel à l’API du navigateur.
• Conception avec ref facultative — fonctionne avec ou sans association de inputRef au champ de saisie.
• Solution de secours sans friction — les environnements non pris en charge sont gérés silencieusement, ce qui préserve le login flow normal.

​

Paramètres

​

Valeur de retour

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

​

Écrans pris en charge

• login-id

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 passkey.
• 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 fois au niveau supérieur de votre composant; ne l’appelez pas conditionnellement ni dans des handlers d’événement.