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

Was this 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>;
  };
}

Was this helpful?

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

Was this 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;
}

Was this helpful?

interface prompt{
  name: string;
}

Was this 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;
}

Was this helpful?

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

Was this 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;
}

Was this 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;
  };
}

Was this 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;
}

Was this 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'
});

Was this 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();

Was this 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>;
  };
}

Was this helpful?

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

Was this 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;
}

Was this helpful?

interface prompt{
  name: string;
}

Was this 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;
}

Was this helpful?

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

Was this 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;
}

Was this 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;
  };
}

Was this 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;
}

Was this 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();

Was this 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;

Was this 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>;
  };
}

Was this helpful?

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

Was this 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;
}

Was this helpful?

interface prompt{
  name: string;
}

Was this 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;
}

Was this helpful?

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

Was this 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;
}

Was this 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;
  };
}

Was this 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;
}

Was this 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'
});

Was this 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>;
  };
}

Was this helpful?

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

Was this 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;
}

Was this helpful?

interface prompt{
  name: string;
}

Was this 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;
}

Was this helpful?

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

Was this 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;
}

Was this 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;
  };
}

Was this 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;
}

Was this 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'
});

Was this 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 ?)