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

# MfaWebAuthnRoamingEnrollmentMembers

Interface defining the available methods and properties for the mfa-webauthn-roaming-enrollment screen.

````ts Example theme={null}
export interface MfaWebAuthnRoamingEnrollmentMembers extends BaseMembers {
  screen: ScreenMembersOnMfaWebAuthnRoamingEnrollment;
  /**
   * Initiates the WebAuthn credential creation and submits the result to the server.
   * This corresponds to the user interacting with the FIDO Security Keys prompt.
   * @param payload Optional custom options to include with the request.
   * @example
   * ```typescript
   * import MfaWebAuthnRoamingEnrollment from '@auth0/auth0-acul-js/mfa-webauthn-roaming-enrollment';
   *
   * const webauthnEnrollment = new MfaWebAuthnRoamingEnrollment();
   * try {
   *   // This will trigger the browser's WebAuthn prompt
   *   const credential = await navigator.credentials.create({ publicKey: webauthnEnrollment.screen.data.passkey.public_key });
   *   // You would typically serialize the credential response here
   *   const response = JSON.stringify(credential);
   *   await webauthnEnrollment.enroll({ response });
   * } catch (error) {
   *   console.error('WebAuthn enrollment failed:', error);
   *   // Handle the error, e.g., show an error message to the user or submit the error details
   *   // await webauthnEnrollment.showError({ error: { name: error.name, message: error.message } });
   * }
   * ```
   */
  enroll(payload: CustomOptions): Promise<void>;
  /**
   * Submits details about a WebAuthn browser error to the server.
   * This is used when the browser's WebAuthn API encounters an error.
   * @param payload The options containing the error details.
   * @example
   * ```typescript
   * import MfaWebAuthnRoamingEnrollment from '@auth0/auth0-acul-js/mfa-webauthn-roaming-enrollment';
   *
   * const webauthnEnrollment = new MfaWebAuthnRoamingEnrollment();
   * // Example error handler for the browser's WebAuthn API call
   * const handleError = async (error: any) => {
   *   console.error('WebAuthn error:', error);
   *   await webauthnEnrollment.showError({
   *     error: {
   *       name: error.name,
   *       message: error.message,
   *       // Include other relevant error properties if available
   *     },
   *   });
   * };
   * // ... use handleError in your WebAuthn API call's catch block
   * ```
   */
  showError(payload: ShowErrorOptions): Promise<void>;
  /**
   * Allows the user to try another MFA method.
   * This corresponds to the "Try Another Method" button.
   * @param payload Optional custom options to include with the request.
   * @example
   * ```typescript
   * import MfaWebAuthnRoamingEnrollment from '@auth0/auth0-acul-js/mfa-webauthn-roaming-enrollment';
   *
   * const webauthnEnrollment = new MfaWebAuthnRoamingEnrollment();
   * await webauthnEnrollment.tryAnotherMethod();
   * ```
   */
  tryAnotherMethod(payload?: TryAnotherMethodOptions): Promise<void>;
}
````

## Properties

<ParamField body="branding" type={<span><a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/BrandingMembers">BrandingMembers</a></span>} />

<ParamField body="client" type={<span><a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/ClientMembers">ClientMembers</a></span>} />

<ParamField body="organization" type={<span><a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/OrganizationMembers">OrganizationMembers</a></span>} />

<ParamField body="prompt" type={<span><a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/PromptMembers">PromptMembers</a></span>} />

<ParamField body="screen" type={<span><a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/ScreenMembersOnMfaWebAuthnRoamingEnrollment">ScreenMembersOnMfaWebAuthnRoamingEnrollment</a></span>} />

<ParamField body="tenant" type={<span><a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/TenantMembers">TenantMembers</a></span>} />

<ParamField body="transaction" type={<span><a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/TransactionMembers">TransactionMembers</a></span>} />

<ParamField body="untrustedData" type={<span><a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/UntrustedDataMembers">UntrustedDataMembers</a></span>} />

<ParamField body="user" type={<span><a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/UserMembers">UserMembers</a></span>} />

## Methods

<ParamField body="enroll" type="Promise<void>">
  Initiates the WebAuthn credential creation and submits the result to the server.
  This corresponds to the user interacting with the FIDO Security Keys prompt.

  ```typescript Example theme={null}
  import MfaWebAuthnRoamingEnrollment from '@auth0/auth0-acul-js/mfa-webauthn-roaming-enrollment';

  const webauthnEnrollment = new MfaWebAuthnRoamingEnrollment();
  try {
    // This will trigger the browser's WebAuthn prompt
    const credential = await navigator.credentials.create({ publicKey: webauthnEnrollment.screen.data.passkey.public_key });
    // You would typically serialize the credential response here
    const response = JSON.stringify(credential);
    await webauthnEnrollment.enroll({ response });
  } catch (error) {
    console.error('WebAuthn enrollment failed:', error);
    // Handle the error, e.g., show an error message to the user or submit the error details
    // await webauthnEnrollment.showError({ error: { name: error.name, message: error.message } });
  }
  ```

  <Expandable title="Parameters">
    <ParamField body="payload" type={<span><a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/CustomOptions">CustomOptions</a></span>}>
      Optional custom options to include with the request.
    </ParamField>
  </Expandable>
</ParamField>

<ParamField body="showError" type="Promise<void>">
  Submits details about a WebAuthn browser error to the server.
  This is used when the browser's WebAuthn API encounters an error.

  ```typescript Example theme={null}
  import MfaWebAuthnRoamingEnrollment from '@auth0/auth0-acul-js/mfa-webauthn-roaming-enrollment';

  const webauthnEnrollment = new MfaWebAuthnRoamingEnrollment();
  // Example error handler for the browser's WebAuthn API call
  const handleError = async (error: any) => {
    console.error('WebAuthn error:', error);
    await webauthnEnrollment.showError({
      error: {
        name: error.name,
        message: error.message,
        // Include other relevant error properties if available
      },
    });
  };
  // ... use handleError in your WebAuthn API call's catch block
  ```

  <Expandable title="Parameters">
    <ParamField body="payload" type={<span><a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/ShowErrorOptions">ShowErrorOptions</a></span>}>
      The options containing the error details.

      **Properties**

      <ParamField body="error" type={<span><a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/WebAuthnErrorDetails">WebAuthnErrorDetails</a></span>}>
        The details of the WebAuthn error.
      </ParamField>
    </ParamField>
  </Expandable>
</ParamField>

<ParamField body="tryAnotherMethod" type="Promise<void>">
  Allows the user to try another MFA method.
  This corresponds to the "Try Another Method" button.

  ```typescript Example theme={null}
  import MfaWebAuthnRoamingEnrollment from '@auth0/auth0-acul-js/mfa-webauthn-roaming-enrollment';

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

  <Expandable title="Parameters">
    <ParamField body="payload?" type={<span><a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/MfaWebAuthnRoamingEnrollmentTryAnotherMethodOptions">MfaWebAuthnRoamingEnrollmentTryAnotherMethodOptions</a></span>}>
      Optional custom options to include with the request.
    </ParamField>
  </Expandable>
</ParamField>