Class LoginId

constructor

• new LoginId(): LoginId

  Creates an instance of LoginIdManager.

  Returns LoginId

screen

transaction

StaticscreenIdentifier

federatedLogin

• federatedLogin(payload: Screens.FederatedLoginOptions): Promise<void>

  Parameters

  • payload: Screens.FederatedLoginOptions

  Returns 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,
  });
  Copy

getLoginIdentifiers

• getLoginIdentifiers(): Screens.ScreenIdentifierType[] | null
  Utility Feature

  Gets the active identifier types for the login screen

  Returns Screens.ScreenIdentifierType[] | null

  An array of active identifier types or null if none are active

  Example

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

login

• login(payload: Screens.LoginOptions): Promise<void>

  Parameters

  • payload: Screens.LoginOptions

  Returns Promise<void>

  Example

  import LoginId from "@auth0/auth0-acul-js/login-id";
  
  const loginIdManager = new LoginId();
  
  loginIdManager.login({
    username: <usernameFieldValue>
  });
  Copy

passkeyLogin

• passkeyLogin(payload?: Screens.CustomOptions): Promise<void>

  Parameters

  • Optionalpayload: Screens.CustomOptions

  Returns 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();
  Copy

pickCountryCode

• pickCountryCode(payload?: Screens.CustomOptions): Promise<void>

  Parameters

  • Optionalpayload: Screens.CustomOptions

  Returns Promise<void>

  Example

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

registerPasskeyAutofill

• registerPasskeyAutofill(inputId?: string): 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 "username webauthn".

  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="username webauthn" />
  Copy

  ---

  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.

  ---

  Parameters

  • OptionalinputId: string

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

  Returns Promise<void>

  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="username webauthn" />
    // Conditional UI registration.
    await loginId.registerPasskeyAutofill('username');
  }
  
  initializeLogin().catch(console.error);
  Copy

  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.