Signup screen classes

The Signup 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 Signup screen class

import Signup from '@auth0/auth0-acul-js/signup';
const signupManager = new Signup();

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

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

feedbackSection.helpful

Properties

The Signup 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>;
  };
}

feedbackSection.helpful

interface client {
  description: null | string;
  id: string;
  logoUrl: null | string;
  name: string;
  metadata: null | {[key: string]: string;};
}

feedbackSection.helpful

interface organization {
  branding: null | {
    colors?: {
      pageBackground?: string;
      primary?: string;
    };
    logoUrl?: string;
  };
  displayName: null | string;
  id: null | string;
  metadata: null | {[key: string]: string;};
  name: null | string;
  usage: null | string;
}

feedbackSection.helpful

interface prompt{
  name: string;
}

feedbackSection.helpful

interface screen {
 captcha: null | CaptchaContext;
 captchaImage: null | string;
 captchaProvider: null | string;
 captchaSiteKey: null | string;
 data: null | {
   loginLink?: string;
   name?: string;
 };
 isCaptchaAvailable: boolean;
 links: null | Record<string, string>;
 name: string;
 texts: null | Record<string, string>;
}

interface CaptchaContext {
  image?: string;
  provider: string;
  siteKey?: string;
}

feedbackSection.helpful

interface tenant {
  enabledFactors: null | string[];
  enabledLocales: null | string[];
  friendlyName: null | string;
  name: null | string;
}

feedbackSection.helpful

interface TransactionMembersOnSignup {
  alternateConnections: null | (Connection | EnterpriseConnection)[];
  connectionStrategy: null | string;
  countryCode: null | string;
  countryPrefix: null | string;
  currentConnection: null | Connection;
  errors: null | Error[];
  hasErrors: boolean;
  isPasskeyEnabled: boolean;
  locale: string;
  optionalIdentifiers: null | ("email" | "username" | "phone")[];
  requiredIdentifiers: null | ("email" | "username" | "phone")[];
  state: string;
  usernamePolicy: null | UsernamePolicy;
}

interface Connection {
  metadata?: Record<string, string>;
  name: string;
  strategy: string;
}

interface EnterpriseConnection {
  metadata?: Record<string, string>;
  name: string;
  options: {
    displayName?: string;
    iconUrl?: string;
    showAsButton: boolean;
  };
  strategy: string;
}

interface UsernamePolicy {
  allowedFormats: {
    usernameInEmailFormat: boolean;
    usernameInPhoneFormat: boolean;
  };
  maxLength: number;
  minLength: number;
}

feedbackSection.helpful

interface untrustedData {
  authorizationParams: null | {
    login_hint?: string;
    screen_hint?: string;
    ui_locales?: string;
    [key: `ext-${string}`]: string;
  };
  submittedFormData: null | {
    [key: string]:
        | string
        | number
        | boolean
        | undefined;
  };
}

feedbackSection.helpful

interface user {
  appMetadata: null | {[key: string]: string;};
  email: null | string;
  enrolledDevices: null | string[];
  enrolledEmails: null | string[];
  enrolledFactors: null | string[];
  enrolledPhoneNumbers: null | string[];
  id: null | string;
  organizations: null | {
    branding: undefined | {logoUrl: undefined | string;};
    displayName: undefined | string;
    organizationId: undefined | string;
    organizationName: undefined | string;
  }[];
  phoneNumber: null | string;
  picture: null | string;
  userMetadata: null | {[key: string]: string;};
  username: null | string;
}

feedbackSection.helpful

Methods

The Signup screen class methods are:

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.

import Signup from "@auth0/auth0-acul-js/signup";
const signupManager = new Signup();

signupManager.pickCountryCode();

feedbackSection.helpful

This method redirects the user to the next step in the authentication flow. Depending on the server configuration, this screen can include inputs for one or more of the following: email, username, or phone number. For more details, review Flexible Identifiers.

import Signup from '@auth0/auth0-acul-js/signup';

const signupManager = new Signup();

signupManager.signup({
 email: 'test@example.com',
 password: 'P@$$wOrd123!',
});

feedbackSection.helpful

Parameter	Type	Required	Description
`email`	string	Conditionally	The user’s email.
`phone`	string	Conditionally	The user’s phone number.
`username`	string	Conditionally	The user’s username.
`password`	string	Conditionally	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 `pre-user-registration` Action trigger.

socialSignup( 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 Signup from '@auth0/auth0-acul-js/signup';

const signupManager = new Signup();

signupManager.socialSignup({
 connection: 'google-oauth2'
});

feedbackSection.helpful

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.

The Signup 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 Signup ID screen class

import SignupId from '@auth0/auth0-acul-js/signup-id';
const signupIdManager = new SignupId();

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

// SDK Methods return an object or array
// ex. { login: "/login_url"} 
signupIdManager.screenLinks();

feedbackSection.helpful

Properties

The Signup 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>;
  };
}

feedbackSection.helpful

interface client {
  description: null | string;
  id: string;
  logoUrl: null | string;
  name: string;
  metadata: null | {[key: string]: string;};
}

feedbackSection.helpful

interface organization {
  branding: null | {
    colors?: {
      pageBackground?: string;
      primary?: string;
    };
    logoUrl?: string;
  };
  displayName: null | string;
  id: null | string;
  metadata: null | {[key: string]: string;};
  name: null | string;
  usage: null | string;
}

feedbackSection.helpful

interface prompt{
  name: string;
}

feedbackSection.helpful

interface screen {
  captcha: null | CaptchaContext;
  captchaImage: null | string;
  captchaProvider: null | string;
  captchaSiteKey: null | string;
  data: null | Record<string, string>;
  isCaptchaAvailable: boolean;
  links: null | Record<string, string>;
  loginLink: null | string;
  name: string;
  texts: null | Record<string, string>;
}

interface CaptchaContext {
  image?: string;
  provider: string;
  siteKey?: string;
}

feedbackSection.helpful

interface tenant {
  enabledFactors: null | string[];
  enabledLocales: null | string[];
  friendlyName: null | string;
  name: null | string;
}

feedbackSection.helpful

interface transaction {
  alternateConnections: null | (Connection | EnterpriseConnection)[];
  connectionStrategy: null | string;
  countryCode: null | string;
  countryPrefix: null | string;
  currentConnection: null | Connection;
  errors: null | Error[];
  hasErrors: boolean;
  isPasskeyEnabled: boolean;
  locale: string;
  optionalIdentifiers: null | ("email" | "username" | "phone")[];
  requiredIdentifiers: null | ("email" | "username" | "phone")[];
  state: string;
  usernamePolicy: null | UsernamePolicy;
}

interface Connection {
  metadata?: Record<string, string>;
  name: string;
  strategy: string;
}

interface EnterpriseConnection {
  metadata?: Record<string, string>;
  name: string;
  options: {
    display_name?: string;
    icon_url?: string;
    show_as_button: boolean;
  };
  strategy: string;
}

interface UsernamePolicy {
  allowedFormats: {
    usernameInEmailFormat: boolean;
    usernameInPhoneFormat: boolean;
  };
  maxLength: number;
  minLength: number;
}

feedbackSection.helpful

interface untrustedData {
  authorizationParams: null | {
    login_hint?: string;
    screen_hint?: string;
    ui_locales?: string;
    [key: `ext-${string}`]: string;
  };
  submittedFormData: null | {
    [key: string]:
        | string
        | number
        | boolean
        | undefined;
  };
}

feedbackSection.helpful

interface user {
  appMetadata: null | {[key: string]: string;};
  email: null | string;
  enrolledDevices: null | string[];
  enrolledEmails: null | string[];
  enrolledFactors: null | string[];
  enrolledPhoneNumbers: null | string[];
  id: null | string;
  organizations: null | {
    branding: undefined | {logoUrl: undefined | string;};
    displayName: undefined | string;
    organizationId: undefined | string;
    organizationName: undefined | string;
  }[];
  phoneNumber: null | string;
  picture: null | string;
  userMetadata: null | {[key: string]: string;};
  username: null | string;
}

feedbackSection.helpful

Methods

The Signup ID screen class methods are:

This method takes the user to the next step in the authentication flow. Depending on the server configuration, this screen can include inputs for one or more of the following: email, username, or phone number. For more details, review Flexible Identifiers.

import SignupId from "@auth0/auth0-acul-js/signup-id";

const signupIdManager = new SignupId();
const { transaction } = signupIdManager;

//get mandatory & optional identifiers required for signup
const mandatoryIdentifier = transaction.getRequiredIdentifiers(); // eg: email
const optionalIdentifiers = transaction.getOptionalIdentifiers() // eg: phone

const signupParams = {
 email : "testEmail",
 phone : "+91923456789"
};

signupIdManager.signup(signupParams);

feedbackSection.helpful

Parameter	Type	Required	Description
`email`	string	Conditionally	The user’s email.
`phone`	string	Conditionally	The user’s phone number.
`username`	string	Conditionally	The user’s username.
`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 `pre-user-registration` Action trigger.

socialSignup( 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 SignupId from "@auth0/auth0-acul-js/signup-id";

const signupIdManager = new SignupId();
const { transaction } = signupIdManager;

//get social connections
const socialConnection = transaction.getAlternateConnections(); //eg: "google-oauth2"

const signupParams = {
 connection : socialConnection[0].name, // "google-oauth2"
};

signupIdManager.socialSignup(signupParams);

feedbackSection.helpful

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.

The Signup Password screen class is part of the Identifier First Authentication flow and allows the user to create a password for their profile.

Import and instantiate the Signup Password screen class

import SignupPassword from '@auth0/auth0-acul-js/signup-password';
const signupPasswordManager = new SignupPassword();

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

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

feedbackSection.helpful

Properties

The Signup 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>;
  };
}

feedbackSection.helpful

interface client {
  description: null | string;
  id: string;
  logoUrl: null | string;
  name: string;
  metadata: null | {[key: string]: string;};
}

feedbackSection.helpful

interface organization {
  branding: null | {
    colors?: {
      pageBackground?: string;
      primary?: string;
    };
    logoUrl?: string;
  };
  displayName: null | string;
  id: null | string;
  metadata: null | {[key: string]: string;};
  name: null | string;
  usage: null | string;
}

feedbackSection.helpful

interface prompt{
  name: string;
}

feedbackSection.helpful

interface screen {
  captcha: null | CaptchaContext;
  captchaImage: null | string;
  captchaProvider: null | string;
  captchaSiteKey: null | string;
  data: null | {
    email?: string;
    phone?: string;
    username?: string;
  };
  editLink: null | string;
  isCaptchaAvailable: boolean;
  links: null | Record<string, string>;
  loginLink: null | string;
  name: string;
  texts: null | Record<string, string>;
}

interface CaptchaContext {
  image?: string;
  provider: string;
  siteKey?: string;
}

feedbackSection.helpful

interface tenant {
  enabledFactors: null | string[];
  enabledLocales: null | string[];
  friendlyName: null | string;
  name: null | string;
}

feedbackSection.helpful

interface transaction {
  alternateConnections: null | (Connection | EnterpriseConnection)[];
  connectionStrategy: null | string;
  countryCode: null | string;
  countryPrefix: null | string;
  currentConnection: null | Connection;
  errors: null | Error[];
  hasErrors: boolean;
  isPasskeyEnabled: boolean;
  locale: string;
  optionalIdentifiers: null | ("email" | "username" | "phone")[];
  passwordPolicy: null | PasswordPolicy;
  requiredIdentifiers: null | ("email" | "username" | "phone")[];
  state: string;
}

interface Connection {
  metadata?: Record<string, string>;
  name: string;
  strategy: string;
}

interface EnterpriseConnection {
  metadata?: Record<string, string>;
  name: string;
  options: {
    display_name?: string;
    icon_url?: string;
    show_as_button: boolean;
  };
  strategy: string;
}

interface PasswordPolicy {
    minLength?: number;
    policy:
        | "low"
        | "fair"
        | "good"
        | "excellent";
}

feedbackSection.helpful

interface untrustedData {
  authorizationParams: null | {
    login_hint?: string;
    screen_hint?: string;
    ui_locales?: string;
    [key: `ext-${string}`]: string;
  };
  submittedFormData: null | {
    [key: string]:
        | string
        | number
        | boolean
        | undefined;
  };
}

feedbackSection.helpful

interface user {
  appMetadata: null | {[key: string]: string;};
  email: null | string;
  enrolledDevices: null | string[];
  enrolledEmails: null | string[];
  enrolledFactors: null | string[];
  enrolledPhoneNumbers: null | string[];
  id: null | string;
  organizations: null | {
    branding: undefined | {logoUrl: undefined | string;};
    displayName: undefined | string;
    organizationId: undefined | string;
    organizationName: undefined | string;
  }[];
  phoneNumber: null | string;
  picture: null | string;
  userMetadata: null | {[key: string]: string;};
  username: null | string;
}

feedbackSection.helpful

Methods

The Signup Password screen class method is:

This method submits the identifier from the previous step and the provided password to create the user's account. Once created, the user is directed to the next step.

signupPasswordManager.signup({
  email: <EmailFieldValue>
  phone: <PhoneFieldValue>
  username: <UsernameFieldValue>
  password: ********
});

feedbackSection.helpful

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.
`email`	string	Conditionally	The user’s email.
`password`	string	Yes	The user’s password.
`phone`	string	Conditionally	The user’s phone number.
`username`	string	Conditionally	The user’s username.
`[key: string]`	string \| number \| boolean \| undefined	No	Additional data collected from the user. This data is accessible in the `pre-user-registration` Action trigger.

Passkey Enrollment screen class

The Passkey Enrollment screen class is part of the Identifier First Authentication flow. It allows the user to create a passkey to use as their authentication credential for all subsequent authentications on your application. Review Passkeys to learn more about using passkeys in Auth0.

Import and instantiate the Passkey Enrollment screen class

import PasskeyEnrollment from '@auth0/auth0-acul-js/passkey-enrollment';
const passskeyEnrollmentManager = new PasskeyEnrollment();

// SDK Properties return a string, number or boolean
// ex. "passkey-enrollment"
passskeyEnrollmentManager.screen.name;

// SDK Methods return an object or array
// ex. { back: "/back_url" } 
passskeyEnrollmentManager.screenLinks();

feedbackSection.helpful

Properties

The Passkey Enrollment 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>;
  };
}

feedbackSection.helpful

interface client {
  description: null | string;
  id: string;
  logoUrl: null | string;
  name: string;
  metadata: null | {[key: string]: string;};
}

feedbackSection.helpful

interface organization {
  branding: null | {
    colors?: {
      pageBackground?: string;
      primary?: string;
    };
    logoUrl?: string;
  };
  displayName: null | string;
  id: null | string;
  metadata: null | {[key: string]: string;};
  name: null | string;
  usage: null | string;
}

feedbackSection.helpful

interface prompt{
  name: string;
}

feedbackSection.helpful

interface screen {
  backLink: null | string;
  captcha: null | CaptchaContext;
  captchaImage: null | string;
  captchaProvider: null | string;
  captchaSiteKey: null | string;
  data: null | Record<string, string>;
  isCaptchaAvailable: boolean;
  links: null | Record<string, string>;
  loginLink: null | string;
  name: string;
  publicKey: null | {
    authenticatorSelection: {
      residentKey: string;
      userVerification: string;
    };
    challenge: string;
    pubKeyCredParams: [{
      alg: number;
      type: string;
    }];
    rp: {
      id: string;
      name: string;
    };
    user: {
      displayName: string;
      id: string;
      name: string;
    };
  };
  texts: null | Record<string, string>;
}

interface CaptchaContext {
  image?: string;
  provider: string;
  siteKey?: string;
}

feedbackSection.helpful

interface tenant {
  enabledFactors: null | string[];
  enabledLocales: null | string[];
  friendlyName: null | string;
  name: null | string;
}

feedbackSection.helpful

interface transaction {
  alternateConnections: null | (Connection | EnterpriseConnection)[];
  connectionStrategy: null | string;
  countryCode: null | string;
  countryPrefix: null | string;
  currentConnection: null | Connection;
  errors: null | Error[];  
  hasErrors: boolean;
  locale: string;
  state: string;
}

interface Connection {
  metadata?: Record<string, string>;
  name: string;
  strategy: string;
}

interface EnterpriseConnection {
  metadata?: Record<string, string>;
  name: string;
  options: {
    displayName?: string;
    iconUrl?: string;
    showAsButton: boolean;
  };
  strategy: string;
}

feedbackSection.helpful

interface untrustedData {
  authorizationParams: null | {
    login_hint?: string;
    screen_hint?: string;
    ui_locales?: string;
    [key: `ext-${string}`]: string;
  };
  submittedFormData: null | {
    [key: string]:
        | string
        | number
        | boolean
        | undefined;
  };
}

feedbackSection.helpful

interface user {
  appMetadata: null | {[key: string]: string;};
  email: null | string;
  enrolledDevices: null | string[];
  enrolledEmails: null | string[];
  enrolledFactors: null | string[];
  enrolledPhoneNumbers: null | string[];
  id: null | string;
  organizations: null | {
    branding: undefined | {logoUrl: undefined | string;};
    displayName: undefined | string;
    organizationId: undefined | string;
    organizationName: undefined | string;
  }[];
  phoneNumber: null | string;
  picture: null | string;
  userMetadata: null | {[key: string]: string;};
  username: null | string;
}

feedbackSection.helpful

Methods

The Passkey Enrollment screen class method are:

abortPasskeyEnrollment( options? )

This method sends the user to the Signup Password Screen to create their password.

// This method does not support any parameters
passkeyEnrollment.abortPasskeyEnrollment();

feedbackSection.helpful

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

continuePasskeyEnrollment( options? )

Create a passkey and authenticate the user. After creating the passkey, this method sends the user to the redirect_url.

// This method does not support any parameters
passkeyEnrollment.continuePasskeyEnrollment();

feedbackSection.helpful

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

Passkey Enrollment Local screen class

The Passkey Enrollment Local screen class is part of the Identifier First Authentication flow. It allows the user to create a passkey to use as their authentication credential for all subsequent authentications on your application. Review Passkeys to learn more about using passkeys in Auth0

Import and instantiate the Passkey Enrollment Local screen class

import PasskeyEnrollmentLocal from '@auth0/auth0-acul-js/passkey-enrollment-local';
const passskeyEnrollmentLocalManager = new PasskeyEnrollmentLocal();

// SDK Properties return a string, number or boolean
// ex. "passkey-enrollment-local"
passskeyEnrollmentLocalManager.screen.name;

// SDK Methods return an object or array
// ex. { back: "/back_url" } 
passskeyEnrollmentLocalManager.screenLinks();

feedbackSection.helpful

Properties

The Passkey Enrollment Local 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>;
  };
}

feedbackSection.helpful

interface client {
  description: null | string;
  id: string;
  logoUrl: null | string;
  name: string;
  metadata: null | {[key: string]: string;};
}

feedbackSection.helpful

interface organization {
  branding: null | {
    colors?: {
      pageBackground?: string;
      primary?: string;
    };
    logoUrl?: string;
  };
  displayName: null | string;
  id: null | string;
  metadata: null | {[key: string]: string;};
  name: null | string;
  usage: null | string;
}

feedbackSection.helpful

interface prompt{
  name: string;
}

feedbackSection.helpful

interface screen {
  captcha: null | CaptchaContext;
  captchaImage: null | string;
  captchaProvider: null | string;
  captchaSiteKey: null | string;
  data: null | Record<string, string>;
  isCaptchaAvailable: boolean;
  links: null | Record<string, string>;
  name: string;
  publicKey: null | {
    authenticatorSelection: {
      residentKey: string;
      userVerification: string;
    };
    challenge: string;
    pubKeyCredParams: [{
      alg: number;
      type: string;
    }];
    rp: {
      id: string;
      name: string;
    };
    user: {
      displayName: string;
      id: string;
      name: string;
    };
  };
  texts: null | Record<string, string>;
}

interface CaptchaContext {
  image?: string;
  provider: string;
  siteKey?: string;
}

feedbackSection.helpful

interface tenant {
  enabledFactors: null | string[];
  enabledLocales: null | string[];
  friendlyName: null | string;
  name: null | string;
}

feedbackSection.helpful

interface transaction {
  alternateConnections: null | (Connection | EnterpriseConnection)[];
  connectionStrategy: null | string;
  countryCode: null | string;
  countryPrefix: null | string;
  currentConnection: null | Connection;
  errors: null | Error[];  
  hasErrors: boolean;
  locale: string;
  state: string;
}

interface Connection {
  metadata?: Record<string, string>;
  name: string;
  strategy: string;
}

interface EnterpriseConnection {
  metadata?: Record<string, string>;
  name: string;
  options: {
    displayName?: string;
    iconUrl?: string;
    showAsButton: boolean;
  };
  strategy: string;
}

feedbackSection.helpful

interface untrustedData {
  authorizationParams: null | {
    login_hint?: string;
    screen_hint?: string;
    ui_locales?: string;
    [key: `ext-${string}`]: string;
  };
  submittedFormData: null | {
    [key: string]:
        | string
        | number
        | boolean
        | undefined;
  };
}

feedbackSection.helpful

interface user {
  appMetadata: null | {[key: string]: string;};
  email: null | string;
  enrolledDevices: null | string[];
  enrolledEmails: null | string[];
  enrolledFactors: null | string[];
  enrolledPhoneNumbers: null | string[];
  id: null | string;
  organizations: null | {
    branding: undefined | {logoUrl: undefined | string;};
    displayName: undefined | string;
    organizationId: undefined | string;
    organizationName: undefined | string;
  }[];
  phoneNumber: null | string;
  picture: null | string;
  userMetadata: null | {[key: string]: string;};
  username: null | string;
}

feedbackSection.helpful

Methods

The Passkey Enrollment Local screen class method are:

abortPasskeyEnrollment( options )

Skip the passkey creation and provide a password instead. This method sends the user to the Signup Password Screen to create their password.

passkeyEnrollment.abortPasskeyEnrollment({
  doNotShowAgain: <BooleanFieldValue>
});

feedbackSection.helpful

Parameter	Type	Required	Description
`doNotShowAgain`	boolean	Yes	Indicates whether or not the user wants to be reminded to create a passkey again after skipping initial creation.

continuePasskeyEnrollment( options? )

Create a passkey and authenticate the user. After creating the passkey, this operation sends the user to the redirect_url.

// This method does not support any parameters
passkeyEnrollment.continuePasskeyEnrollment();

feedbackSection.helpful

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

Phone Identifier Challenge screen class

The Phone Identifier Challenge screen class is part of the Identifier First Authentication flow and verifies the user's phone number before allowing them to sign up. For more details, review Activate and Configure Attributes for Flexible Identifiers.

Import and instantiate the Phone Identifier Challenge screen class

import PhoneIdentifierChallenge from '@auth0/auth0-acul-js/phone-identifier-challenge';
const phoneIdentifierChallengeManager = new PhoneIdentifierChallenge();

// SDK Properties return a string, number or boolean
// ex. "phone-identifier-challenge"
phoneIdentifierChallengeManager.screen.name;

// SDK Methods return an object or array
// ex. data: { message_type: "text", phone: "+1234567890" };
phoneIdentifierChallengeManager.screenData();

feedbackSection.helpful

Properties

The Phone Identifier Challenge 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>;
  };
}

feedbackSection.helpful

interface client {
  description: null | string;
  id: string;
  logoUrl: null | string;
  name: string;
  metadata: null | {[key: string]: string;};
}

feedbackSection.helpful

interface organization {
  branding: null | {
    colors?: {
      pageBackground?: string;
      primary?: string;
    };
    logoUrl?: string;
  };
  displayName: null | string;
  id: null | string;
  metadata: null | {[key: string]: string;};
  name: null | string;
  usage: null | string;
}

feedbackSection.helpful

interface prompt{
  name: string;
}

feedbackSection.helpful

interface screen {
  captcha: null | CaptchaContext;
  captchaImage: null | string;
  captchaProvider: null | string;
  captchaSiteKey: null | string;
  data: null | {
    messageType?: "text" | "voice";
    phone?: string;
  };
  isCaptchaAvailable: boolean;
  links: null | Record<string, string>;
  name: string;
  texts: null | Record<string, string>;
}

interface CaptchaContext {
  image?: string;
  provider: string;
  siteKey?: string;
}

feedbackSection.helpful

interface tenant {
  enabledFactors: null | string[];
  enabledLocales: null | string[];
  friendlyName: null | string;
  name: null | string;
}

feedbackSection.helpful

interface transaction {
  alternateConnections: null | (Connection | EnterpriseConnection)[];
  connectionStrategy: null | string;
  countryCode: null | string;
  countryPrefix: null | string;
  currentConnection: null | Connection;
  errors: null | Error[];  
  hasErrors: boolean;
  locale: string;
  state: string;
}

interface Connection {
  metadata?: Record<string, string>;
  name: string;
  strategy: string;
}

interface EnterpriseConnection {
  metadata?: Record<string, string>;
  name: string;
  options: {
    displayName?: string;
    iconUrl?: string;
    showAsButton: boolean;
  };
  strategy: string;
}

feedbackSection.helpful

interface untrustedData {
  authorizationParams: null | {
    login_hint?: string;
    screen_hint?: string;
    ui_locales?: string;
    [key: `ext-${string}`]: string;
  };
  submittedFormData: null | {
    [key: string]:
        | string
        | number
        | boolean
        | undefined;
  };
}

feedbackSection.helpful

interface user {
  appMetadata: null | {[key: string]: string;};
  email: null | string;
  enrolledDevices: null | string[];
  enrolledEmails: null | string[];
  enrolledFactors: null | string[];
  enrolledPhoneNumbers: null | string[];
  id: null | string;
  organizations: null | {
    branding: undefined | {logoUrl: undefined | string;};
    displayName: undefined | string;
    organizationId: undefined | string;
    organizationName: undefined | string;
  }[];
  phoneNumber: null | string;
  picture: null | string;
  userMetadata: null | {[key: string]: string;};
  username: null | string;
}

feedbackSection.helpful

Methods

The Phone Identifier Challenge 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
phoneIdentifierChallenge.resendCode();

feedbackSection.helpful

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

returnToPrevious( options? )

This method returns the user to the previous step.

// This method does not support any parameters
phoneIdentifierChallenge.returnToPrevious();

feedbackSection.helpful

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

submitPhoneChallenge( options )

This method verifies the provided phone number and allows the user to continue signing up.

phoneIdentifierChallenge.submitPhoneChallenge({
    code: "<CodeFieldValue>"
});

feedbackSection.helpful

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	Yes	The OTP code sent to the phone number.
`[key: string]`	string \| number \| boolean \| undefined	No	Optional data collected from user.

Phone Identifier Enrollment screen class

The Phone Identifier Enrollment screen class is part of the Identifier First Authentication flow and allows the user to select a method for verifying their phone number before continuing the signup process. For more details, review Activate and Configure Attributes for Flexible Identifiers.

Import and instantiate the Phone Identifier Enrollment screen class

import PhoneIdentifierEnrollment from '@auth0/auth0-acul-js/phone-identifier-enrollment';
const phoneIdentifierEnrollmentManager = new PhoneIdentifierEnrollment();

// SDK Properties return a string, number or boolean
// ex. "phone-identifier-enrollment"
phoneIdentifierEnrollmentManager.screen.name;

// SDK Methods return an object or array
// ex. { phone_number: "+1234567890" } 
phoneIdentifierEnrollmentManager.screenData();

feedbackSection.helpful

Properties

The Phone Identifier Enrollment 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>;
  };
}

feedbackSection.helpful

interface client {
  description: null | string;
  id: string;
  logoUrl: null | string;
  name: string;
  metadata: null | {[key: string]: string;};
}

feedbackSection.helpful

interface organization {
  branding: null | {
    colors?: {
      pageBackground?: string;
      primary?: string;
    };
    logoUrl?: string;
  };
  displayName: null | string;
  id: null | string;
  metadata: null | {[key: string]: string;};
  name: null | string;
  usage: null | string;
}

feedbackSection.helpful

interface prompt{
  name: string;
}

feedbackSection.helpful

interface screen {
  captcha: null | CaptchaContext;
  captchaImage: null | string;
  captchaProvider: null | string;
  captchaSiteKey: null | string;
  data: null | {
    messageType?: "text" | "voice";
    phone?: "string";
  };
  editIdentifierLink: null | string;
  isCaptchaAvailable: boolean;
  links: null | Record<string, string>;
  name: string;
  texts: null | Record<string, string>;
}

interface CaptchaContext {
  image?: string;
  provider: string;
  siteKey?: string;
}

feedbackSection.helpful

interface tenant {
  enabledFactors: null | string[];
  enabledLocales: null | string[];
  friendlyName: null | string;
  name: null | string;
}

feedbackSection.helpful

interface transaction {
  alternateConnections: null | (Connection | EnterpriseConnection)[];
  connectionStrategy: null | string;
  countryCode: null | string;
  countryPrefix: null | string;
  currentConnection: null | Connection;
  errors: null | Error[];  
  hasErrors: boolean;
  locale: string;
  state: string;
}

interface Connection {
  metadata?: Record<string, string>;
  name: string;
  strategy: string;
}

interface EnterpriseConnection {
  metadata?: Record<string, string>;
  name: string;
  options: {
    displayName?: string;
    iconUrl?: string;
    showAsButton: boolean;
  };
  strategy: string;
}

feedbackSection.helpful

interface untrustedData {
  authorizationParams: null | {
    login_hint?: string;
    screen_hint?: string;
    ui_locales?: string;
    [key: `ext-${string}`]: string;
  };
  submittedFormData: null | {
    [key: string]:
        | string
        | number
        | boolean
        | undefined;
  };
}

feedbackSection.helpful

interface user {
  appMetadata: null | {[key: string]: string;};
  email: null | string;
  enrolledDevices: null | string[];
  enrolledEmails: null | string[];
  enrolledFactors: null | string[];
  enrolledPhoneNumbers: null | string[];
  id: null | string;
  organizations: null | {
    branding: undefined | {logoUrl: undefined | string;};
    displayName: undefined | string;
    organizationId: undefined | string;
    organizationName: undefined | string;
  }[];
  phoneNumber: null | string;
  picture: null | string;
  userMetadata: null | {[key: string]: string;};
  username: null | string;
}

feedbackSection.helpful

Methods

The Phone Identifier Enrollment screen class method are:

continuePhoneEnrollment( options )

Send an OTP code via the user's chosen method to the phone number provided in the previous step.

phoneIdentifierChallenge.continuePhoneEnrollment({
  type: "text" | "voice"
});

feedbackSection.helpful

Parameter	Type	Required	Description
`type`	string	Yes	Possible values: `text` or `voice`
`[key: string]`	string \| number \| boolean \| undefined	No	Optional data collected from user.

returnToPrevious( options? )

This method returns the user to the previous step.

// This method does not support any parameters
phoneIdentifierChallenge.returnToPrevious();

feedbackSection.helpful

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

Email Identifier Challenge screen class

The Email Identifier Challenge screen class is part of the Identifier First Authentication flow and verifies the user's email address before allowing them to sign up. For more details, review Activate and Configure Attributes for Flexible Identifiers.

Import and instantiate the Email Identifier Challenge screen class:

import EmailIdentifierChallenge from '@auth0/auth0-acul-js/email-identifier-challenge';
const emailIdentifierChallengeManager = new EmailIdentifierChallenge();

// SDK Properties return a string, number or boolean
// ex. "email-identifier-challenge"
emailIdentifierChallengeManager.screen.name;

// SDK Methods return an object or array
// ex. { email: "someone@example.com" } 
emailIdentifierChallengeManager.screenData();

feedbackSection.helpful

Properties

The Email Identifier Challenge 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>;
  };
}

feedbackSection.helpful

interface client {
  description: null | string;
  id: string;
  logoUrl: null | string;
  name: string;
  metadata: null | {[key: string]: string;};
}

feedbackSection.helpful

interface organization {
  branding: null | {
    colors?: {
      pageBackground?: string;
      primary?: string;
    };
    logoUrl?: string;
  };
  displayName: null | string;
  id: null | string;
  metadata: null | {[key: string]: string;};
  name: null | string;
  usage: null | string;
}

feedbackSection.helpful

interface prompt{
  name: string;
}

feedbackSection.helpful

interface screen{
  captcha: null | CaptchaContext;
  captchaImage: null | string;
  captchaProvider: null | string;
  captchaSiteKey: null | string;
  data: null | {
    email?: string;
    messageType?: string;
  };
  isCaptchaAvailable: boolean;
  links: null | Record<string, string>;
  name: string;
  texts: null | Record<string, string>;
}

interface CaptchaContext {
  image?: string;
  provider: string;
  siteKey?: string;
}

feedbackSection.helpful

interface tenant {
  enabledFactors: null | string[];
  enabledLocales: null | string[];
  friendlyName: null | string;
  name: null | string;
}

feedbackSection.helpful

interface transaction {
  alternateConnections: null | (Connection | EnterpriseConnection)[];
  connectionStrategy: null | string;
  countryCode: null | string;
  countryPrefix: null | string;
  currentConnection: null | Connection;
  errors: null | Error[];  
  hasErrors: boolean;
  locale: string;
  state: string;
}

interface Connection {
  metadata?: Record<string, string>;
  name: string;
  strategy: string;
}

interface EnterpriseConnection {
  metadata?: Record<string, string>;
  name: string;
  options: {
    displayName?: string;
    iconUrl?: string;
    showAsButton: boolean;
  };
  strategy: string;
}

feedbackSection.helpful

interface untrustedData {
  authorizationParams: null | {
    login_hint?: string;
    screen_hint?: string;
    ui_locales?: string;
    [key: `ext-${string}`]: string;
  };
  submittedFormData: null | {
    [key: string]:
        | string
        | number
        | boolean
        | undefined;
  };
}

feedbackSection.helpful

interface user {
  appMetadata: null | {[key: string]: string;};
  email: null | string;
  enrolledDevices: null | string[];
  enrolledEmails: null | string[];
  enrolledFactors: null | string[];
  enrolledPhoneNumbers: null | string[];
  id: null | string;
  organizations: null | {
    branding: undefined | {logoUrl: undefined | string;};
    displayName: undefined | string;
    organizationId: undefined | string;
    organizationName: undefined | string;
  }[];
  phoneNumber: null | string;
  picture: null | string;
  userMetadata: null | {[key: string]: string;};
  username: null | string;
}

feedbackSection.helpful

Methods

The Email Identifier Challenge screen class methods 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
emailIdentifierChallenge.resendCode();

feedbackSection.helpful

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

returnToPrevious( options? )

This method returns the user to the previous step.

// This method does not support any parameters
emailIdentifierChallenge.returnToPrevious();

feedbackSection.helpful

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

submitEmailChallenge( options? )

This method verifies the provided email address and allows the user to continue signing up.

emailIdentifierChallenge.submitEmailChallenge({
  code: <CodeFieldValue>
});

feedbackSection.helpful

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	Yes	The OTP code sent to the email address.
`[key: string]`	string \| number \| boolean \| undefined	No	Additional data collected from the user.

Customize

Signup screen classes