Login screen classes

The Login screen class is part of the Identifier First Authentication flow and collects the user’s identifier and password. Depending on your tenant setup, this identifier can be an email, phone number, or username.

Import and instantiate the Login screen class:

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

// SDK Properties return a string, number or boolean
// ex. "login-id"
loginManager.screen.name;

// SDK Methods return an object or array
// ex. { signup: "/signup_url", reset_password: "/reset_password_url"} 
loginManager.screenLinks();

Properties

The Login screen class properties are:

interface branding {
  settings: null | BrandingSettings;
  themes: null | BrandingThemes;
}

interface BrandingSettings {
  colors?: {
    pageBackground?: string | {
      angleDeg: number;
      end: string;
      start: string;
      type: string;
    };
    primary?: string;
  };
  faviconUrl?: string;
  font?: {url: string;};
  logoUrl?: string;
}

interface BrandingThemes {
  default: {
    borders: Record<string, string | number | boolean>;
    colors: Record<string, string>;
    displayName: string;
    fonts: Record<string, string | boolean | object>;
    pageBackground: Record<string, string>;
    widget: Record<string, string | number>;
  };
}

Methods

The Login screen class methods are: This method authenticates the user based on the identifier and provided password. Depending on the server configuration, this could be an email, username, or phone number. Review Flexible Identifiers for more details.

loginManager.login({
  username: "testUser",
  password: "testPassword"
});

Parameter	Type	Required	Description
`username`	string	Yes	The user’s identifier.
`password`	string	Yes	The user’s password.
`captcha`	string	Conditionally	The captcha code or response from the captcha provider. This property is required if your Auth0 tenant has Bot Detection enabled.
`[key: string]`	string \| number \| boolean \| undefined	No	Additional data collected from the user. This data is accessible in the `post-login` Action trigger.

federatedLogin( options? )

This method redirects the user to the social or enterprise (IdP) for authentication. Review Social Identity Providers and Enterprise Identity Providers for details.

import Login from "@auth0/auth0-acul-js/login";
const loginManager = new Login();
loginManager.federatedLogin({
  connection: "google-oauth2"
});

Parameter	Type	Required	Description
`connection`	string	Yes	The identifier for the connection.
`[key: string]`	string \| number \| boolean \| undefined	No	Additional data collected from the user. This data is accessible in the `post-login` Action trigger.

The Login Email Verification screen class provides methods associated with the login-email-verification screen.

Import and instantiate the Login Email Verification screen class:

import LoginEmailVerification from '@auth0/auth0-acul-js/login-email-verification';

// Instantiate the manager for the login email verification screen
const loginEmailVerificationManager = new LoginEmailVerification();

// Accessing screen-specific texts (e.g., for titles, labels, button texts)
const screenTexts = loginEmailVerificationManager.screen.texts;
const pageTitle = screenTexts?.title || 'Verify Your Email';
const codePlaceholder = screenTexts?.codePlaceholder || 'Enter code here';

// Accessing transaction errors from a previous attempt
const transactionErrors = loginEmailVerificationManager.transaction.errors;
if (transactionErrors && transactionErrors.length > 0) {
  transactionErrors.forEach(error => {
    console.error(`Error Code: ${error.code}, Message: ${error.message}`);
    // Display these errors to the user appropriately.
  });
}

Properties

The Login Email Verification screen class properties are:

interface branding {
  settings: null | BrandingSettings;
  themes: null | BrandingThemes;
}

interface BrandingSettings {
  colors?: {
    pageBackground?: string | {
      angleDeg: number;
      end: string;
      start: string;
      type: string;
    };
    primary?: string;
  };
  faviconUrl?: string;
  font?: {url: string;};
  logoUrl?: string;
}

interface BrandingThemes {
  default: {
    borders: Record<string, string | number | boolean>;
    colors: Record<string, string>;
    displayName: string;
    fonts: Record<string, string | boolean | object>;
    pageBackground: Record<string, string>;
    widget: Record<string, string | number>;
  };
}

Methods

The Login Email Verification screen class methods are:

continueWithCode( options? )

This method submits the email verification code entered by the user to Auth0.

const manager = new LoginEmailVerification();
// Assuming 'userInputCode' is a string obtained from a form input
manager.continueWithCode({ code: userInputCode })
  .catch(err => {
    // Handle unexpected submission errors
    displayGlobalError("Could not submit your code. Please try again.");
  });
// After the operation, check manager.transaction.errors for validation messages.

Parameter	Type	Required	Description
`code`	string	Yes	The code entered by the user.
`[key: string]`	string \| number \| boolean \| undefined	No	Optional data collected from user.

resendCode( options? )

This method requests Auth0 to send a new verification code to the user’s email address.

const manager = new LoginEmailVerification();
manager.resendCode()
  .then(() => {
    // Inform the user that a new code has been sent.
    showNotification("A new verification code is on its way!");
  })
  .catch(err => {
    // Handle unexpected submission errors
    displayGlobalError("Could not request a new code. Please try again later.");
  });
// After the operation, check manager.transaction.errors for specific issues.

Parameter	Type	Required	Description
`[key: string]`	string \| number \| boolean \| undefined	No	Optional data collected from user.

The Login ID screen class is part of the Identifier First Authentication flow and collects the user’s identifier. Depending on your tenant setup, this identifier can be an email, phone number, or username.

Import and instantiate the Login ID screen class:

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

// SDK Properties return a string, number or boolean
// ex. "login-id"
loginIdManager.screen.name;

// SDK Methods return an object or array
// ex. { signup: "/signup_url", reset_password: "/reset_password_url"} 
loginIdManager.screenLinks();

Properties

The Login ID screen class properties are:

interface branding {
  settings: null | BrandingSettings;
  themes: null | BrandingThemes;
}

interface BrandingSettings {
  colors?: {
    pageBackground?: string | {
      angleDeg: number;
      end: string;
      start: string;
      type: string;
    };
    primary?: string;
  };
  faviconUrl?: string;
  font?: {url: string;};
  logoUrl?: string;
}

interface BrandingThemes {
  default: {
    borders: Record<string, string | number | boolean>;
    colors: Record<string, string>;
    displayName: string;
    fonts: Record<string, string | boolean | object>;
    pageBackground: Record<string, string>;
    widget: Record<string, string | number>;
  };
}

Methods

The Login ID screen class methods are: This method takes the user to the next step where they can enter their password or one-time password (OTP) code. Depending on the server configuration, this could be an email, username, or phone number. Review Flexible Identifiers for more details.

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

Parameter	Type	Required	Description
`username`	string	Yes	The user’s identifier.
`captcha`	string	Conditionally	The captcha code or response from the captcha provider. This property is required if your Auth0 tenant has Bot Detection enabled.
`[key: string]`	string \| number \| boolean \| undefined	No	Additional data collected from the user. This data is accessible in the `post-login` Action trigger.

passkeyLogin( options? )

This method authenticates the user using the provided passkey and, if successful, redirects them to the redirect_url.

// This method does not support any parameters
loginIdManager.passkeyLogin();

federatedLogin( options? )

This method redirects the user to the social or enterprise identity provider (IdP) for authentication. Review Social Identity Providers and Enterprise Identity Providers for details.

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

Parameter	Type	Required	Description
`connection`	string	Yes	The identifier for the connection.
`[key: string]`	string \| number \| boolean \| undefined	No	Additional data collected from the user. This data is accessible in the `post-login` Action trigger.

pickCountryCode( options? )

This method redirects the user to the country code selection list, where they can update the country code prefix for their phone number.

// This method does not support any parameters
loginIdManager.pickCountryCode();

The Login Password screen class is part of the Identifier First Authentication flow and collects the user’s password.

Import and instantiate the Login Password screen class

import LoginPassword from "@auth0/auth0-acul-js/login-password";
const loginPasswordManager = new LoginPassword();

// SDK Properties return a string, number or boolean
// ex. "login-password"
loginPasswordManager.screen.name;

// SDK Methods return an object or array
// ex. { signup: "/signup_url", reset_password: "/reset_password_url"} 
loginPasswordManager.screenLinks();

Properties

The Login Password screen class properties are:

interface branding {
  settings: null | BrandingSettings;
  themes: null | BrandingThemes;
}

interface BrandingSettings {
  colors?: {
    pageBackground?: string | {
      angleDeg: number;
      end: string;
      start: string;
      type: string;
    };
    primary?: string;
  };
  faviconUrl?: string;
  font?: {url: string;};
  logoUrl?: string;
}

interface BrandingThemes {
  default: {
    borders: Record<string, string | number | boolean>;
    colors: Record<string, string>;
    displayName: string;
    fonts: Record<string, string | boolean | object>;
    pageBackground: Record<string, string>;
    widget: Record<string, string | number>;
  };
}

Methods

The Login Password screen class method is: This method authenticates the user based on the identifier from the previous step and the provided password. Once authenticated, the user is directed to the next step.

loginPasswordManager.login({
  username: <usernameFieldValue>,
  password: ********
});

Parameter	Type	Required	Description
`captcha`	string	Conditionally	The captcha code or response from the captcha provider. This property is required if your Auth0 tenant has Bot Detection enabled.
`username`	string	Yes	The user’s identifier.
`password`	string	Yes	The user’s password.
`[key: string]`	string \| number \| boolean \| undefined	No	Additional data collected from the user. This data is accessible in the `post-login` Action trigger.

The Login Email Code screen class is part of the Identifier First Authentication flow. It allows the user to authenticate with a one-time password (OTP) code sent to the email provided in their previous step.

Import and instantiate the Login Passwordless Email Code screen class

import LoginPasswordlessEmailCode from '@auth0/auth0-acul-js/login-passwordless-email-code';
const loginPasswordlessEmailCodeManager = new LoginPasswordlessEmailCode();

// SDK Properties return a string, number or boolean
// ex. "login-passwordless-email-code"
loginPasswordlessEmailCodeManager.screen.name;

// SDK Methods return an object or array
// ex. { edit_identifier: "/edit_url" } 
loginPasswordlessEmailCodeManager.screenLinks();

Properties

The Login Passwordless Email Code screen class properties are:

interface branding {
  settings: null | BrandingSettings;
  themes: null | BrandingThemes;
}

interface BrandingSettings {
  colors?: {
    pageBackground?: string | {
      angleDeg: number;
      end: string;
      start: string;
      type: string;
    };
    primary?: string;
  };
  faviconUrl?: string;
  font?: {url: string;};
  logoUrl?: string;
}

interface BrandingThemes {
  default: {
    borders: Record<string, string | number | boolean>;
    colors: Record<string, string>;
    displayName: string;
    fonts: Record<string, string | boolean | object>;
    pageBackground: Record<string, string>;
    widget: Record<string, string | number>;
  };
}

Methods

The Login Passwordless Email Code screen class method are:

resendCode( options? )

This method sends a new OTP code to the email provided in the previous step.

// This method does not support any parameters
loginPasswordlessEmailCode.resendCode();

Parameter	Type	Required	Description
`[key: string]`	string \| number \| boolean \| undefined	No	Optional data collected from user.

SubmitCode( options? )

This method authenticates the user based on the provided email address and OTP code.

loginPasswordlessEmailCode.submitCode({
 email: <EmailFieldValue>;
 code: <OtpCodeFieldValue>;
});

Parameter	Type	Required	Description
`captcha`	string	Conditionally	The captcha code or response from the captcha provider. This property is required if your Auth0 tenant has Bot Detection enabled.
`code`	string number	Yes	The OTP code sent to the email.
`[key: string]`	string \| number \| boolean \| undefined	No	Additional data collected from the user. This data is accessible in the `post-login` Action trigger.

The Login Passwordless SMS OTP screen class is part of the Identifier First Authentication flow. It allows the user to authenticate with a one-time password (OTP) code sent to the phone number provided in the previous step.

Import and instantiate the Login Passwordless Email Code screen class

import LoginPasswordlessSmsOtp from '@auth0/auth0-acul-js/login-passwordless-sms-otp';
const loginPasswordlessSmsOtpManager = new LoginPasswordlessSmsOtp();

// SDK Properties return a string, number or boolean
// ex. "login-passwordless-sms-otp"
loginPasswordlessSmsOtpManager.screen.name;

// SDK Methods return an object or array
// ex. { edit_identifier: "/edit_url" } 
loginPasswordlessSmsOtpManager.screenLinks();

Properties

The Login Passwordless SMS OTP screen class properties are:

interface branding {
  settings: null | BrandingSettings;
  themes: null | BrandingThemes;
}

interface BrandingSettings {
  colors?: {
    pageBackground?: string | {
      angleDeg: number;
      end: string;
      start: string;
      type: string;
    };
    primary?: string;
  };
  faviconUrl?: string;
  font?: {url: string;};
  logoUrl?: string;
}

interface BrandingThemes {
  default: {
    borders: Record<string, string | number | boolean>;
    colors: Record<string, string>;
    displayName: string;
    fonts: Record<string, string | boolean | object>;
    pageBackground: Record<string, string>;
    widget: Record<string, string | number>;
  };
}

Methods

The Login Passwordless SMS OTP screen class method are:

resendOTP( options? )

This method sends a new OTP code to the email provided in the previous step.

// This method does not support any parameters
loginPasswordlessSmsOtpManager.resendOTP()

Parameter	Type	Required	Description
`[key: string]`	string \| number \| boolean \| undefined	No	Optional data collected from user.

submitOTP( options? )

This method authenticates the user based on the provided phone number and OTP code.

loginPasswordlessSmsOtpManager.submitOTP({
 username: <PhoneFieldValue>;
 otp: <OtpCodeFieldValue>;
})

Parameter	Type	Required	Description
`captcha`	string	Conditionally	The captcha code or response from the captcha provider. This property is required if your Auth0 tenant has Bot Detection enabled.
`otp`	string	Yes	The OTP code sent to the phone number.
`username`	string	Yes	The phone number from the previous step.
`[key: string]`	string \| number \| boolean \| undefined	No	Optional data collected from the user.

Brand Customization

Code Customization

Third-Party Customization

Login screen classes

Properties

Methods

federatedLogin( options? )

Properties

Methods

continueWithCode( options? )

resendCode( options? )

Properties

Methods

passkeyLogin( options? )

federatedLogin( options? )

pickCountryCode( options? )

Properties

Methods

Properties

Methods

resendCode( options? )

SubmitCode( options? )

Properties

Methods

resendOTP( options? )

submitOTP( options? )

Brand Customization

Code Customization

Third-Party Customization