Skip to main content
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,
});
​
getErrors
Retrieves the array of transaction errors from the context, or an empty array if none exist.
​
getLoginIdentifiers
Utility FeatureGets 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>
});
​
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();
​
pickCountryCode
Promise<void>
Example
import LoginId from "@auth0/auth0-acul-js/login-id";
const loginIdManager = new LoginId();

loginIdManager.pickCountryCode();

​
Passkeys

​
registerPasskeyAutofill
Promise<void>
Utility FeatureRegisters 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
stringOptional 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.