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

# Gestion de l’AMF utilisateur

> Découvrez comment afficher une interface à cartes permettant aux utilisateurs d’inscrire, de consulter et de supprimer leurs propres facteurs d’authentification multifacteur à l’aide de l’API My Account.

export const ReleaseStageNotice = ({feature, stage, plans, contact, terms}) => {
  const stageTextMap = {
    "beta": "bêta",
    "ea": "Accès anticipé"
  };
  const stageText = stageTextMap[stage] || "une phase de lancement du produit";
  const prsLink = "/docs/troubleshoot/product-lifecycle/product-release-stages";
  const linkify = (text, url) => {
    return <a href={url} target="_blank" rel="noreferrer" class="link">{text}</a>;
  };
  const includeDetails = (plans, contact, terms) => {
    const hasDetails = terms || plans || contact;
    if (!hasDetails) return null;
    return <span data-as="p">
            {plans && <>Cette fonctionnalité est offerte avec les forfaits {linkify(`${plans}`, "https://auth0.com/pricing")}. </>}
            {contact && "Pour y participer, communiquez avec " + contact + ". "}
            {terms && <>En utilisant cette fonctionnalité, vous acceptez les conditions applicables de l’essai gratuit énoncées dans le {linkify("Master Subscription Agreement", "https://www.okta.com/legal")} d’Okta.</>}
        </span>;
  };
  return <Warning>
            <span data-as="p">
                <strong>La fonctionnalité {feature} est en {linkify(stageText, prsLink)}.</strong>
            </span>

            {includeDetails(plans, contact, terms)}
        </Warning>;
};

<ReleaseStageNotice feature="Auth0 Universal Components" stage="beta" terms="true" contact="Auth0 Support" />

Le composant `UserMFAManagement` permet aux utilisateurs d’inscrire, de consulter et de supprimer leurs propres facteurs d’authentification multifacteur dans une interface unique sous forme de cartes, grâce à l’[API My Account](/docs/fr-ca/manage-users/my-account-api).

Il utilise les capacités de gestion des [méthodes d’authentification](/docs/fr-ca/manage-users/my-account-api#manage-authentication-methods) de l’API My Account pour afficher une interface complète de gestion des méthodes d’authentification d’un utilisateur.

Avec le composant `UserMFAManagement`, vous n’avez pas à gérer la navigation, à effectuer des requêtes vers des endpoints d’API ni à gérer l’[état](/docs/fr-ca/api/authentication/authorization-code-flow/authorize-application#param-state).

<Frame>
  <img className="block dark:hidden" src="https://mintcdn.com/translations/-d41Muac7Op9CEDm/docs/images/universal-components/my-account/web/user-mfa-management-light.png?fit=max&auto=format&n=-d41Muac7Op9CEDm&q=85&s=5c5a9d87263aa0a6ee5337e57505db7d" alt="Composant Gestion de l’AMF utilisateur affichant les méthodes de vérification disponibles et inscrites" width="688" height="1031" data-path="docs/images/universal-components/my-account/web/user-mfa-management-light.png" />

  <img className="hidden dark:block" src="https://mintcdn.com/translations/lC_NOnQ2Wbrs3KdZ/docs/images/universal-components/my-account/web/user-mfa-management-dark.png?fit=max&auto=format&n=lC_NOnQ2Wbrs3KdZ&q=85&s=f119ea3a1f7ec34bd446f5e4f4ea278d" alt="Composant Gestion de l’AMF utilisateur affichant les méthodes de vérification disponibles et inscrites" width="688" height="1031" data-path="docs/images/universal-components/my-account/web/user-mfa-management-dark.png" />
</Frame>

<div id="supported-factors">
  ## Facteurs pris en charge
</div>

Le composant prend en charge tous les facteurs de méthode d’authentification configurés avec la My Account API.

| **Facteur**                                                                                              | **Ce que le composant affiche**                                                                                                            |
| -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| [Email OTP](/docs/fr-ca/secure/multi-factor-authentication/configure-mfa-email)                          | Saisie de l’adresse courriel → vérification par OTP à 6 chiffres                                                                           |
| [SMS OTP](/docs/fr-ca/secure/multi-factor-authentication/configure-sms-notifications-for-mfa)            | Sélecteur d’indicatif de pays + saisie du numéro de téléphone → vérification par OTP à 6 chiffres                                          |
| [TOTP (application d’authentification)](/docs/fr-ca/secure/multi-factor-authentication/configure-otp)    | Code QR avec clé de saisie manuelle → vérification par OTP à 6 chiffres                                                                    |
| [Notifications push](/docs/fr-ca/secure/multi-factor-authentication/enable-push-notifications-for-mfa)   | Code QR à balayer avec [Auth0 Guardian](/docs/fr-ca/secure/multi-factor-authentication/auth0-guardian) → état « en attente d’approbation » |
| [Clés d’accès](/docs/fr-ca/get-started/universal-components/web/components/user-passkey-management)      | Écran d’information → invite biométrique du système d’exploitation → entrée enregistrée dans la liste                                      |
| [Codes de récupération](/docs/fr-ca/secure/multi-factor-authentication/configure-recovery-codes-for-mfa) | Liste de codes affichée une seule fois, avec une action de copie et une confirmation « J’ai enregistré mes codes »                         |

<div id="configure-your-application">
  ## Configurez votre application
</div>

Sélectionnez votre framework pour configurer les variables d’environnement et Universal Components.

<Tabs>
  <Tab title="React (SPA)">
    ## Exigences de configuration

    Avant d’afficher le composant `UserMFAManagement`, suivez les instructions de [Build Account Security UI](/docs/fr-ca/get-started/universal-components/web/components/my-account-overview) pour configurer votre tenant Auth0 et vos applications.

    ### Activer les méthodes et les portées MFA

    **Activer les méthodes MFA**

    1. Accédez à [**Dashboard > Sécurité > Multi-factor Auth**](https://manage.auth0.com/dashboard/#/security/mfa).
    2. Activez les facteurs souhaités. Pour en savoir plus, consultez [Multi-Factor Authentication Factors](/docs/fr-ca/secure/multi-factor-authentication/multi-factor-authentication-factors#multi-factor-authentication-factors).

    **Configurer les permissions de My Account API**

    Configurez les permissions d’accès délégué par l’utilisateur de My Account API en suivant les instructions de [Build Account Security UI](/docs/fr-ca/get-started/universal-components/web/components/my-account-overview#create-the-application-and-configure-my-account-api-permissions). Les cinq permissions sont requises pour le flux complet de gestion des méthodes d’authentification.

    ## Installer le composant

    <CodeGroup>
      ```bash pnpm wrap lines theme={null}
      pnpm add @auth0/universal-components-react react-hook-form @tanstack/react-query
      ```

      ```bash npm wrap lines theme={null}
      npm install @auth0/universal-components-react react-hook-form @tanstack/react-query
      ```
    </CodeGroup>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      `react-hook-form` et `@tanstack/react-query` sont des dépendances pairs. La commande installe également la dépendance `@auth0/universal-components-core`, qui fournit des utilitaires partagés et l’intégration à Auth0.
    </Callout>

    ## Pour commencer

    ```tsx wrap lines theme={null}
    import { UserMFAManagement } from "@auth0/universal-components-react";

    export function SecurityPage() {
      return <UserMFAManagement />;
    }
    ```

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      * Les composants sont toujours importés à partir du point d’entrée racine `@auth0/universal-components-react`, quel que soit le framework.
      * Seul le composant `Auth0ComponentProvider` utilise un sous-chemin propre au framework : `/spa` pour les applications React et `/rwa` pour les applications Next.js.
    </Callout>

    <Accordion title="Exemple d’intégration complet">
      ```tsx wrap lines theme={null}
      import React from "react";
      import { UserMFAManagement } from "@auth0/universal-components-react";
      import { Auth0Provider } from "@auth0/auth0-react";
      import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
      import { analytics } from "./lib/analytics";

      function SecurityPage() {
        return (
          <div className="max-w-3xl mx-auto p-6">
            <UserMFAManagement
              factorConfig={{
                phone: { visible: true, enabled: true },
                totp: { visible: true, enabled: true },
                "push-notification": { visible: true, enabled: true },
                email: { visible: true, enabled: true },
                "recovery-code": { visible: true, enabled: true },
                "webauthn-platform": { visible: false },
                "webauthn-roaming": { visible: false },
              }}
              enrollAction={{
                onAfter: (factor) => {
                  analytics.track("MFA Factor Enrolled", { factor });
                },
              }}
              deleteAction={{
                onBefore: (factor) => window.confirm(`Remove your ${factor} authenticator?`),
                onAfter: (factor) => {
                  analytics.track("MFA Factor Deleted", { factor });
                },
              }}
              customMessages={{
                header: {
                  title: "Two-Factor Authentication",
                  description: "Manage the extra verification methods used to protect your account.",
                },
              }}
              styling={{
                variables: {
                  light: { "--color-primary": "#4f46e5" },
                  dark: { "--color-primary": "#818cf8" },
                },
              }}
            />
          </div>
        );
      }

      export default function App() {
        const domain = "YOUR_TENANT_DOMAIN.auth0.com";
        const clientId = "YOUR_CLIENT_ID";

        return (
          <Auth0Provider
            domain={domain}
            clientId={clientId}
            authorizationParams={{ redirect_uri: window.location.origin }}
            interactiveErrorHandler="popup"
          >
            <Auth0ComponentProvider domain={domain}>
              <SecurityPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }
      ```
    </Accordion>
  </Tab>

  <Tab title="Next.js (RWA)">
    ## Exigences de configuration

    Avant d’afficher le composant `UserMFAManagement`, suivez les instructions de [Création d’une interface de sécurité du compte](/docs/fr-ca/get-started/universal-components/web/components/my-account-overview) pour configurer votre tenant Auth0 et vos applications.

    ### Activer les méthodes MFA et les scopes

    **Activer les méthodes MFA**

    1. Accédez à [**Dashboard > Sécurité > Multi-factor Auth**](https://manage.auth0.com/dashboard/#/security/mfa).
    2. Activez les facteurs souhaités. Pour en savoir plus, consultez [Multi-Factor Authentication Factors](/docs/fr-ca/secure/multi-factor-authentication/multi-factor-authentication-factors#multi-factor-authentication-factors).

    **Configurer les permissions de My Account API**

    Configurez les permissions d’accès délégué par l’utilisateur de My Account API dans [Création d’une interface de sécurité du compte](/docs/fr-ca/get-started/universal-components/web/components/my-account-overview#create-the-application-and-configure-my-account-api-permissions). Les cinq permissions sont nécessaires au flux complet de gestion des méthodes d’authentification.

    ## Installer le composant

    <CodeGroup>
      ```bash pnpm wrap lines theme={null}
      pnpm add @auth0/universal-components-react react-hook-form @tanstack/react-query
      ```

      ```bash npm wrap lines theme={null}
      npm install @auth0/universal-components-react react-hook-form @tanstack/react-query
      ```
    </CodeGroup>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      `react-hook-form` et `@tanstack/react-query` sont des dépendances pairs. La commande installe également la dépendance `@auth0/universal-components-core`, qui fournit des utilitaires partagés et l’intégration à Auth0.
    </Callout>

    ## Premiers pas

    ```tsx app/security/page.tsx wrap lines theme={null}
    "use client";

    import { UserMFAManagement } from "@auth0/universal-components-react";

    export default function SecurityPage() {
      return <UserMFAManagement />;
    }
    ```

    <Accordion title="Exemple d’intégration complet">
      ```tsx app/security/page.tsx wrap lines theme={null}
      "use client";

      import { UserMFAManagement } from "@auth0/universal-components-react";
      import { analytics } from "@/lib/analytics";

      export default function SecurityPage() {
        return (
          <div className="max-w-3xl mx-auto p-6">
            <UserMFAManagement
              factorConfig={{
                phone: { visible: true, enabled: true },
                totp: { visible: true, enabled: true },
                "push-notification": { visible: true, enabled: true },
                email: { visible: true, enabled: true },
                "recovery-code": { visible: true, enabled: true },
                "webauthn-platform": { visible: false },
                "webauthn-roaming": { visible: false },
              }}
              enrollAction={{
                onAfter: (factor) => {
                  analytics.track("MFA Factor Enrolled", { factor });
                },
              }}
              deleteAction={{
                onAfter: (factor) => {
                  analytics.track("MFA Factor Deleted", { factor });
                },
              }}
              customMessages={{
                header: { title: "Two-Factor Authentication" },
              }}
              styling={{
                variables: {
                  light: { "--color-primary": "#4f46e5" },
                  dark: { "--color-primary": "#818cf8" },
                },
              }}
            />
          </div>
        );
      }
      ```
    </Accordion>
  </Tab>

  <Tab title="shadcn">
    ## Prérequis de configuration

    Avant d’afficher le composant `UserMFAManagement`, suivez les instructions de [Build Account Security UI](/docs/fr-ca/get-started/universal-components/web/components/my-account-overview) pour configurer votre tenant Auth0 et vos applications.

    ### Activer les méthodes MFA et les scopes

    **Activer les méthodes MFA**

    1. Accédez à [**Dashboard > Sécurité > Authentification multifacteur**](https://manage.auth0.com/dashboard/#/security/mfa).
    2. Activez les facteurs souhaités. Pour en savoir plus, consultez [Multi-Factor Authentication Factors](/docs/fr-ca/secure/multi-factor-authentication/multi-factor-authentication-factors#multi-factor-authentication-factors).

    **Configurer les permissions de My Account API**

    Configurez les permissions d’accès délégué par l’utilisateur de My Account API en suivant les instructions de [Build Account Security UI](/docs/fr-ca/get-started/universal-components/web/components/my-account-overview#create-the-application-and-configure-my-account-api-permissions). Les cinq permissions sont requises pour le flux complet de gestion des méthodes d’authentification.

    ## Installer le composant

    ```bash wrap lines theme={null}
    npx shadcn@latest add https://auth0-universal-components.vercel.app/r/my-account/user-mfa-management.json
    ```

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      La commande d’installation ajoute le code source du composant dans `src/components/auth0/my-account/`, ainsi que toutes les dépendances d’interface utilisateur et la dépendance `@auth0/universal-components-core`, qui fournit des utilitaires partagés et l’intégration à Auth0.
    </Callout>

    ## Pour commencer

    ```tsx wrap lines theme={null}
    import { UserMFAManagement } from "@/components/auth0/my-account/user-mfa-management";

    export function SecurityPage() {
      return <UserMFAManagement />;
    }
    ```

    <Accordion title="Exemple d’intégration complet">
      ```tsx wrap lines theme={null}
      import React from "react";
      import { UserMFAManagement } from "@/components/auth0/my-account/user-mfa-management";
      import { Auth0Provider } from "@auth0/auth0-react";
      import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
      import { analytics } from "./lib/analytics";

      function SecurityPage() {
        return (
          <div className="max-w-3xl mx-auto p-6">
            <UserMFAManagement
              factorConfig={{
                phone: { visible: true, enabled: true },
                totp: { visible: true, enabled: true },
                "push-notification": { visible: true, enabled: true },
                email: { visible: true, enabled: true },
                "recovery-code": { visible: true, enabled: true },
                "webauthn-platform": { visible: false },
                "webauthn-roaming": { visible: false },
              }}
              enrollAction={{
                onAfter: (factor) => {
                  analytics.track("MFA Factor Enrolled", { factor });
                },
              }}
              deleteAction={{
                onBefore: (factor) => window.confirm(`Remove your ${factor} authenticator?`),
                onAfter: (factor) => {
                  analytics.track("MFA Factor Deleted", { factor });
                },
              }}
              customMessages={{
                header: { title: "Two-Factor Authentication" },
              }}
              styling={{
                variables: {
                  light: { "--color-primary": "#4f46e5" },
                  dark: { "--color-primary": "#818cf8" },
                },
              }}
            />
          </div>
        );
      }

      export default function App() {
        const domain = "YOUR_TENANT_DOMAIN.auth0.com";
        const clientId = "YOUR_CLIENT_ID";

        return (
          <Auth0Provider
            domain={domain}
            clientId={clientId}
            authorizationParams={{ redirect_uri: window.location.origin }}
            interactiveErrorHandler="popup"
          >
            <Auth0ComponentProvider domain={domain}>
              <SecurityPage />
            </Auth0ComponentProvider>
          </Auth0Provider>
        );
      }
      ```
    </Accordion>
  </Tab>
</Tabs>

<div id="props">
  ## Propriété
</div>

<div id="display-props">
  ### Propriétés d’affichage
</div>

Les propriétés d’affichage contrôlent la façon dont le composant s’affiche, sans modifier son comportement.

<table class="table">
  <thead>
    <tr>
      <th>Propriété</th>
      <th>Type</th>
      <th>Par défaut</th>
      <th>Description</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><code>hideHeader</code></td>
      <td><code>boolean</code></td>
      <td><code>false</code></td>
      <td>Masque l’en-tête du composant (titre et description).</td>
    </tr>

    <tr>
      <td><code>readOnly</code></td>
      <td><code>boolean</code></td>
      <td><code>false</code></td>
      <td>Désactive toutes les actions de modification (inscription et suppression). Les facteurs sont affichés, mais ne peuvent être ni ajoutés ni supprimés.</td>
    </tr>

    <tr>
      <td><code>showActiveOnly</code></td>
      <td><code>boolean</code></td>
      <td><code>false</code></td>
      <td>Affiche uniquement les types de facteurs pour lesquels l’utilisateur possède au moins une inscription active. Les types de facteurs sans inscription sont masqués.</td>
    </tr>

    <tr>
      <td><code>disableEnroll</code></td>
      <td><code>boolean</code></td>
      <td><code>false</code></td>
      <td>Masque le bouton d’inscription pour tous les types de facteurs. Les utilisateurs peuvent tout de même supprimer les facteurs existants.</td>
    </tr>

    <tr>
      <td><code>disableDelete</code></td>
      <td><code>boolean</code></td>
      <td><code>false</code></td>
      <td>Masque le bouton de suppression dans toutes les lignes de facteurs inscrits. Les utilisateurs peuvent tout de même inscrire de nouveaux facteurs.</td>
    </tr>

    <tr>
      <td><code>factorConfig</code></td>
      <td><code>Partial<br />\<Record\<MFAType,<br />\{ visible?: boolean;<br /> enabled?: boolean }>></code></td>
      <td><code>\{}</code></td>
      <td>Visibilité et état d’activation par type de facteur.</td>
    </tr>
  </tbody>
</table>

**factorConfig**

Utilisez `factorConfig` pour afficher ou griser certains types de facteurs sans modifier la configuration du tenant.
Chaque clé est une `string` correspondant à un type de facteur; les deux champs sont facultatifs et ont la valeur `true` par défaut.

Clés de types de facteurs prises en charge : `phone`, `totp`, `email`, `push-notification`, `webauthn-platform`, `webauthn-roaming`, `recovery-code`.

* `visible` affiche la ligne du facteur dans la liste (`false` pour la masquer).
* `enabled` rend la ligne du facteur interactive (`false` l’affiche grisée et non interactive).

```tsx wrap lines theme={null}
<UserMFAManagement
  factorConfig={{
    phone: { visible: true, enabled: true },
    totp: { visible: true, enabled: true },
    email: { visible: true, enabled: false }, // affiché, mais grisé
    "webauthn-platform": { visible: false },  // complètement masqué
  }}
/>
```

<div id="action-props">
  ### Propriétés d’Action
</div>

Les propriétés d’Action permettent de s’intégrer aux événements du cycle de vie d’inscription et de suppression du composant, ainsi que de déclencher ou d’annuler des opérations.

<table class="table">
  <thead>
    <tr>
      <th>Propriété</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><code>enrollAction</code></td>
      <td><code>ComponentAction\<MFAType></code></td>
      <td>Hooks du cycle de vie de l’inscription d’un facteur. Définissez <code>disabled: true</code> pour désactiver l’action d’inscription.</td>
    </tr>

    <tr>
      <td><code>deleteAction</code></td>
      <td><code>ComponentAction\<MFAType></code></td>
      <td>Hooks du cycle de vie de la suppression d’un facteur. Définissez <code>disabled: true</code> pour désactiver l’action de suppression.</td>
    </tr>
  </tbody>
</table>

**enrollAction**

Utilisez `onBefore` pour annuler l’inscription avant le début du flow. Utilisez `onAfter` pour actualiser l’interface utilisateur associée ou envoyer des données analytiques une fois l’inscription réussie.

```tsx wrap lines theme={null}
<UserMFAManagement
  enrollAction={{
    onBefore: (factor) => window.confirm(`Enroll ${factor}?`),
    onAfter: (factor) => {
      analytics.track("MFA Factor Enrolled", { factor });
    },
  }}
/>
```

**deleteAction**

Utilisez `onBefore` pour annuler la suppression avant que la boîte de dialogue de confirmation intégrée s’affiche. `onAfter` s’exécute après la suppression réussie d’un facteur.

```tsx wrap lines theme={null}
<UserMFAManagement
  deleteAction={{
    onBefore: (factor) =>
      window.confirm(`Remove your ${factor} authenticator? You may be locked out if this is your only factor.`),
    onAfter: (factor) => {
      analytics.track("MFA Factor Deleted", { factor });
    },
  }}
/>
```

<div id="customize-props">
  ### Personnaliser les propriétés
</div>

Les propriétés de personnalisation vous permettent d’adapter le texte, les règles de validation et le style sans modifier le code source.

<table class="table">
  <thead>
    <tr>
      <th>Propriété</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><code>customMessages</code></td>
      <td><code>Partial\<UserMfaManagementMessages></code></td>
      <td>Remplace le texte et les traductions par défaut de l’interface utilisateur.</td>
    </tr>

    <tr>
      <td><code>styling</code></td>
      <td><code>ComponentStyling\<UserMFAManagementClasses></code></td>
      <td>Variables CSS et remplacements de classes.</td>
    </tr>

    <tr>
      <td><code>schema</code></td>
      <td><code>\{ email?: RegExp; phone?: RegExp }</code></td>
      <td>Modèles de validation personnalisés pour les champs de saisie d’adresse courriel et de numéro de téléphone.</td>
    </tr>
  </tbody>
</table>

**customMessages**

Personnalisez tous les textes et toutes les traductions. Chaque champ est facultatif.

<Accordion title="Messages disponibles">
  **En-tête** `header.title`, `header.description`, `no_active_mfa`, `loading_text`, `component_error.title`, `component_error.description`

  **Actions** `actions.remove_button_label`, `actions.cancel_button_label`, `actions.confirm_button_label`, `actions.continue_button_label`, `actions.submit_button_label`, `actions.verify_button_label`, `actions.back_button_label`, `actions.deleting_button_text`, `actions.menu_aria_label`

  **Par type de facteur** (remplacez `{factor}` par `phone`, `totp`, `email`, `push-notification`, `webauthn-platform`, `webauthn-roaming` ou `recovery-code`) `factors.{factor}.title`, `factors.{factor}.description`, `factors.{factor}.button_text`

  **Inscription et suppression** `enrollment` et `remove_factor_dialog`
</Accordion>

```tsx wrap lines theme={null}
<UserMFAManagement
  customMessages={{
    header: {
      title: "Two-Factor Authentication",
      description: "Add extra layers of security to protect your account.",
    },
    no_active_mfa: "You haven't enrolled any authentication methods yet.",
    factors: {
      phone: {
        title: "Text message (SMS)",
        description: "Receive a one-time code via text message.",
        button_text: "Add method",
      },
      totp: {
        title: "Authenticator app",
        description: "Use Google Authenticator, Authy, or any TOTP app.",
      },
    },
    notifications: {
      fetch_factors_error: "Unable to load your security methods.",
    },
  }}
/>
```

**Personnaliser le style**

Personnalisez l’apparence à l’aide de variables CSS et de surcharges de classes. Prend en charge les thèmes clair et sombre.

<Accordion title="Options de style disponibles">
  **Variables**—propriétés CSS personnalisées

  * `common` S’applique aux deux thèmes
  * `light` Mode clair seulement
  * `dark` Mode sombre seulement

  **Surcharges de classes**

  * `UserMFAManagement-item` conteneur de chaque carte de type de facteur
  * `EnrollFactorModal-dialogContent` zone de contenu de la boîte de dialogue d’inscription à plusieurs étapes
  * `FactorDeleteModal-dialogContent` zone de contenu de la boîte de dialogue de confirmation de suppression
</Accordion>

```tsx wrap lines theme={null}
<UserMFAManagement
  styling={{
    variables: {
      light: { "--color-primary": "#4f46e5" },
      dark: { "--color-primary": "#818cf8" },
    },
    classes: {
      "UserMFAManagement-item": "rounded-2xl shadow-md border-2",
      "EnrollFactorModal-dialogContent": "max-w-lg",
      "FactorDeleteModal-dialogContent": "max-w-sm",
    },
  }}
/>
```

**schema**

Remplacez les motifs d’expression régulière intégrés utilisés pour valider les données saisies par l’utilisateur lors de l’inscription. Les deux champs sont facultatifs ; les champs non définis conservent leurs motifs par défaut.

* `email` valide l’adresse courriel saisie lors de l’inscription par OTP par courriel (par défaut : motif standard de type RFC 5322).
* `phone` valide le numéro de téléphone saisi lors de l’inscription par SMS (par défaut : accepte le format international E.164).

```tsx wrap lines theme={null}
<UserMFAManagement
  schema={{
    // Limiter au domaine de l'entreprise uniquement
    email: /^[a-zA-Z0-9._%+-]+@example\.com$/,
    // Numéros américains uniquement
    phone: /^\+1[2-9]\d{2}[2-9]\d{6}$/,
  }}
/>
```

<div id="typescript-definitions">
  ## Définitions TypeScript
</div>

```typescript wrap lines theme={null}
type MFAType =
  | "phone"
  | "totp"
  | "email"
  | "push-notification"
  | "webauthn-platform"
  | "webauthn-roaming"
  | "recovery-code";

interface FactorConfigOptions {
  visible?: boolean;
  enabled?: boolean;
}

interface UserMFAManagementClasses {
  "UserMFAManagement-item"?: string;
  "EnrollFactorModal-dialogContent"?: string;
  "FactorDeleteModal-dialogContent"?: string;
}

interface ComponentAction<Item, Context = void> {
  disabled?: boolean;
  onBefore?: (item: Item, context?: Context) => boolean;
  onAfter?: (item: Item, context?: Context) => void | boolean | Promise<boolean>;
}

interface UserMFAManagementProps {
  hideHeader?: boolean;
  showActiveOnly?: boolean;
  disableEnroll?: boolean;
  disableDelete?: boolean;
  readOnly?: boolean;
  factorConfig?: Partial<Record<MFAType, FactorConfigOptions>>;
  customMessages?: Partial<UserMfaManagementMessages>;
  styling?: ComponentStyling<UserMFAManagementClasses>;
  schema?: { email?: RegExp; phone?: RegExp };
  enrollAction?: ComponentAction<MFAType>;
  deleteAction?: ComponentAction<MFAType>;
}
```

<div id="advanced-customization">
  ## Personnalisation avancée
</div>

En plus de la configuration du composant décrite ci-dessus, utilisez le hook `useUserMFA` pour créer une interface personnalisée de gestion de l’AMF.

```tsx wrap lines theme={null}
import { useUserMFA } from "@auth0/universal-components-react";

export function CustomMfaManagement() {
  const {
    factorsByType,
    isLoadingFactors,
    error,
    visibleFactorTypes,
    handleEnroll,
    handleDeleteFactor,
  } = useUserMFA({
    factorConfig: {
      phone: { visible: true, enabled: true },
      totp: { visible: true, enabled: true },
    },
  });

  if (isLoadingFactors) return <p>Loading authentication methods…</p>;
  if (error) return <p role="alert">{error}</p>;

  return (
    <ul>
      {visibleFactorTypes.map((factorType) => (
        <li key={factorType}>
          <button onClick={() => handleEnroll(factorType)}>
            Add {factorType}
          </button>
          {factorsByType[factorType]?.map((factor) => (
            <button
              key={factor.id}
              onClick={() => handleDeleteFactor(factor.id, factorType)}
            >
              Remove {factorType}
            </button>
          ))}
        </li>
      ))}
    </ul>
  );
}
```

Le hook accepte `showActiveOnly`, `readOnly`, `disableDelete`, `factorConfig`, `customMessages`, `enrollAction` et `deleteAction`. Il renvoie les données des facteurs, l’état du chargement et des actions, l’état de l’inscription et de la suppression, ainsi que les gestionnaires nécessaires pour mettre en œuvre les flux d’inscription, de vérification et de suppression.

Utilisez `UserMFAManagement` si vous souhaitez utiliser l’interface intégrée. Si vous utilisez le hook, mettez en œuvre l’interface utilisateur correspondante pour l’inscription, la vérification, les codes de récupération et la suppression des types de facteurs que vous prenez en charge.

<Note>
  `onAfter` dans `enrollAction` et `deleteAction` s’exécute lorsque la notification de réussite se ferme, plutôt qu’immédiatement après la fin de l’action.
</Note>

<div id="learn-more">
  ## En savoir plus
</div>

<CardGroup cols={2}>
  <Card title="Gestion des clés d’accès des utilisateurs" icon="key" href="/docs/fr-ca/get-started/universal-components/web/components/user-passkey-management">
    Gérez les clés d’accès WebAuthn selon le même cycle de vie.
  </Card>

  <Card title="Créer une interface libre-service de sécurité du compte" icon="shield" href="/docs/fr-ca/get-started/universal-components/web/components/my-account-overview">
    Aperçu, prérequis et configuration du framework pour tous les composants My Account.
  </Card>
</CardGroup>