Multi-Factor Authentication OTP screen classes
MFA OTP Challenge screen class
The MFA OTP Challenge screen class provides methods associated with the mfa-otp-challenge screen. This screen is shown when a user needs to enter an OTP code during MFA.
Import and instantiate the MFA OTP Challenge screen class:
import MfaOtpChallenge from '@auth0/auth0-acul-js/mfa-otp-challenge';
const mfaOtpChallenge = new MfaOtpChallenge();
// SDK Properties return a string, number or boolean
// ex. "login-id"
mfaOtpChallenge.screen.name;
// SDK Methods return an object or array
await mfaOtpChallenge.continue({
code: '123456',
rememberBrowser: true
});Was this helpful?
/
Properties
The MFA OTP 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>;
};
}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 | { remember_device?: boolean; };
isCaptchaAvailable: boolean;
links: null | Record<string, string>;
name: string;
texts: null | Record<string, string>;
}
interface CaptchaContext {
image?: string;
provider: string;
siteKey?: 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 | ShortEntity<"device">[];
enrolledEmails: null | ShortEntity<"email">[];
enrolledFactors: null | string[];
enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[];
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;
}
ShortEntity<Key>: {
id: number;
} & Record<Key, string>Was this helpful?
/
Methods
The MFA OTP Challenge screen class methods are:
continue( options ?)
This method continues with the OTP challenge using the provided code.
import MfaOtpChallenge from '@auth0/auth0-acul-js/mfa-otp-challenge';
const mfaOtpChallenge = new MfaOtpChallenge();
await mfaOtpChallenge.continue({
code: '123456',
rememberBrowser: true
});Was this helpful?
/
| Parameter | Type | Required | Description |
|---|---|---|---|
code |
string | Yes | The code entered by the user. |
rememberBrowser |
boolean | No | Remember the user's browser configuration. |
tryAnotherMethod( options ?)
This method allows the user to try another MFA method.
import MfaOtpChallenge from '@auth0/auth0-acul-js/mfa-otp-challenge';
const mfaOtpChallenge = new MfaOtpChallenge();
await mfaOtpChallenge.tryAnotherMethod();Was this helpful?
/
| Parameter | Type | Required | Description |
|---|---|---|---|
[key: string] |
string | number | boolean | undefined | No | Optional data collected from user. |
MFA OTP Enrollment Code screen class
The MFA OTP Enrollment Code screen class provides methods associated with the mfa-otp-enrollment-code screen.
Import and instantiate the MFA OTP Enrollment Code screen class:
import MfaOtpEnrollmentCode from '@auth0/auth0-acul-js/mfa-otp-enrollment-code';
const mfaOtpEnrollmentCode = new MfaOtpEnrollmentCode();
// SDK Properties return a string, number or boolean
// ex. "login-id"
mfaOtpEnrollmentCode.screen.name;
// SDK Methods return an object or array
await mfaOtpEnrollmentCode.continue({
code: '123456',
});Was this helpful?
/
Properties
The MFA OTP Enrollment 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>;
};
}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 | { text_code: string; };
isCaptchaAvailable: boolean;
links: null | Record<string, string>;
name: string;
texts: null | Record<string, string>;
}
interface CaptchaContext {
image?: string;
provider: string;
siteKey?: 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 | ShortEntity<"device">[];
enrolledEmails: null | ShortEntity<"email">[];
enrolledFactors: null | string[];
enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[];
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;
}
ShortEntity<Key>: {
id: number;
} & Record<Key, string>Was this helpful?
/
Methods
The MFA OTP Enrollment Code screen class methods are:
continue( options ?)
This method continues the MFA OTP enrollment process by submitting the OTP code.
import MfaOtpEnrollmentCode from '@auth0/auth0-acul-js/mfa-otp-enrollment-code';
const mfaOtpEnrollmentCode = new MfaOtpEnrollmentCode();
await mfaOtpEnrollmentCode.continue({
code: '123456',
});Was this helpful?
/
| Parameter | Type | Required | Description |
|---|---|---|---|
code |
string | Yes | The code entered by the user. |
tryAnotherMethod( options ?)
This method allows the user to try another MFA method.
import MfaOtpEnrollmentCode from '@auth0/auth0-acul-js/mfa-otp-enrollment-code';
const mfaOtpEnrollmentCode = new MfaOtpEnrollmentCode();
await mfaOtpEnrollmentCode.tryAnotherMethod();Was this helpful?
/
| Parameter | Type | Required | Description |
|---|---|---|---|
[key: string] |
string | number | boolean | undefined | No | Optional data collected from user. |
MFA OTP Enrollment QR screen class
The MFA OTP Enrollment QR screen class provides methods associated with the mfa-otp-enrollment-qr screen.
Import and instantiate the MFA OTP Enrollment QR screen class:
import MfaOtpEnrollmentQr from '@auth0/auth0-acul-js/mfa-otp-enrollment-qr';
const mfaOtpEnrollmentQr = new MfaOtpEnrollmentQr();
// SDK Properties return a string, number or boolean
// ex. "login-id"
mfaOtpEnrollmentQr.screen.name;
// SDK Methods return an object or array
await mfaOtpEnrollmentQr.continue({ code: '123456' });Was this helpful?
/
Properties
The MFA OTP Enrollment QR 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 | { qr_code: string;};
isCaptchaAvailable: boolean;
links: null | Record<string, string>;
name: string;
texts: null | Record<string, string>;
}
interface CaptchaContext {
image?: string;
provider: string;
siteKey?: 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 | ShortEntity<"device">[];
enrolledEmails: null | ShortEntity<"email">[];
enrolledFactors: null | string[];
enrolledPhoneNumbers: null | ShortEntity<"phoneNumber">[];
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;
}
ShortEntity<Key>: {
id: number;
} & Record<Key, string>Was this helpful?
/
Methods
The MFA OTP Enrollment QR screen class methods are:
continue( options ?)
This method continues the MFA OTP enrollment QR process by submitting the OTP code.
import MfaOtpEnrollmentQr from '@auth0/auth0-acul-js/mfa-otp-enrollment-qr';
const mfaOtpEnrollmentQr = new MfaOtpEnrollmentQr();
await mfaOtpEnrollmentQr.continue({ code: '123456' });Was this helpful?
/
| 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. |
toggleView( options ?)
This method navigates to the authenticator selection screen.
import MfaOtpEnrollmentQr from '@auth0/auth0-acul-js/mfa-otp-enrollment-qr';
const mfaOtpEnrollmentQr = new MfaOtpEnrollmentQr();
await mfaOtpEnrollmentQr.toggleView();Was this helpful?
/
| Parameter | Type | Required | Description |
|---|---|---|---|
rememberBrowser |
boolean | No | Remember the user's browser configuration. |
[key: string] |
string | number | boolean | undefined | No | Optional data collected from user. |
tryAnotherMethod( options ?)
This method allows the user to try another MFA method.
import MfaOtpEnrollmentQr from '@auth0/auth0-acul-js/mfa-otp-enrollment-qr';
const mfaOtpEnrollmentQr = new MfaOtpEnrollmentQr();
await mfaOtpEnrollmentQr.tryAnotherMethod();Was this helpful?
/
| Parameter | Type | Required | Description |
|---|---|---|---|
rememberBrowser |
boolean | No | Remember the user's browser configuration. |
[key: string] |
string | number | boolean | undefined | No | Optional data collected from user. |