registerPasskeyAutofill

registerPasskeyAutofill(inputId?: string): Promise<void>

Initializes a passive WebAuthn credential request using navigator.credentials.get() with mediation: "conditional". When supported, this allows the browser to display stored passkeys directly within the username field’s autocomplete dropdown. Selecting a passkey completes authentication without requiring additional user interaction.

Call this once when the login screen is initialized (for example, on page load). If Conditional Mediation is not supported by the browser, the method safely no-ops.

Parameters

inputId? · string

The ID of the username <input> element (without #). Example: "username". When provided, the SDK validates the element exists, confirms it is an <input>, and overwrites its autocomplete attribute to "username webauthn".

If omitted, you must configure the input element manually:

<input id="username" autocomplete="username webauthn" />

Returns

Promise<void>

Resolves when the Conditional UI registration completes.

Example

import LoginId from '@auth0/auth0-acul-js/login-id';

async function initializeLogin() {
  const loginId = new LoginId();
  // Make sure the associated HTML input exists:
  // <input id="username" autocomplete="username webauthn" />
  await loginId.registerPasskeyAutofill('username');
}

initializeLogin().catch(console.error);

Gotchas

• The autocomplete attribute must exactly contain "username webauthn". Including unrelated tokens such as "email" or "text" will prevent browsers from showing the passkey dropdown.
• Overwriting the attribute is intentional and required for consistent behavior across browsers. Do not rely on merging or extending existing autocomplete values.
• If Conditional Mediation is not supported by the browser, the SDK will safely no-op.

Remarks

This method delegates to the internal registerPasskeyAutofill() utility, returning a background AbortController to manage request lifetime. It should only be invoked once per page lifecycle.