usePasskeyAutofill

• The hook registers once per page lifecycle — calling it multiple times is safe.
• Gracefully degrades on unsupported browsers without blocking user interaction.
• Binding the returned inputRef to an input element ensures the correct autocomplete="username webauthn" attribute is applied automatically.
• If your input already declares autocomplete="username webauthn" in markup, binding the ref is optional — the hook still registers correctly.

​

Key Features

• Automatic Conditional Mediation — initializes passkey autofill without any manual browser API calls.
• Ref-optional design — works with or without binding inputRef to the input element.
• Zero-friction fallback — unsupported environments are handled silently, preserving normal login flow.

​

Parameters

​

Returns

• inputRef (optional) — a React ref to attach to the username input element. Ensures the correct autocomplete attribute is set when bound.

​

Supported Screens

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

​

Remarks

• If inputRef is not bound to an input, ensure the input element explicitly declares autocomplete="username webauthn" so the browser can associate it with passkey autofill.
• The hook has no effect in environments where the Conditional Mediation API is unavailable (e.g. older browsers or non-HTTPS contexts) — no errors are thrown.
• Call usePasskeyAutofill once at the top level of your component; do not call it conditionally or inside event handlers.