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

# MfaWebAuthnRoamingEnrollmentMembers

Interface définissant les méthodes et propriétés disponibles pour l’écran mfa-webauthn-roaming-enrollment.

````ts Example theme={null}
export interface MfaWebAuthnRoamingEnrollmentMembers extends BaseMembers {
  screen: ScreenMembersOnMfaWebAuthnRoamingEnrollment;
  /**
   * Lance la création des informations d'identification WebAuthn et soumet le résultat au serveur.
   * Cela correspond à l'utilisateur interagissant avec l'invite FIDO Security Keys.
   * @param payload Options personnalisées facultatives à inclure dans la requête.
   * @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 "Essayer une autre méthode" 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>;
}
````

<h2 id="properties">
  Propriétés
</h2>

<ParamField body="branding" type={<span><a href="/docs/fr-ca/libraries/acul/js-sdk/Screens/interfaces/BrandingMembers">BrandingMembers</a></span>} />

<ParamField body="client" type={<span><a href="/docs/fr-ca/libraries/acul/js-sdk/Screens/interfaces/ClientMembers">ClientMembers</a></span>} />

<ParamField body="organization" type={<span><a href="/docs/fr-ca/libraries/acul/js-sdk/Screens/interfaces/OrganizationMembers">OrganizationMembers</a></span>} />

<ParamField body="prompt" type={<span><a href="/docs/fr-ca/libraries/acul/js-sdk/Screens/interfaces/PromptMembers">PromptMembers</a></span>} />

<ParamField body="screen" type={<span><a href="/docs/fr-ca/libraries/acul/js-sdk/Screens/interfaces/ScreenMembersOnMfaWebAuthnRoamingEnrollment">ScreenMembersOnMfaWebAuthnRoamingEnrollment</a></span>} />

<ParamField body="tenant" type={<span><a href="/docs/fr-ca/libraries/acul/js-sdk/Screens/interfaces/TenantMembers">TenantMembers</a></span>} />

<ParamField body="transaction" type={<span><a href="/docs/fr-ca/libraries/acul/js-sdk/Screens/interfaces/TransactionMembers">TransactionMembers</a></span>} />

<ParamField body="untrustedData" type={<span><a href="/docs/fr-ca/libraries/acul/js-sdk/Screens/interfaces/UntrustedDataMembers">UntrustedDataMembers</a></span>} />

<ParamField body="user" type={<span><a href="/docs/fr-ca/libraries/acul/js-sdk/Screens/interfaces/UserMembers">UserMembers</a></span>} />

<h2 id="methods">
  Méthodes
</h2>

<ParamField body="enroll" type="Promise<void>">
  Lance la création de l’information d’identification WebAuthn et envoie le résultat au serveur.
  Cela correspond à l’utilisation de l’invite FIDO Security Keys par l’utilisateur.

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

  const webauthnEnrollment = new MfaWebAuthnRoamingEnrollment();
  try {
    // Cela déclenchera l’invite WebAuthn du navigateur
    const credential = await navigator.credentials.create({ publicKey: webauthnEnrollment.screen.data.passkey.public_key });
    // En général, vous sérialiseriez ici la réponse de l’information d’identification
    const response = JSON.stringify(credential);
    await webauthnEnrollment.enroll({ response });
  } catch (error) {
    console.error('WebAuthn enrollment failed:', error);
    // Gérez l’erreur, par exemple en affichant un message d’erreur à l’utilisateur ou en envoyant les détails de l’erreur
    // await webauthnEnrollment.showError({ error: { name: error.name, message: error.message } });
  }
  ```

  <Expandable title="Paramètres">
    <ParamField body="payload" type={<span><a href="/docs/fr-ca/libraries/acul/js-sdk/Screens/interfaces/CustomOptions">CustomOptions</a></span>}>
      Options personnalisées facultatives à inclure dans la requête.
    </ParamField>
  </Expandable>
</ParamField>

<ParamField body="showError" type="Promise<void>">
  Envoie au serveur les détails d’une erreur WebAuthn provenant du navigateur.
  Cette méthode est utilisée lorsque l’API WebAuthn du navigateur rencontre une erreur.

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

  const webauthnEnrollment = new MfaWebAuthnRoamingEnrollment();
  // Exemple de gestionnaire d’erreurs pour un appel à l’API WebAuthn du navigateur
  const handleError = async (error: any) => {
    console.error('WebAuthn error:', error);
    await webauthnEnrollment.showError({
      error: {
        name: error.name,
        message: error.message,
        // Incluez d’autres propriétés d’erreur pertinentes si elles sont disponibles
      },
    });
  };
  // ... utilisez handleError dans le bloc catch de votre appel à l’API WebAuthn
  ```

  <Expandable title="Paramètres">
    <ParamField body="payload" type={<span><a href="/docs/fr-ca/libraries/acul/js-sdk/Screens/interfaces/ShowErrorOptions">ShowErrorOptions</a></span>}>
      Les options contenant les détails de l’erreur.

      **Propriétés**

      <ParamField body="error" type={<span><a href="/docs/fr-ca/libraries/acul/js-sdk/Screens/interfaces/WebAuthnErrorDetails">WebAuthnErrorDetails</a></span>}>
        Les détails de l’erreur WebAuthn.
      </ParamField>
    </ParamField>
  </Expandable>
</ParamField>

<ParamField body="tryAnotherMethod" type="Promise<void>">
  Permet à l’utilisateur d’essayer une autre méthode d’AMF.
  Cela correspond au bouton « Essayer une autre méthode ».

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

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

  <Expandable title="Paramètres">
    <ParamField body="payload?" type={<span><a href="/docs/fr-ca/libraries/acul/js-sdk/Screens/interfaces/MfaWebAuthnRoamingEnrollmentTryAnotherMethodOptions">MfaWebAuthnRoamingEnrollmentTryAnotherMethodOptions</a></span>}>
      Options personnalisées facultatives à inclure dans la requête.
    </ParamField>
  </Expandable>
</ParamField>