Function usePasskeyAutofill

React hook that enables browser Conditional UI (passkey autofill) for the login identifier field on the login-id screen.

Behavior

• The hook automatically initializes the browser’s Conditional Mediation API (navigator.credentials.get({ mediation: "conditional" })), allowing passkeys stored on the user’s device to appear directly in the username field’s autocomplete dropdown.
• It fails silently on unsupported browsers and never blocks user input.
• The registration is performed once per page lifecycle.

Using the returned ref

The returned inputRef is optional.

• If you bind it to your <input> element, the SDK will ensure the element’s autocomplete attribute is correctly set to "username webauthn".
• If your input element already has autocomplete="username webauthn" declared in markup, you can skip binding the ref entirely, the hook will still register Conditional Mediation correctly. See UsePasskeyAutofillResult

Example

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

export function LoginForm() {
  // Option 1: bind the ref for automatic attribute handling
  const { inputRef } = usePasskeyAutofill();

  return (
    <input
      ref={inputRef}
      id="username"
      placeholder="Username"
      autoComplete="username webauthn"
    />
  );
}

// Option 2: works equally well without using the ref
export function LoginFormWithoutRef() {
  usePasskeyAutofill(); // just call the hook once

  return (
    <input
      id="username"
      placeholder="Username"
      autoComplete="username webauthn"
    />
  );
}
Copy