usePasskeyAutofill

usePasskeyAutofill() · UsePasskeyAutofillResult

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

Ce hook initialise l’API Conditional Mediation du navigateur, qui fait apparaître les passkeys d’appareil enregistrées dans la liste déroulante d’autocomplete du champ username, sans nécessiter d’interaction supplémentaire de la part de l’utilisateur.

• 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

Aucun.

Valeur de retour

UsePasskeyAutofillResult

Objet contenant :

• 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

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