Multi-Factor Authentication Webauthn screen classes
MFA Webauthn Change Key Nickname screen class
The MFA Webauthn Change Key Nickname screen class provides methods associated with the mfa-webauthn-change-key-nickname screen.
Import and instantiate the MFA Webauthn Change Key Nickname screen class:
import MfaWebAuthnChangeKeyNickname from "@auth0/auth0-acul-js/mfa-webauthn-change-key-nickname";
const mfaWebAuthnChangeKeyNicknameManager = new MfaWebAuthnChangeKeyNickname();Was this helpful?
/
Properties
The MFA Webauthn Change Key Nickname 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 | { nickname: 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 Webauthn Change Key Nickname screen class methods is:
continueWithNewNickname( options? )
This method submits the new nickname provided by the user for their WebAuthn security key.
const mfaWebAuthnChangeKeyNickname = new MfaWebAuthnChangeKeyNickname();
mfaWebAuthnChangeKeyNickname.continueWithNewNickname({
nickname: 'string'
});Was this helpful?
/
| Parameter | Type | Required | Description |
|---|---|---|---|
nickname |
string | Yes | The nickame entered by the user. |
[key: string] |
string | number | boolean | undefined | No | Additional data collected from the user. |
MFA Webauthn Enrollment Success screen class
The MFA Webauthn Enrollment Success screen class provides methods associated with the mfa-webauthn-enrollment-success screen.
Import and instantiate the MFA Webauthn Enrollment Success screen class:
import MfaWebAuthnEnrollmentSuccess from "@auth0/auth0-acul-js/mfa-webauthn-enrollment-success";
const mfaWebAuthnEnrollmentSuccessManager = new MfaWebAuthnEnrollmentSuccess();Was this helpful?
/
Properties
The MFA Webauthn Enrollment Success 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 | { nickname: string; webauthnType: WebAuthnType };
isCaptchaAvailable: boolean;
links: null | Record<string, string>;
name: string;
texts: null | Record<string, string>;
}
interface CaptchaContext {
image?: string;
provider: string;
siteKey?: string;
}
interface WebAuthnType {
webauthn-roaming: string;
webauthn-platform: 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 Webauthn Enrollment Success screen class methods is:
continue( options? )
This methods allows the user to continue the authentication flow after a successful WebAuthn enrollment.
// Assuming 'mfaWebAuthnEnrollmentSuccessManager' is an instance of MfaWebAuthnEnrollmentSuccess
async function handleContinueClick() {
try {
await mfaWebAuthnEnrollmentSuccessManager.continue();
// User will be redirected by Auth0.
} catch (error) {
console.error("Error continuing after WebAuthn enrollment success:", error);
// Display error message to the user, potentially from mfaWebAuthnEnrollmentSuccessManager.transaction.errors
}
}Was this helpful?
/
| Parameter | Type | Required | Description |
|---|---|---|---|
[key: string] |
string | number | boolean | undefined | No | Optional data collected from user. |
MFA Webauthn Error screen class
The MFA Webauthn Error screen class provides methods associated with the mfa-webauthn-error screen.
Import and instantiate the MFA Webauthn Error screen class:
import MfaWebAuthnError from "@auth0/auth0-acul-js/mfa-webauthn-error";
const mfaWebAuthnErrorManager = new MfaWebAuthnError();Was this helpful?
/
Properties
The MFA Webauthn Error 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 | { errorType: string; webauthnType: WebAuthnType };
isCaptchaAvailable: boolean;
links: null | Record<string, string>;
name: string;
texts: null | Record<string, string>;
}
interface CaptchaContext {
image?: string;
provider: string;
siteKey?: string;
}
interface WebAuthnType {
webauthn-roaming: string;
webauthn-platform: 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 Webauthn Error screen class methods are:
noThanks( options? )
This method allows the user to decline the current WebAuthn operation (e.g., refuse to add a device during enrollment).
const mfaWebAuthnErrorManager = new MfaWebAuthnError();
await mfaWebAuthnErrorManager.noThanks();Was this helpful?
/
| Parameter | Type | Required | Description |
|---|---|---|---|
[key: string] |
string | number | boolean | undefined | No | Optional data collected from user. |
tryAgain( options? )
This methods allows the user to retry the previous WebAuthn operation.
const mfaWebAuthnErrorManager = new MfaWebAuthnError();
await mfaWebAuthnErrorManager.tryagain();Was this helpful?
/
| Parameter | Type | Required | Description |
|---|---|---|---|
[key: string] |
string | number | boolean | undefined | No | Optional data collected from user. |
tryAnotherMethod( options? )
This method allows the user to choose a different Multi-Factor Authentication method.
const mfaWebAuthnErrorManager = new MfaWebAuthnError();
await mfaWebAuthnErrorManager.tryAnotherMethod();Was this helpful?
/
| Parameter | Type | Required | Description |
|---|---|---|---|
[key: string] |
string | number | boolean | undefined | No | Optional data collected from user. |
usePassword( options? )
This method allows the user to attempt authentication using their password, if this alternative is configured and appropriate for the current flow (e.g., if password was a prior authentication step or is a valid MFA bypass).
const mfaWebAuthnErrorManager = new MfaWebAuthnError();
await mfaWebAuthnErrorManager.usePassword();Was this helpful?
/
| Parameter | Type | Required | Description |
|---|---|---|---|
[key: string] |
string | number | boolean | undefined | No | Optional data collected from user. |
MFA Webauthn Platform Challenge screen class
The MFA Webauthn Platform Challenge screen class provides methods associated with the mfa-webauthn-platform-challenge screen.
Import and instantiate the MFA Webauthn Platform Challenge screen class:
import MfaWebAuthnPlatformChallenge from "@auth0/auth0-acul-js/mfa-webauthn-platform-challenge";
const mfaWebAuthnPlatformChallengeManager = new MfaWebAuthnPlatformChallenge();Was this helpful?
/
Properties
The MFA Webauthn Platform 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 | Record<string,
| string
| boolean
| PasskeyCreate
| string[]
| Record<string, string[]>
| PhonePrefix[],
>;
isCaptchaAvailable: boolean;
links: null | Record<string, string>;
name: string;
publicKey: null | { challenge: string };
showRememberDevice: boolean;
texts: null | Record<string, string>;
}
interface CaptchaContext {
image?: string;
provider: string;
siteKey?: string;
}
interface PasskeyCreate {
public_key: {
authenticatorSelection: {
residentKey: string;
userVerification: string;
};
challenge: string;
pubKeyCredParams: [{ alg: number; type: string }];
rp: { id: string; name: string };
user: { displayName: string; id: string; name: 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 | 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 Webauthn Platform Challenge screen class methods are:
reportBrowserError( options? )
This method reports a browser-side error encountered during the WebAuthn navigator.credentials.get() operation. It sends the error details to the server with a specific action format.
const mfaWebAuthnPlatformChallengeManager = new MfaWebAuthnPlatformChallenge();
await mfaWebAuthnPlatformChallengeManager.reportBrowserError( {
error: 'message'
});Was this helpful?
/
| Parameter | Type | Required | Description |
|---|---|---|---|
error |
message: string | name: string | Yes | The error object from the WebAuthn API (navigator.credentials.get()) to be reported. |
[key: string] |
string | number | boolean | undefined | No | Additional data collected from the user. |
tryAnotherMethod( options? )
This method allows the user to opt-out of the WebAuthn platform challenge and select a different MFA method.
const mfaWebAuthnPlatformChallengeManager = new MfaWebAuthnPlatformChallenge();
await mfaWebAuthnPlatformChallengeManager.tryAnotherMethod();Was this helpful?
/
| Parameter | Type | Required | Description |
|---|---|---|---|
[key: string] |
string | number | boolean | undefined | No | Optional data collected from user. |
verify( options? )
This method initiates the WebAuthn platform authenticator challenge.
const mfaWebAuthnPlatformChallengeManager = new MfaWebAuthnPlatformChallenge();
await mfaWebAuthnPlatformChallengeManager.verify();Was this helpful?
/
| Parameter | Type | Required | Description |
|---|---|---|---|
rememberDevice |
boolean | No | Remember the browser for future MFA challenges. Corresponds to the rememberBrowser form field. This is only applicable if screen.showRememberDevice is true. |
[key: string] |
string | number | boolean | undefined | No | Additional data collected from the user. |
MFA Webauthn Platform Enrollment screen class
The MFA Webauthn Platform Enrollment screen class provides methods associated with the mfa-webauthn-platform-enrollment screen.
Import and instantiate the MFA Webauthn Platform Enrollment screen class:
import MfaWebAuthnPlatformEnrollment from "@auth0/auth0-acul-js/mfa-webauthn-platform-enrollment";
const mfaWebAuthnPlatformEnrollmentManager = new MfaWebAuthnPlatformEnrollment();Was this helpful?
/
Properties
The MFA Webauthn Platform 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>;
};
}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
| PasskeyCreate
| string[]
| Record<string, string[]>
| PhonePrefix[],
>;
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 PasskeyCreate {
public_key: {
authenticatorSelection: {
residentKey: string;
userVerification: string;
};
challenge: string;
pubKeyCredParams: [{ alg: number; type: string }];
rp: { id: string; name: string };
user: { displayName: string; id: string; name: 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 | 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 Webauthn Platform Enrollment screen class methods are:
refuseEnrollmentOnThisDevice( options? )
This method allows the user to refuse WebAuthn platform enrollment on the current device.
const mfaWebAuthnPlatformEnrollmentManager = new MfaWebAuthnPlatformEnrollment();
mfaWebAuthnPlatformEnrollmentManager.refuseEnrollmentOnThisDevice();Was this helpful?
/
| Parameter | Type | Required | Description |
|---|---|---|---|
[key: string] |
string | number | boolean | undefined | No | Optional data collected from user. |
reportBrowserError( options? )
This method reports a browser-side error encountered during the WebAuthn navigator.credentials.create() operation.
const mfaWebAuthnPlatformEnrollmentManager = new MfaWebAuthnPlatformEnrollment();
await mfaWebAuthnPlatformEnrollmentManager.reportBrowserError( {
error: 'message'
});Was this helpful?
/
| Parameter | Type | Required | Description |
|---|---|---|---|
error |
message: string | name: string | Yes | The error object from the WebAuthn API (navigator.credentials.get()) to be reported. |
[key: string] |
string | number | boolean | undefined | No | Additional data collected from the user. |
snoozeEnrollment( options? )
This method allows the user to choose to snooze the WebAuthn platform enrollment.
const mfaWebAuthnPlatformEnrollmentManager = new MfaWebAuthnPlatformEnrollment();
mfaWebAuthnPlatformEnrollmentManager.snoozeEnrollment();Was this helpful?
/
| Parameter | Type | Required | Description |
|---|---|---|---|
[key: string] |
string | number | boolean | undefined | No | Optional data collected from user. |
submitPasskeyCredential( options? )
This method initiates the WebAuthn platform credential creation process using the public key options available on this.screen.publicKey and submits the resulting credential to the server. This method internally calls createPasskeyCredentials (which wraps navigator.credentials.create()).
const mfaWebAuthnPlatformEnrollmentManager = new MfaWebAuthnPlatformEnrollment();
try {
await mfaWebAuthnPlatformEnrollmentManager.submitPasskeyCredential(); // No need to pass publicKey explicitly
// On success, Auth0 handles redirection.
} catch (error) {
console.error('Passkey enrollment failed:', error);
if (error.name && error.message) { // Check if it looks like a WebAuthn error
await mfaWebAuthnPlatformEnrollmentManager.reportBrowserError({ error: { name: error.name, message: error.message } });
}
}Was this helpful?
/
| Parameter | Type | Required | Description |
|---|---|---|---|
[key: string] |
string | number | boolean | undefined | No | Optional data collected from user. |
MFA Webauthn Roaming Challenge screen class
The MFA Webauthn Roaming Challenge screen class provides methods associated with the mfa-webauthn-roaming-challenge screen.
Import and instantiate the MFA Webauthn Roaming Challenge screen class:
import MfaWebAuthnRoamingChallenge from "@auth0/auth0-acul-js/mfa-webauthn-roaming-challenge";
const mfaWebAuthnRoamingChallengeManager = new MfaWebAuthnRoamingChallenge();Was this helpful?
/
Properties
The MFA Webauthn Roaming 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
| Record<
string,
| string
| boolean
| PasskeyCreate
| string[]
| Record<string, string[]>
| PhonePrefix[],
>;
isCaptchaAvailable: boolean;
links: null | Record<string, string>;
name: string;
publicKey: null | { challenge: string; };
showRememberDevice?: boolean;
texts: null | Record<string, string>;
webauthnType: null | string;
}
interface CaptchaContext {
image?: string;
provider: string;
siteKey?: string;
}
interface PasskeyCreate {
public_key: {
authenticatorSelection: {
residentKey: string;
userVerification: string;
};
challenge: string;
pubKeyCredParams: [{ alg: number; type: string }];
rp: { id: string; name: string };
user: { displayName: string; id: string; name: 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 | 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 Webauthn Roaming Challenge screen class methods are:
reportWebauthn( options? )
This method reports a specific WebAuthn API error to Auth0. This method should be used if navigator.credentials.get() fails in a way that verify() does not automatically handle, or if the developer wants to explicitly report an error before trying another action. It submits the error details with action: "showError::{errorDetails}".
try {
await mfaWebAuthnRoamingChallengeManager.reportWebAuthnError({
error: { name: webAuthnError.name, message: webAuthnError.message }
});
} catch (submitError) {
console.error("Failed to report WebAuthn error:", submitError);
}Was this helpful?
/
| Parameter | Type | Required | Description |
|---|---|---|---|
error |
message: string | name: string | Yes | The error object from the WebAuthn API (navigator.credentials.get()) to be reported. |
[key: string] |
string | number | boolean | undefined | No | Additional data collected from the user. |
tryAnotherMethod( options? )
This method allows the user to opt-out of the WebAuthn challenge and select a different MFA method.
try {
await mfaWebAuthnRoamingChallengeManager.tryAnotherMethod();
// On success, Auth0 handles redirection to MFA selection.
} catch (error) {
console.error("Failed to switch MFA method:", error);
}Was this helpful?
/
| Parameter | Type | Required | Description |
|---|---|---|---|
[key: string] |
string | number | boolean | undefined | No | Optional data collected from user. |
verify( options? )
This method initiates the WebAuthn platform authenticator challenge by calling navigator.credentials.get() with the options provided in screen.data.publicKeyChallengeOptions.
try {
await mfaWebAuthnRoamingChallengeManager.verify({ rememberDevice: true });
// On success, Auth0 handles redirection.
} catch (error) {
console.error("Security key verification failed:", error);
// Check mfaWebAuthnRoamingChallengeManager.transaction.errors for server-side validation messages if the page reloads.
}Was this helpful?
/
| Parameter | Type | Required | Description |
|---|---|---|---|
rememberDevice |
boolean | No | Remember the browser for future MFA challenges. Corresponds to the rememberBrowser form field. This is only applicable if screen.showRememberDevice is true. |
[key: string] |
string | number | boolean | undefined | No | Additional data collected from the user. |
MFA Webauthn Roaming Enrollment screen class
The MFA Webauthn Roaming Enrollment screen class provides methods associated with the mfa-webauthn-roaming-enrollment screen.
Import and instantiate the MFA Webauthn Roaming Enrollment screen class:
import MfaWebAuthnRoamingEnrollment from "@auth0/auth0-acul-js/mfa-webauthn-roaming-enrollment";
const mfaWebAuthnRoamingEnrollmentManager = new MfaWebAuthnRoamingEnrollment();Was this helpful?
/
Properties
The MFA Webauthn Roaming 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>;
};
}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
| PasskeyCreate
| string[]
| Record<string, string[]>
| PhonePrefix[],
>;
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>;
webauthnType: null | string;
}
interface CaptchaContext {
image?: string;
provider: string;
siteKey?: string;
}
interface PasskeyCreate {
public_key: {
authenticatorSelection: {
residentKey: string;
userVerification: string;
};
challenge: string;
pubKeyCredParams: [{ alg: number; type: string }];
rp: { id: string; name: string };
user: { displayName: string; id: string; name: 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 | 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 Webauthn Roaming Enrollment screen class methods are:
enroll( options? )
This method initiates the WebAuthn credential creation and submits the result to the server. This corresponds to the user interacting with the FIDO Security Keys prompt.
import MfaWebAuthnRoamingEnrollment from '@auth0/auth0-acul-js/mfa-webauthn-roaming-enrollment';
const webauthnEnrollment = new MfaWebAuthnRoamingEnrollment();
// Assuming you have obtained the WebAuthn credential response (e.g., from navigator.credentials.create)
const credentialResponse = { /* ... serialized credential ... */ };
await webauthnEnrollment.enroll({ response: JSON.stringify(credentialResponse) });Was this helpful?
/
| Parameter | Type | Required | Description |
|---|---|---|---|
[key: string] |
string | number | boolean | undefined | No | Optional data collected from user. |
showError( options? )
This method submits details about a WebAuthn browser error to the server. This is used when the browser's WebAuthn API encounters an error.
import MfaWebAuthnRoamingEnrollment from '@auth0/auth0-acul-js/mfa-webauthn-roaming-enrollment';
const webauthnEnrollment = new MfaWebAuthnRoamingEnrollment();
await webauthnEnrollment.showError({
error: {
name: 'NotAllowedError',
message: 'The operation either timed out or was not allowed.',
},
});Was this helpful?
/
| Parameter | Type | Required | Description |
|---|---|---|---|
error |
message: string | name: string | Yes | The error object from the WebAuthn API (navigator.credentials.get()) to be reported. |
[key: string] |
string | number | boolean | undefined | No | Additional data collected from the user. |
tryAnotherMethod( options? )
This method allows the user to try another MFA method. This corresponds to the "Try Another Method" button.
import MfaWebAuthnRoamingEnrollment from '@auth0/auth0-acul-js/mfa-webauthn-roaming-enrollment';
const webauthnEnrollment = new MfaWebAuthnRoamingEnrollment();
await webauthnEnrollment.tryAnotherMethod();Was this helpful?
/
| Parameter | Type | Required | Description |
|---|---|---|---|
[key: string] |
string | number | boolean | undefined | No | Optional data collected from user. |