Skip to main content
The LoginId class implements the login-id screen functionality. This screen collects the user’s identifier and password. Depending on your tenant, this identifer can be an email, phone number, or username.

​
Constructors

Create an instance of LoginId screen manager
Example
import LoginId from "@auth0/auth0-acul-js/login-id";
const loginIdManager = new LoginId();
loginIdManager.getLoginIdentifiers();

​
Properties

​
branding
Provides branding-related configurations, such as branding theme and settings.
​
client
Provides client-related configurations, such as id, name, and logoUrl, for the login-id screen.
​
organization
Provides information about the user’s organization, such as organization id and name.
​
prompt
Contains data about the current prompt in the authentication flow.
​
screen
Contains details specific to the login-id screen, including its configuration and context.
​
tenant
Contains data related to the tenant, such as id and associated metadata.
​
transaction
Provides transaction-specific data for the login-id screen, such as active identifiers and flow states.
​
untrustedData
Handles untrusted data passed to the SDK, such as user input during login.
​
user
Details of the active user, including username, email, and roles.

​
Methods

​
federatedLogin
(options ?)
This method redirects the user to the social or enterprise identity provider (Idp) for authentiction.
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,
});
Method Parameters
​
login
(options ?)
This method prompts the user to provide their username.
Example
import LoginId from "@auth0/auth0-acul-js/login-id";

const loginIdManager = new LoginId();

loginIdManager.login({
  username: <usernameFieldValue>
});
Method Parameters
​
passkeyLogin
(options ?)
This method authenticates the user using the provided passkey and, if succesful, redirects them to the redirect_url.
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();
Method Parameters
​
pickCountryCode
(options ?)
This method redirects the user to the country code selection list, where they can update the country code prefix for their phone numnber.
Example
import LoginId from "@auth0/auth0-acul-js/login-id";
const loginIdManager = new LoginId();

loginIdManager.pickCountryCode();
Method Parameters
​
registerPasskeyAutofill
(inputId?: string)
This method 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.
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);
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.
Method Parameters 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.
​
getErrors
This method retrieves the array of transaction errors from the context, or an empty array if none exist.
​
getLoginIdentifiers
This method gets the active identifier types for the login screen.
Example
import LoginId from "@auth0/auth0-acul-js/login";
const loginIdManager = new LoginId();
loginIdManager.getLoginIdentifiers();