> ## Documentation Index
> Fetch the complete documentation index at: https://auth0-actions-triggers-prototype.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# usePasskeyAutofill

<ParamField body="usePasskeyAutofill()" type={<span><a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/UsePasskeyAutofillResult">UsePasskeyAutofillResult</a></span>}>
  React hook that enables browser Conditional UI (passkey autofill) functionality for login
  identifier fields on Auth0 Advanced Customization of Universal Login (ACUL) screens.

  This hook initializes the browser's Conditional Mediation API, which surfaces stored
  device passkeys in the username field's autocomplete dropdown without requiring
  additional user interaction.

  * 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

  None.

  ## Returns

  [`UsePasskeyAutofillResult`](/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/UsePasskeyAutofillResult)

  Object containing:

  * `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`

  ```tsx Example theme={null}
  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.
</ParamField>