LoginId

Example

import LoginId from "@auth0/auth0-acul-js/login";
const loginIdManager = new LoginId();
loginIdManager.getLoginIdentifiers();

Constructors

LoginId · Constructor

Creates an instance of LoginIdManager.

Properties

branding

client

organization

prompt

screen

tenant

transaction

untrustedData

user

screenIdentifier · string

Methods

federatedLogin · Promise<void>

Example

import LoginId from "@auth0/auth0-acul-js/login-id";
const loginIdManager = new LoginId();

// Check if alternateConnections is available and has at least one item
if (!loginIdManager.transaction.alternateConnections) {
  console.error('No alternate connections available.');
}

// Select the first available connection (users can select any available connection)
const selectedConnection = alternateConnections[0];

// Log the chosen connection for debugging or informational purposes
console.log(`Selected connection: ${selectedConnection.name}`);

// Proceed with federated login using the selected connection
loginIdManager.federatedLogin({
  connection: selectedConnection.name,
});

Show Parameters

payload

Properties

connection · string

getErrors

Retrieves the array of transaction errors from the context, or an empty array if none exist.

getLoginIdentifiers

Utility Feature

Gets the active identifier types for the login screen

Example

import LoginId from "@auth0/auth0-acul-js/login";
const loginIdManager = new LoginId();
loginIdManager.getLoginIdentifiers();

login · Promise<void>

Example

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

const loginIdManager = new LoginId();

loginIdManager.login({
  username: <usernameFieldValue>
});

Show Parameters

payload

Properties

captcha? · string

username · string

passkeyLogin · Promise<void>

Example

import LoginId from "@auth0/auth0-acul-js/login-id";
const loginIdManager = new LoginId();

// It internally maps users available passkey config provided from auth0 server
loginIdManager.passkeyLogin();

Show Parameters

payload?

pickCountryCode · Promise<void>

Example

import LoginId from "@auth0/auth0-acul-js/login-id";
const loginIdManager = new LoginId();

loginIdManager.pickCountryCode();

Show Parameters

payload?

Passkeys

registerPasskeyAutofill · Promise<void>

Utility Feature

Registers the browser’s Conditional UI for passkeys (autocomplete experience).

This method 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.

Call this once when the login screen is initialized (for example, on page load). After registration, focusing the username input will automatically display matching passkeys as suggestions. Selecting a passkey completes authentication without requiring additional user interaction.

Input configuration

If an inputId is provided, the SDK will:

• Validate that the element exists and is an <input>.
• Overwrite its autocomplete attribute with "webauthn username".

This ensures full compatibility with the Conditional Mediation API.

If you do not provide an inputId, you are responsible for configuring the input element manually with the correct attributes:

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

---

Gotchas

• The autocomplete attribute must exactly contain "webauthn username". 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.

Parameters

inputId? · string

string

Optional ID of the username <input> element (without #). Example: "username". If omitted, the developer must manually ensure the correct autocomplete attributes.

Example

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

// Example: initializing passkey autocomplete inside an async setup block.
async function initializeLogin() {
  const loginId = new LoginId();
  // Make sure associated HTML input exists:
  // <input id="username" autocomplete="webauthn username" />
  // Conditional UI registration.
  await loginId.registerPasskeyAutofill('username');
}

initializeLogin().catch(console.error);

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.