usePasskeyAutofill

usePasskeyAutofill() · UsePasskeyAutofillResult

Hook de React que habilita la funcionalidad de UI condicional del navegador (autocompletado con passkeys) para los campos de identificador de inicio de sesión en las pantallas de ACUL (Advanced Customization of Universal Login) de Auth0.

Este hook inicializa la API de mediación condicional del navegador, que muestra las passkeys almacenadas en el dispositivo en el menú desplegable de autocompletado del campo username, sin necesidad de interacción adicional del usuario.

• El hook se registra una vez por ciclo de vida de la página — es seguro llamarlo varias veces.
• Ofrece degradación progresiva en navegadores no compatibles sin bloquear la interacción del usuario.
• Asociar el inputRef devuelto a un elemento input garantiza que el atributo autocomplete="username webauthn" correcto se aplique automáticamente.
• Si tu input ya declara autocomplete="username webauthn" en el marcado, asociar la ref es opcional — el hook sigue registrándose correctamente.

Características clave

• Mediación condicional automática — inicializa el autocompletado con passkeys sin llamadas manuales a la API del navegador.
• Diseño con ref opcional — funciona tanto si inputRef se asocia al elemento input como si no.
• Respaldo sin fricción — los entornos no compatibles se gestionan de forma silenciosa, lo que preserva el flujo normal de inicio de sesión.

Parámetros

Ninguno.

Devuelve

UsePasskeyAutofillResult

Objeto que contiene:

• inputRef (opcional) — una ref de React para asociarla al elemento input de username. Garantiza que el atributo autocomplete correcto se establezca cuando se vincula.

Pantallas compatibles

• login-id

Ejemplo

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"
    />
  );
}

Observaciones

• Si inputRef no está vinculado a un input, asegúrate de que el elemento input declare explícitamente autocomplete="username webauthn" para que el navegador pueda asociarlo con el autocompletado con passkeys.
• El hook no tiene efecto en entornos donde la API de mediación condicional no está disponible (por ejemplo, navegadores antiguos o contextos sin HTTPS) — no se generan errores.
• Llama a usePasskeyAutofill una vez en el nivel superior de tu componente; no lo llames de forma condicional ni dentro de controladores de eventos.