Class Login

constructor

• new Login(): Login

  Creates an instance of Login screen manager

  Returns Login

screen

transaction

StaticscreenIdentifier

federatedLogin

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

  Performs login with social provider

  Parameters

  • payload: Screens.FederatedLoginPayloadOptions

    The social login options containing connection name

  Returns Promise<void>

  Example

  import Login from "@auth0/auth0-acul-js/login";
  const loginManager = new Login();
  loginManager.federatedLogin({
    connection: "google-oauth2"
  });
  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 Login from "@auth0/auth0-acul-js/login";
  const loginManager = new Login();
  loginManager.getLoginIdentifiers();
  Copy

googleOneTap

• googleOneTap(payload: Screens.GoogleOneTapOptions): Promise<void>

  Submits the Google ID token obtained from the Google Identity Services (GSI) SDK to complete authentication via Google One Tap.

  Check screen.googleOneTapConfig first — it is null when the feature is not enabled server-side, in which case this method should not be called.

  Parameters

  • payload: Screens.GoogleOneTapOptions

    one_tap_credential: the ID token returned by the GSI callback.

  Returns Promise<void>

  Remarks

  Requires the Google Identity Services (GSI) script to be loaded before calling this method. Add it to your HTML: <script src="https://accounts.google.com/gsi/client" async></script> Or inject it dynamically at runtime.

  See

  • Google Identity Services: Load the client library
  • Auth0 Google Social Connection

  Example

  import Login from "@auth0/auth0-acul-js/login";
  
  const loginManager = new Login();
  const config = loginManager.screen.googleOneTapConfig;
  
  if (config) {
    const script = document.createElement('script');
    script.src = 'https://accounts.google.com/gsi/client';
    script.async = true;
    script.defer = true;
    script.onload = () => {
      window.google?.accounts.id.initialize({
        client_id: config.client_id,
        nonce: config.nonce,
        context: config.context,
        itp_support: config.itp_support,
        auto_select: config.auto_select,
        cancel_on_tap_outside: config.cancel_on_tap_outside,
        callback: ({ credential }) => {
          loginManager.googleOneTap({ one_tap_credential: credential });
        },
      });
      window.google?.accounts.id.prompt();
    };
    document.head.appendChild(script);
  }
  Copy

login

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

  Performs login with username/password

  Parameters

  • payload: Screens.LoginPayloadOptions

    The login options containing username and password

  Returns Promise<void>

  Example

  import Login from "@auth0/auth0-acul-js/login";
  const loginManager = new Login();
  loginManager.login({
    username: "testUser",
    password: "testPassword"
  });
  Copy

  Example

  // An email read as one, rather than inferred from the value's shape. `identifierType` is
  // typically `screen.data.activeIdentifierType`.
  loginManager.login({
    identifier: "test@example.com",
    identifierType: "email",
    password: "testPassword"
  });
  Copy

  Example

  // Phone login with a country dropdown, using a code from `countryCodes.available`. Submit the
  // national number as the identifier; the dial code is prefixed server-side.
  loginManager.login({
    identifier: "2015550123",
    identifierType: "phone",
    phoneCountryCode: "US",
    password: "testPassword"
  });
  Copy

  Remarks

  Login submits a single identifier, so it stays denormalized: the value goes in identifier and identifierType names what it holds. Omitting identifierType submits the identifier on its own, exactly as before, with the server inferring the type. username is identifier's original spelling and still accepted in its place.

pickCountryCode

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

  Picks country code for phone number input

  Parameters

  • Optionalpayload: Screens.CustomOptions

    Optional custom options

  Returns Promise<void>

  Example

  import Login from "@auth0/auth0-acul-js/login";
  const loginManager = new Login();
  loginManager.pickCountryCode();
  Copy