> ## Documentation Index
> Fetch the complete documentation index at: https://docs-staging-quickstart-revamp.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> Learn about ACUL Multi-Factor Authentication Webauthn screen classes

# Multi-Factor Authentication Webauthn screen classes

## MFA Webauthn Change Key Nickname screen class

The <Tooltip tip="Multi-factor authentication (MFA): User authentication process that uses a factor in addition to username and password such as a code via SMS." cta="View Glossary" href="/docs/glossary?term=MFA">MFA</Tooltip> Webauthn Change Key Nickname screen class provides methods associated with the mfa-webauthn-change-key-nickname screen.

<Frame>
  <img src="https://mintcdn.com/docs-staging-quickstart-revamp/fNPG21NgQLCA0axA/images/cdy7uua7fh8z/1qsKiEY1kiRSIYqhORr4nQ/ef11f60e9262e0a794dc34964a91bdee/Screenshot_2025-05-22_at_12.22.51.png?fit=max&auto=format&n=fNPG21NgQLCA0axA&q=85&s=d6224b6a23d227261d7cfd900fe78de2" alt="" width="363" height="489" data-path="images/cdy7uua7fh8z/1qsKiEY1kiRSIYqhORr4nQ/ef11f60e9262e0a794dc34964a91bdee/Screenshot_2025-05-22_at_12.22.51.png" />
</Frame>

Import and instantiate the MFA Webauthn Change Key Nickname screen class:

```js lines
import MfaWebAuthnChangeKeyNickname from "@auth0/auth0-acul-js/mfa-webauthn-change-key-nickname";
const mfaWebAuthnChangeKeyNicknameManager = new MfaWebAuthnChangeKeyNickname();
```

### Properties

The MFA Webauthn Change Key Nickname screen class properties are:

<Tabs>
  <Tab title="branding">
    ```ts lines expandable
    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>;
      };
    }
    ```
  </Tab>

  <Tab title="client">
    ```ts lines
    interface client {
      description: null | string;
      id: string;
      logoUrl: null | string;
      name: string;
      metadata: null | {[key: string]: string;};
    }
    ```
  </Tab>

  <Tab title="organization">
    ```ts lines
    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;
    }
    ```
  </Tab>

  <Tab title="prompt">
    ```ts lines
    interface prompt{
      name: string;
    }
    ```
  </Tab>

  <Tab title="screen">
    ```ts lines
    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;
    }
    ```
  </Tab>

  <Tab title="tenant">
    ```ts lines
    interface tenant {
      enabledFactors: null | string[];
      enabledLocales: null | string[];
      friendlyName: null | string;
      name: null | string;
    }
    ```
  </Tab>

  <Tab title="transaction">
    ```ts lines expandable
    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;
    }
    ```
  </Tab>

  <Tab title="untrustedData">
    ```ts lines
    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;
      };
    }
    ```
  </Tab>

  <Tab title="user">
    ```ts lines
    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>
    ```
  </Tab>
</Tabs>

### 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.

```javascript lines
const mfaWebAuthnChangeKeyNickname = new MfaWebAuthnChangeKeyNickname();
mfaWebAuthnChangeKeyNickname.continueWithNewNickname({
 nickname: 'string'
});
```

<table class="table">
  <thead>
    <tr>
      <th><strong>Parameter</strong></th>
      <th><strong>Type</strong></th>
      <th><strong>Required</strong></th>
      <th><strong>Description</strong></th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><code>nickname</code></td>
      <td>string</td>
      <td>Yes</td>
      <td>The nickame entered by the user.</td>
    </tr>

    <tr>
      <td><code>\[key: string]</code></td>
      <td>string | number | boolean | undefined</td>
      <td>No</td>
      <td>Additional data collected from the user.</td>
    </tr>
  </tbody>
</table>

## MFA Webauthn Enrollment Success screen class

The MFA Webauthn Enrollment Success screen class provides methods associated with the mfa-webauthn-enrollment-success screen.

<Frame>
  <img src="https://mintcdn.com/docs-staging-quickstart-revamp/cn1eMmAiJHX3hF4T/images/cdy7uua7fh8z/Mq86ebcuUuTYSqaRdFJlb/73788cad3f355c41ceb7a4a9e658bddb/Screenshot_2025-05-27_at_19.58.21.png?fit=max&auto=format&n=cn1eMmAiJHX3hF4T&q=85&s=5abe411a3bebf5ad594a3a92a7609857" alt="" width="363" height="492" data-path="images/cdy7uua7fh8z/Mq86ebcuUuTYSqaRdFJlb/73788cad3f355c41ceb7a4a9e658bddb/Screenshot_2025-05-27_at_19.58.21.png" />
</Frame>

Import and instantiate the MFA Webauthn Enrollment Success screen class:

```js lines
import MfaWebAuthnEnrollmentSuccess from "@auth0/auth0-acul-js/mfa-webauthn-enrollment-success";
const mfaWebAuthnEnrollmentSuccessManager = new MfaWebAuthnEnrollmentSuccess();
```

### Properties

The MFA Webauthn Enrollment Success screen class properties are:

<Tabs>
  <Tab title="branding">
    ```ts lines expandable
    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>;
      };
    }
    ```
  </Tab>

  <Tab title="client">
    ```ts lines
    interface client {
      description: null | string;
      id: string;
      logoUrl: null | string;
      name: string;
      metadata: null | {[key: string]: string;};
    }
    ```
  </Tab>

  <Tab title="organization">
    ```ts lines
    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;
    }
    ```
  </Tab>

  <Tab title="prompt">
    ```ts lines
    interface prompt{
      name: string;
    }
    ```
  </Tab>

  <Tab title="screen">
    ```ts lines
    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;
    }
    ```
  </Tab>

  <Tab title="tenant">
    ```ts lines
    interface tenant {
      enabledFactors: null | string[];
      enabledLocales: null | string[];
      friendlyName: null | string;
      name: null | string;
    }
    ```
  </Tab>

  <Tab title="transaction">
    ```ts lines expandable
    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;
    }
    ```
  </Tab>

  <Tab title="untrustedData">
    ```ts lines
    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;
      };
    }
    ```
  </Tab>

  <Tab title="user">
    ```ts lines
    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>
    ```
  </Tab>
</Tabs>

### Methods

The MFA Webauthn Enrollment Success screen class methods is:

#### continue( options? )

This method allows the user to continue the authentication flow after a successful WebAuthn enrollment.

```javascript lines
// 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
  }
}
```

<table class="table">
  <thead>
    <tr>
      <th><strong>Parameter</strong>                 </th>
      <th><strong>Type</strong></th>
      <th><strong>Required</strong></th>
      <th><strong>Description</strong></th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><code>\[key: string]</code></td>
      <td>string | number | boolean | undefined</td>
      <td>No</td>
      <td>Optional data collected from user.</td>
    </tr>
  </tbody>
</table>

## MFA Webauthn Error screen class

The MFA Webauthn Error screen class provides methods associated with the mfa-webauthn-error screen.

<Frame>
  <img src="https://mintcdn.com/docs-staging-quickstart-revamp/TYcLtS8UbiQUCV_p/images/cdy7uua7fh8z/4YEVrKX7HVo2LYWyZGxajt/865744113a4dbf5beff6bbce6587d8dc/Screenshot_2025-05-27_at_20.15.31.png?fit=max&auto=format&n=TYcLtS8UbiQUCV_p&q=85&s=b104514003ac0d4a0d75893567047b9b" alt="" width="363" height="487" data-path="images/cdy7uua7fh8z/4YEVrKX7HVo2LYWyZGxajt/865744113a4dbf5beff6bbce6587d8dc/Screenshot_2025-05-27_at_20.15.31.png" />
</Frame>

Import and instantiate the MFA Webauthn Error screen class:

```js lines
import MfaWebAuthnError from "@auth0/auth0-acul-js/mfa-webauthn-error";
const mfaWebAuthnErrorManager = new MfaWebAuthnError();
```

### Properties

The MFA Webauthn Error screen class properties are:

<Tabs>
  <Tab title="branding">
    ```ts lines expandable
    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>;
      };
    }
    ```
  </Tab>

  <Tab title="client">
    ```ts lines
    interface client {
      description: null | string;
      id: string;
      logoUrl: null | string;
      name: string;
      metadata: null | {[key: string]: string;};
    }
    ```
  </Tab>

  <Tab title="organization">
    ```ts lines
    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;
    }
    ```
  </Tab>

  <Tab title="prompt">
    ```ts lines
    interface prompt{
      name: string;
    }
    ```
  </Tab>

  <Tab title="screen">
    ```ts lines
    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;
    }
    ```
  </Tab>

  <Tab title="tenant">
    ```ts lines
    interface tenant {
      enabledFactors: null | string[];
      enabledLocales: null | string[];
      friendlyName: null | string;
      name: null | string;
    }
    ```
  </Tab>

  <Tab title="transaction">
    ```ts lines expandable
    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;
    }
    ```
  </Tab>

  <Tab title="untrustedData">
    ```ts lines
    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;
      };
    }
    ```
  </Tab>

  <Tab title="user">
    ```ts lines
    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>
    ```
  </Tab>
</Tabs>

### 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).

```javascript lines
const mfaWebAuthnErrorManager = new MfaWebAuthnError();
await mfaWebAuthnErrorManager.noThanks();
```

<table class="table">
  <thead>
    <tr>
      <th><strong>Parameter</strong>                 </th>
      <th><strong>Type</strong></th>
      <th><strong>Required</strong></th>
      <th><strong>Description</strong></th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><code>\[key: string]</code></td>
      <td>string | number | boolean | undefined</td>
      <td>No</td>
      <td>Optional data collected from user.</td>
    </tr>
  </tbody>
</table>

#### tryAgain( options? )

This method allows the user to retry the previous WebAuthn operation.

```javascript lines
const mfaWebAuthnErrorManager = new MfaWebAuthnError();
await mfaWebAuthnErrorManager.tryagain();
```

<table class="table">
  <thead>
    <tr>
      <th><strong>Parameter</strong>                 </th>
      <th><strong>Type</strong></th>
      <th><strong>Required</strong></th>
      <th><strong>Description</strong></th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><code>\[key: string]</code></td>
      <td>string | number | boolean | undefined</td>
      <td>No</td>
      <td>Optional data collected from user.</td>
    </tr>
  </tbody>
</table>

#### tryAnotherMethod( options? )

This method allows the user to choose a different Multi-Factor Authentication method.

```javascript lines
const mfaWebAuthnErrorManager = new MfaWebAuthnError();
await mfaWebAuthnErrorManager.tryAnotherMethod();
```

<table class="table">
  <thead>
    <tr>
      <th><strong>Parameter</strong>                 </th>
      <th><strong>Type</strong></th>
      <th><strong>Required</strong></th>
      <th><strong>Description</strong></th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><code>\[key: string]</code></td>
      <td>string | number | boolean | undefined</td>
      <td>No</td>
      <td>Optional data collected from user.</td>
    </tr>
  </tbody>
</table>

#### 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).

```javascript lines
const mfaWebAuthnErrorManager = new MfaWebAuthnError();
await mfaWebAuthnErrorManager.usePassword();
```

<table class="table">
  <thead>
    <tr>
      <th><strong>Parameter</strong>                 </th>
      <th><strong>Type</strong></th>
      <th><strong>Required</strong></th>
      <th><strong>Description</strong></th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><code>\[key: string]</code></td>
      <td>string | number | boolean | undefined</td>
      <td>No</td>
      <td>Optional data collected from user.</td>
    </tr>
  </tbody>
</table>

## MFA Webauthn Not Available Error screen class

The MFA Webauthn Not Available Error screen class provides methods associated with the mfa-webauthn-platform-not-available-error screen.

<Frame>
  <img src="https://mintcdn.com/docs-staging-quickstart-revamp/TO6FS4AgTzQGgpsU/images/cdy7uua7fh8z/3TbCxY8cZNbhwmuZJ2ekCY/36dac0216ce83db1f93ab2423c9e0843/mfa-webauthn-not-available-error.png?fit=max&auto=format&n=TO6FS4AgTzQGgpsU&q=85&s=04138823f3967a219288a68c6edf533a" alt="" width="363" height="494" data-path="images/cdy7uua7fh8z/3TbCxY8cZNbhwmuZJ2ekCY/36dac0216ce83db1f93ab2423c9e0843/mfa-webauthn-not-available-error.png" />
</Frame>

Import and instantiate the MFA Webauthn Not Available Error screen class:

```js lines
import MfaWebAuthnNotAvailableError from "@auth0/auth0-acul-js/mfa-webauthn-not-available-error";
const mfaWebAuthnNotAvailableErrorManager = new MfaWebAuthnNotAvailableError();
```

### Properties

The MFA Webauthn Not Available Error screen class properties are:

<Tabs>
  <Tab title="branding">
    ```ts lines expandable
    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>;
      };
    }
    ```
  </Tab>

  <Tab title="client">
    ```ts lines
    interface client {
      description: null | string;
      id: string;
      logoUrl: null | string;
      name: string;
      metadata: null | {[key: string]: string;};
    }
    ```
  </Tab>

  <Tab title="organization">
    ```ts lines
    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;
    }
    ```
  </Tab>

  <Tab title="prompt">
    ```ts lines
    interface prompt{
      name: string;
    }
    ```
  </Tab>

  <Tab title="screen">
    ```ts lines expandable
    interface screen {
      captcha: null | CaptchaContext;
      captchaImage: null | string;
      captchaProvider: null | string;
      captchaSiteKey: null | string;
      data: null | Record<string,
          | string
          | boolean
          | PasskeyCreate
          | string[]
          | PhonePrefix[]>
          | Record<string, string[]>>;
      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;
    }

    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 };
        };
    }
    ```
  </Tab>

  <Tab title="tenant">
    ```ts lines
    interface tenant {
      enabledFactors: null | string[];
      enabledLocales: null | string[];
      friendlyName: null | string;
      name: null | string;
    }
    ```
  </Tab>

  <Tab title="transaction">
    ```ts lines expandable
    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;
    }
    ```
  </Tab>

  <Tab title="untrustedData">
    ```ts lines
    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;
      };
    }
    ```
  </Tab>

  <Tab title="user">
    ```ts lines
    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>
    ```
  </Tab>
</Tabs>

### Methods

The MFA Webauthn Platform Challenge screen class methods are:

#### getError( options? )

This method retrieves the array of transaction errors from context or an empty array if none exist.

```javascript lines
const mfaWebAuthnNotAvailableErrorManager = new MfaWebAuthnNotAvailableError();
await mfaWebAuthnNotAvailableErrorManager.getError();
```

#### tryAnotherMethod( options? )

This method allows the user to try another MFA method. This corresponds to the "Try Another Method" button.

```javascript lines
const mfaWebAuthnNotAvailableErrorManager = new MfaWebAuthnNotAvailableError();

try {
  await mfaWebAuthnNotAvailableErrorManager.tryAnotherMethod();
  // On success, Auth0 typically handles redirection to the MFA factor selection screen.
} catch (error) {
  console.error('Failed to initiate "try another method":', error);
  // Update UI to inform the user about the failure to switch methods.
}
```

<table class="table">
  <thead>
    <tr>
      <th><strong>Parameter</strong>                 </th>
      <th><strong>Type</strong></th>
      <th><strong>Required</strong></th>
      <th><strong>Description</strong></th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><code>\[key: string]</code></td>
      <td>string | number | boolean | undefined</td>
      <td>No</td>
      <td>Optional data collected from user.</td>
    </tr>
  </tbody>
</table>

## MFA Webauthn Platform Challenge screen class

The MFA Webauthn Platform Challenge screen class provides methods associated with the mfa-webauthn-platform-challenge screen.

<Frame>
  <img src="https://mintcdn.com/docs-staging-quickstart-revamp/AmyDKn5Na0kFZtbL/images/cdy7uua7fh8z/1DFJ4Od7ukDasV7uAPH53P/f4018367fbf636f488cf94b6c6c62fda/Screenshot_2025-05-27_at_20.34.24.png?fit=max&auto=format&n=AmyDKn5Na0kFZtbL&q=85&s=52b6e3b5f3d5776c5ae8051b2268421c" alt="" width="363" height="488" data-path="images/cdy7uua7fh8z/1DFJ4Od7ukDasV7uAPH53P/f4018367fbf636f488cf94b6c6c62fda/Screenshot_2025-05-27_at_20.34.24.png" />
</Frame>

Import and instantiate the MFA Webauthn Platform Challenge screen class:

```js lines
import MfaWebAuthnPlatformChallenge from "@auth0/auth0-acul-js/mfa-webauthn-platform-challenge";
const mfaWebAuthnPlatformChallengeManager = new MfaWebAuthnPlatformChallenge();
```

### Properties

The MFA Webauthn Platform Challenge screen class properties are:

<Tabs>
  <Tab title="branding">
    ```ts lines expandable
    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>;
      };
    }
    ```
  </Tab>

  <Tab title="client">
    ```ts lines
    interface client {
      description: null | string;
      id: string;
      logoUrl: null | string;
      name: string;
      metadata: null | {[key: string]: string;};
    }
    ```
  </Tab>

  <Tab title="organization">
    ```ts lines
    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;
    }
    ```
  </Tab>

  <Tab title="prompt">
    ```ts lines
    interface prompt{
      name: string;
    }
    ```
  </Tab>

  <Tab title="screen">
    ```ts lines expandable
    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;
    }
    ```
  </Tab>

  <Tab title="tenant">
    ```ts lines
    interface tenant {
      enabledFactors: null | string[];
      enabledLocales: null | string[];
      friendlyName: null | string;
      name: null | string;
    }
    ```
  </Tab>

  <Tab title="transaction">
    ```ts lines expandable
    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;
    }
    ```
  </Tab>

  <Tab title="untrustedData">
    ```ts lines
    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;
      };
    }
    ```
  </Tab>

  <Tab title="user">
    ```ts lines
    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>
    ```
  </Tab>
</Tabs>

### 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.

```javascript lines
const mfaWebAuthnPlatformChallengeManager = new MfaWebAuthnPlatformChallenge();
await mfaWebAuthnPlatformChallengeManager.reportBrowserError( {
  error: 'message'
});
```

<table class="table">
  <thead>
    <tr>
      <th><strong>Parameter</strong></th>
      <th><strong>Type</strong></th>
      <th><strong>Required</strong></th>
      <th><strong>Description</strong></th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><code>error</code></td>
      <td>message: string | name: string</td>
      <td>Yes</td>
      <td>The error object from the WebAuthn API (navigator.credentials.get()) to be reported.</td>
    </tr>

    <tr>
      <td><code>\[key: string]</code></td>
      <td>string | number | boolean | undefined</td>
      <td>No</td>
      <td>Additional data collected from the user.</td>
    </tr>
  </tbody>
</table>

#### tryAnotherMethod( options? )

This method allows the user to opt-out of the WebAuthn platform challenge and select a different MFA method.

```javascript lines
const mfaWebAuthnPlatformChallengeManager = new MfaWebAuthnPlatformChallenge();
await mfaWebAuthnPlatformChallengeManager.tryAnotherMethod();
```

<table class="table">
  <thead>
    <tr>
      <th><strong>Parameter</strong>                 </th>
      <th><strong>Type</strong></th>
      <th><strong>Required</strong></th>
      <th><strong>Description</strong></th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><code>\[key: string]</code></td>
      <td>string | number | boolean | undefined</td>
      <td>No</td>
      <td>Optional data collected from user.</td>
    </tr>
  </tbody>
</table>

#### verify( options? )

This method initiates the WebAuthn platform authenticator challenge.

```javascript lines
const mfaWebAuthnPlatformChallengeManager = new MfaWebAuthnPlatformChallenge();
await mfaWebAuthnPlatformChallengeManager.verify();
```

<table class="table">
  <thead>
    <tr>
      <th><strong>Parameter</strong></th>
      <th><strong>Type</strong></th>
      <th><strong>Required</strong></th>
      <th><strong>Description</strong></th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><code>rememberDevice</code></td>
      <td>boolean</td>
      <td>No</td>
      <td>Remember the browser for future MFA challenges. Corresponds to the rememberBrowser form field. This is only applicable if screen.showRememberDevice is true.</td>
    </tr>

    <tr>
      <td><code>\[key: string]</code></td>
      <td>string | number | boolean | undefined</td>
      <td>No</td>
      <td>Additional data collected from the user.</td>
    </tr>
  </tbody>
</table>

## MFA Webauthn Platform Enrollment screen class

The MFA Webauthn Platform Enrollment screen class provides methods associated with the mfa-webauthn-platform-enrollment screen.

<Frame>
  <img src="https://mintcdn.com/docs-staging-quickstart-revamp/0yzvW89mU3tfXF-c/images/cdy7uua7fh8z/6hWi1hV5cPw336LB0JHYvM/7833f62a4339322bc55744c0477c4787/Screenshot_2025-05-27_at_21.04.27.png?fit=max&auto=format&n=0yzvW89mU3tfXF-c&q=85&s=c7391ae73165890b2915c00fe2295f43" alt="" width="363" height="489" data-path="images/cdy7uua7fh8z/6hWi1hV5cPw336LB0JHYvM/7833f62a4339322bc55744c0477c4787/Screenshot_2025-05-27_at_21.04.27.png" />
</Frame>

Import and instantiate the MFA Webauthn Platform Enrollment screen class:

```js lines
import MfaWebAuthnPlatformEnrollment from "@auth0/auth0-acul-js/mfa-webauthn-platform-enrollment";
const mfaWebAuthnPlatformEnrollmentManager = new MfaWebAuthnPlatformEnrollment();
```

### Properties

The MFA Webauthn Platform Enrollment screen class properties are:

<Tabs>
  <Tab title="branding">
    ```ts lines expandable
    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>;
      };
    }
    ```
  </Tab>

  <Tab title="client">
    ```ts lines
    interface client {
      description: null | string;
      id: string;
      logoUrl: null | string;
      name: string;
      metadata: null | {[key: string]: string;};
    }
    ```
  </Tab>

  <Tab title="organization">
    ```ts lines
    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;
    }
    ```
  </Tab>

  <Tab title="prompt">
    ```ts lines
    interface prompt{
      name: string;
    }
    ```
  </Tab>

  <Tab title="screen">
    ```ts lines expandable
    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;
    }
    ```
  </Tab>

  <Tab title="tenant">
    ```ts lines
    interface tenant {
      enabledFactors: null | string[];
      enabledLocales: null | string[];
      friendlyName: null | string;
      name: null | string;
    }
    ```
  </Tab>

  <Tab title="transaction">
    ```ts lines expandable
    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;
    }
    ```
  </Tab>

  <Tab title="untrustedData">
    ```ts lines
    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;
      };
    }
    ```
  </Tab>

  <Tab title="user">
    ```ts lines
    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>
    ```
  </Tab>
</Tabs>

### 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.

```javascript lines
const mfaWebAuthnPlatformEnrollmentManager = new MfaWebAuthnPlatformEnrollment();
    mfaWebAuthnPlatformEnrollmentManager.refuseEnrollmentOnThisDevice();
```

<table class="table">
  <thead>
    <tr>
      <th><strong>Parameter</strong>                 </th>
      <th><strong>Type</strong></th>
      <th><strong>Required</strong></th>
      <th><strong>Description</strong></th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><code>\[key: string]</code></td>
      <td>string | number | boolean | undefined</td>
      <td>No</td>
      <td>Optional data collected from user.</td>
    </tr>
  </tbody>
</table>

#### reportBrowserError( options? )

This method reports a browser-side error encountered during the WebAuthn `navigator.credentials.create()` operation.

```javascript lines
const mfaWebAuthnPlatformEnrollmentManager = new MfaWebAuthnPlatformEnrollment();
await mfaWebAuthnPlatformEnrollmentManager.reportBrowserError( {
  error: 'message'
});
```

<table class="table">
  <thead>
    <tr>
      <th><strong>Parameter</strong></th>
      <th><strong>Type</strong></th>
      <th><strong>Required</strong></th>
      <th><strong>Description</strong></th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><code>error</code></td>
      <td>message: string | name: string</td>
      <td>Yes</td>
      <td>The error object from the WebAuthn API (navigator.credentials.get()) to be reported.</td>
    </tr>

    <tr>
      <td><code>\[key: string]</code></td>
      <td>string | number | boolean | undefined</td>
      <td>No</td>
      <td>Additional data collected from the user.</td>
    </tr>
  </tbody>
</table>

#### snoozeEnrollment( options? )

This method allows the user to choose to snooze the WebAuthn platform enrollment.

```javascript lines
const mfaWebAuthnPlatformEnrollmentManager = new MfaWebAuthnPlatformEnrollment();
    mfaWebAuthnPlatformEnrollmentManager.snoozeEnrollment();
```

<table class="table">
  <thead>
    <tr>
      <th><strong>Parameter</strong>                 </th>
      <th><strong>Type</strong></th>
      <th><strong>Required</strong></th>
      <th><strong>Description</strong></th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><code>\[key: string]</code></td>
      <td>string | number | boolean | undefined</td>
      <td>No</td>
      <td>Optional data collected from user.</td>
    </tr>
  </tbody>
</table>

#### 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()`).

```javascript lines
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 } });
  }
}
```

<table class="table">
  <thead>
    <tr>
      <th><strong>Parameter</strong>                 </th>
      <th><strong>Type</strong></th>
      <th><strong>Required</strong></th>
      <th><strong>Description</strong></th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><code>\[key: string]</code></td>
      <td>string | number | boolean | undefined</td>
      <td>No</td>
      <td>Optional data collected from user.</td>
    </tr>
  </tbody>
</table>

## MFA Webauthn Roaming Challenge screen class

The MFA Webauthn Roaming Challenge screen class provides methods associated with the mfa-webauthn-roaming-challenge screen.

<Frame>
  <img src="https://mintcdn.com/docs-staging-quickstart-revamp/TU1OUbCB6Vk1Wu6L/images/cdy7uua7fh8z/joy7T4RglZYOlWItGk5Xm/0a4b2477cba476281ce05f2605acfb12/Screenshot_2025-05-28_at_11.40.56.png?fit=max&auto=format&n=TU1OUbCB6Vk1Wu6L&q=85&s=f3b3ad7f01156822b2b7aa3a07cdfd0b" alt="" width="363" height="489" data-path="images/cdy7uua7fh8z/joy7T4RglZYOlWItGk5Xm/0a4b2477cba476281ce05f2605acfb12/Screenshot_2025-05-28_at_11.40.56.png" />
</Frame>

Import and instantiate the MFA Webauthn Roaming Challenge screen class:

```js lines
import MfaWebAuthnRoamingChallenge from "@auth0/auth0-acul-js/mfa-webauthn-roaming-challenge";
const mfaWebAuthnRoamingChallengeManager = new MfaWebAuthnRoamingChallenge();
```

### Properties

The MFA Webauthn Roaming Challenge screen class properties are:

<Tabs>
  <Tab title="branding">
    ```ts lines expandable
    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>;
      };
    }
    ```
  </Tab>

  <Tab title="client">
    ```ts lines
    interface client {
      description: null | string;
      id: string;
      logoUrl: null | string;
      name: string;
      metadata: null | {[key: string]: string;};
    }
    ```
  </Tab>

  <Tab title="organization">
    ```ts lines
    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;
    }
    ```
  </Tab>

  <Tab title="prompt">
    ```ts lines
    interface prompt{
      name: string;
    }
    ```
  </Tab>

  <Tab title="screen">
    ```ts lines expandable
    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;
    }
    ```
  </Tab>

  <Tab title="tenant">
    ```ts lines
    interface tenant {
      enabledFactors: null | string[];
      enabledLocales: null | string[];
      friendlyName: null | string;
      name: null | string;
    }
    ```
  </Tab>

  <Tab title="transaction">
    ```ts lines expandable
    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;
    }
    ```
  </Tab>

  <Tab title="untrustedData">
    ```ts lines
    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;
      };
    }
    ```
  </Tab>

  <Tab title="user">
    ```ts lines
    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>
    ```
  </Tab>
</Tabs>

### 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}"`.

```text lines
try {
  await mfaWebAuthnRoamingChallengeManager.reportWebAuthnError({
    error: { name: webAuthnError.name, message: webAuthnError.message }
  });
} catch (submitError) {
  console.error("Failed to report WebAuthn error:", submitError);
}
```

<table class="table">
  <thead>
    <tr>
      <th><strong>Parameter</strong></th>
      <th><strong>Type</strong></th>
      <th><strong>Required</strong></th>
      <th><strong>Description</strong></th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><code>error</code></td>
      <td>message: string | name: string</td>
      <td>Yes</td>
      <td>The error object from the WebAuthn API (navigator.credentials.get()) to be reported.</td>
    </tr>

    <tr>
      <td><code>\[key: string]</code></td>
      <td>string | number | boolean | undefined</td>
      <td>No</td>
      <td>Additional data collected from the user.</td>
    </tr>
  </tbody>
</table>

#### tryAnotherMethod( options? )

This method allows the user to opt-out of the WebAuthn challenge and select a different MFA method.

```text lines
try {
  await mfaWebAuthnRoamingChallengeManager.tryAnotherMethod();
  // On success, Auth0 handles redirection to MFA selection.
} catch (error) {
  console.error("Failed to switch MFA method:", error);
}
```

<table class="table">
  <thead>
    <tr>
      <th><strong>Parameter</strong>                 </th>
      <th><strong>Type</strong></th>
      <th><strong>Required</strong></th>
      <th><strong>Description</strong></th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><code>\[key: string]</code></td>
      <td>string | number | boolean | undefined</td>
      <td>No</td>
      <td>Optional data collected from user.</td>
    </tr>
  </tbody>
</table>

#### verify( options? )

This method initiates the WebAuthn platform authenticator challenge by calling `navigator.credentials.get()` with the options provided in `screen.data.publicKeyChallengeOptions`.

```js lines
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.
}
```

<table class="table">
  <thead>
    <tr>
      <th><strong>Parameter</strong></th>
      <th><strong>Type</strong></th>
      <th><strong>Required</strong></th>
      <th><strong>Description</strong></th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><code>rememberDevice</code></td>
      <td>boolean</td>
      <td>No</td>
      <td>Remember the browser for future MFA challenges. Corresponds to the rememberBrowser form field. This is only applicable if screen.showRememberDevice is true.</td>
    </tr>

    <tr>
      <td><code>\[key: string]</code></td>
      <td>string | number | boolean | undefined</td>
      <td>No</td>
      <td>Additional data collected from the user.</td>
    </tr>
  </tbody>
</table>

## MFA Webauthn Roaming Enrollment screen class

The MFA Webauthn Roaming Enrollment screen class provides methods associated with the mfa-webauthn-roaming-enrollment screen.

<Frame>
  <img src="https://mintcdn.com/docs-staging-quickstart-revamp/KCEsvkqT5-VRQ297/images/cdy7uua7fh8z/71Il3P3UP1Z2mpY9LdjHUQ/31e9f3e51bec04cdd0f4e78b744f6472/Screenshot_2025-05-28_at_12.19.06.png?fit=max&auto=format&n=KCEsvkqT5-VRQ297&q=85&s=d330cdbac3e6a11f6d8616f0f67cd3de" alt="" width="363" height="488" data-path="images/cdy7uua7fh8z/71Il3P3UP1Z2mpY9LdjHUQ/31e9f3e51bec04cdd0f4e78b744f6472/Screenshot_2025-05-28_at_12.19.06.png" />
</Frame>

Import and instantiate the MFA Webauthn Roaming Enrollment screen class:

```js lines
import MfaWebAuthnRoamingEnrollment from "@auth0/auth0-acul-js/mfa-webauthn-roaming-enrollment";
const mfaWebAuthnRoamingEnrollmentManager = new MfaWebAuthnRoamingEnrollment();
```

### Properties

The MFA Webauthn Roaming Enrollment screen class properties are:

<Tabs>
  <Tab title="branding">
    ```ts lines expandable
    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>;
      };
    }
    ```
  </Tab>

  <Tab title="client">
    ```ts lines
    interface client {
      description: null | string;
      id: string;
      logoUrl: null | string;
      name: string;
      metadata: null | {[key: string]: string;};
    }
    ```
  </Tab>

  <Tab title="organization">
    ```ts lines
    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;
    }
    ```
  </Tab>

  <Tab title="prompt">
    ```ts lines
    interface prompt{
      name: string;
    }
    ```
  </Tab>

  <Tab title="screen">
    ```ts lines expandable
    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;
    }
    ```
  </Tab>

  <Tab title="tenant">
    ```ts lines
    interface tenant {
      enabledFactors: null | string[];
      enabledLocales: null | string[];
      friendlyName: null | string;
      name: null | string;
    }
    ```
  </Tab>

  <Tab title="transaction">
    ```ts lines expandable
    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;
    }
    ```
  </Tab>

  <Tab title="untrustedData">
    ```ts lines
    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;
      };
    }
    ```
  </Tab>

  <Tab title="user">
    ```ts lines
    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>
    ```
  </Tab>
</Tabs>

### 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.

```js lines
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 ... *&#x2F; };
await webauthnEnrollment.enroll({ response: JSON.stringify(credentialResponse) });
```

<table class="table">
  <thead>
    <tr>
      <th><strong>Parameter</strong>                 </th>
      <th><strong>Type</strong></th>
      <th><strong>Required</strong></th>
      <th><strong>Description</strong></th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><code>\[key: string]</code></td>
      <td>string | number | boolean | undefined</td>
      <td>No</td>
      <td>Optional data collected from user.</td>
    </tr>
  </tbody>
</table>

#### 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.

```js lines
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.',
  },
});
```

<table class="table">
  <thead>
    <tr>
      <th><strong>Parameter</strong></th>
      <th><strong>Type</strong></th>
      <th><strong>Required</strong></th>
      <th><strong>Description</strong></th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><code>error</code></td>
      <td>message: string | name: string</td>
      <td>Yes</td>
      <td>The error object from the WebAuthn API (navigator.credentials.get()) to be reported.</td>
    </tr>

    <tr>
      <td><code>\[key: string]</code></td>
      <td>string | number | boolean | undefined</td>
      <td>No</td>
      <td>Additional data collected from the user.</td>
    </tr>
  </tbody>
</table>

#### tryAnotherMethod( options? )

This method allows the user to try another MFA method. This corresponds to the "Try Another Method" button.

```js lines
import MfaWebAuthnRoamingEnrollment from '@auth0/auth0-acul-js/mfa-webauthn-roaming-enrollment';

const webauthnEnrollment = new MfaWebAuthnRoamingEnrollment();
await webauthnEnrollment.tryAnotherMethod();
```

<table class="table">
  <thead>
    <tr>
      <th><strong>Parameter</strong>                 </th>
      <th><strong>Type</strong></th>
      <th><strong>Required</strong></th>
      <th><strong>Description</strong></th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><code>\[key: string]</code></td>
      <td>string | number | boolean | undefined</td>
      <td>No</td>
      <td>Optional data collected from user.</td>
    </tr>
  </tbody>
</table>