Multi-Factor Authentication screen classes

MFA Begin Enroll Options screen class

The MFA Begin Enroll Options screen class handles the selection and enrollment of MFA factors.

Import and instantiate the MFA Begin Enroll Options screen class:

import MfaBeginEnrollOptions from "@auth0/auth0-acul-js/mfa-begin-enroll-options";
const mfaBeginEnrollOptionsManager = new MfaBeginEnrollOptions();

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

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

feedbackSection.helpful

Properties

The MFA Begin Enroll Options 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
      | boolean
      | string[]
      | PhonePrefix[]>;
  isCaptchaAvailable: boolean;
  links: null | Record<string, string>;
  name: string;
  texts: null | Record<string, string>;
}

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

interface PhonePrefix {
  country: string;
  country_code: string;
  phone_prefix: 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 MFA Begin Enroll Options screen class method is:

enroll( options ?)

This method continues the enrollment process with the selected MFA option.

const mfaBeginEnrollOptions = new MfaBeginEnrollOptions();
await mfaBeginEnrollOptions.enroll({
  action: 'push-notification'
});

feedbackSection.helpful

Parameter	Type	Required	Description
`action`	FactorType: \| push-notification \| otp \| sms \| phone \| voice \| webauth-roaming	Yes	The selected multi-factor authentication option.
`[key: string]`	string \| number \| boolean \| undefined	No	Additional data collected from the user.

MFA Detect Browser Capabilities screen class

The MFA Detect Browser Capabilities screen class detects browser capabilities for MFA authentication methods.

Import and instantiate the MFA Detect Browser Capabilities screen class:

import MfaDetectBrowserCapabilities from "@auth0/auth0-acul-js/mfa-detect-browser-capabilities";

const mfaDetectBrowserCapabilitiesManager = new MfaDetectBrowserCapabilities();

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

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

feedbackSection.helpful

Properties

The MFA Detect Browser Capabilities 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
      | boolean
      | string[]
      | PhonePrefix[]>;
  isCaptchaAvailable: boolean;
  links: null | Record<string, string>;
  name: string;
  texts: null | Record<string, string>;
}

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

interface PhonePrefix {
  country: string;
  country_code: string;
  phone_prefix: 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 MFA Detect Browser Capabilities screen class method is:

detectCapabilities( options ?)

This method allows you to select an authenticator based on browser capabilities.

const mfaDetectBrowserCapabilities = new MfaDetectBrowserCapabilities();
await mfaDetectBrowserCapabilities.detectCapabilities();

feedbackSection.helpful

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

MFA Enroll Result screen class

The MFA Enroll Result screen class allows users to select an enrolled email address for MFA.

Import and instantiate the MFA Enroll Result screen class:

import MfaEnrollResult from '@auth0/auth0-acul-js/mfa-enroll-result';
const mfaEnrollResult = new MfaEnrollResult();

// SDK Properties return a string, number or boolean
mfaEnrollResult.screen.name;

feedbackSection.helpful

Properties

The MFA Enroll Result 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
      | boolean
      | string[]
      | PhonePrefix[]>;
  isCaptchaAvailable: boolean;
  links: null | Record<string, string>;
  name: string;
  texts: null | Record<string, string>;
}

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

interface PhonePrefix {
  country: string;
  country_code: string;
  phone_prefix: 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

The MFA Login Options screen class allows users to select which MFA factor to use for login.

Import and instantiate the MFA Login Options screen class:

import MfaLoginOptions from '@auth0/auth0-acul-js/mfa-login-options';
const mfaLoginOptions = new MfaLoginOptions();

// SDK Properties return a string, number or boolean
mfaLoginOptions.screen.name;

// SDK Methods return an object or array
await mfaLoginOptions.enroll({
  action: 'push-notification'
});

feedbackSection.helpful

Properties

The MFA Login Options 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
      | boolean
      | string[]
      | PhonePrefix[]>;
  isCaptchaAvailable: boolean;
  links: null | Record<string, string>;
  name: string;
  texts: null | Record<string, string>;
}

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

interface PhonePrefix {
  country: string;
  country_code: string;
  phone_prefix: 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 MFA Login Options screen class method is:

enroll( options ?)

This method continues the login process with the selected MFA option.

const mfaLoginOptions = new MfaLoginOptions();
await mfaLoginOptions.enroll({
  action: 'push-notification'
});

feedbackSection.helpful

Parameter	Type	Required	Description
`action`	LoginFactorType: \| push-notification \| otp \| sms \| phone \| voice \| email \| recovery-code \| webauthn-platform \| webauth-roaming \| duo	Yes	The selected multi-factor authentication option to login.
`[key: string]`	string \| number \| boolean \| undefined	No	Additional data collected from the user.

Customize

Multi-Factor Authentication screen classes

MFA Begin Enroll Options screen class

Properties

Methods

enroll( options ?)

MFA Detect Browser Capabilities screen class

Properties

Methods

detectCapabilities( options ?)

MFA Enroll Result screen class

Properties

MFA Login Options screen class

Properties

Methods

enroll( options ?)