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

# Créer une interface de sécurité de compte en libre-service avec My Account API

> Découvrez comment configurer Universal Components pour créer des interfaces de sécurité de compte en libre-service avec My Account API.

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="bêta" terms="true" contact="Auth0 Support" />

Les composants My Account vous permettent d’intégrer directement à votre application Web une interface libre-service de gestion de l’authentification. Vos utilisateurs peuvent inscrire et supprimer des facteurs d’authentification multifacteur (MFA), ainsi que gérer des clés d’accès dans votre application Web.

<h2 id="how-it-works">
  Fonctionnement
</h2>

Les composants My Account utilisent les endpoints de l’[My Account API](/docs/fr-ca/manage-users/my-account-api#manage-authentication-methods) dédiés aux [méthodes d’authentification](/docs/fr-ca/manage-users/my-account-api#manage-authentication-methods) pour afficher une interface de gestion de l’authentification dans votre application.

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  L’[My Account API](/docs/fr-ca/manage-users/my-account-api) applique actuellement des limites de débit peu élevées, particulièrement pour les tenants du niveau Free. Cela peut entraîner des erreurs lors de l’utilisation de ces composants. Voir aussi les [configurations de limitation de débit](/docs/fr-ca/troubleshoot/customer-support/operational-policies/rate-limit-policy/rate-limit-configurations).
</Callout>

Lorsqu’un utilisateur authentifié ouvre l’écran des paramètres de son compte, le SDK Auth0 récupère un [jeton d’accès](/docs/fr-ca/secure/tokens/access-tokens) limité à l’audience de la My Account API.

Les composants utilisent ce jeton pour envoyer une requête à la My Account API [`/me/v1/authentication-methods`](/docs/fr-ca/api/myaccount/authentication-methods/get-authentication-methods) au nom de l’utilisateur connecté, de sorte que chaque utilisateur ne peut consulter et modifier que ses propres méthodes d’authentification.

<h3 id="available-components">
  Composants disponibles
</h3>

| **Composant**                                                                                                                                                                                                                                                                      | **Endpoint d’API**                               |
| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------- |
| [**UserMFAManagement**](/docs/fr-ca/get-started/universal-components/web/components/user-mfa-management) Inscrire et supprimer des facteurs MFA : OTP par courriel, OTP par SMS, TOTP (application d’authentification), notifications push, clés d’accès et codes de récupération. | `/me/v1/authentication-methods`                  |
| [**UserPasskeyManagement**](/docs/fr-ca/get-started/universal-components/web/components/user-passkey-management) Enregistrer et révoquer des clés d’accès WebAuthn.                                                                                                                | `/me/v1/authentication-methods` (type : passkey) |

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  * Ces composants créent des interfaces de **libre-service destinées aux utilisateurs finaux**. Les utilisateurs finaux peuvent eux-mêmes inscrire, afficher et supprimer toutes les méthodes d’authentification de leur compte : OTP par courriel, OTP par SMS, TOTP (application d’authentification), notifications push, clés d’accès et codes de récupération.
  * Pour les interfaces d’**administration déléguée** où un utilisateur gère une [Organization](/docs/fr-ca/manage-users/organizations) Auth0, consultez [Créer une interface d’administration déléguée](/docs/fr-ca/get-started/universal-components/web/components/build-delegated-admin).
</Callout>

<Tabs>
  <Tab title="React (SPA)">
    <h2 id="prerequisites">
      Prérequis
    </h2>

    <h3 id="enable-my-account-api">
      Activer My Account API
    </h3>

    1. Accédez à [**Dashboard > Applications > APIs**](https://manage.auth0.com/#/apis).
    2. Sélectionnez **Activate My Account API** pour l’activer dans votre tenant.

    <h3 id="create-the-application-and-configure-my-account-api-permissions">
      Créer l’application et configurer les permissions de My Account API
    </h3>

    1. Accédez à [**Dashboard > Applications > Applications**](https://manage.auth0.com/#/applications), puis sélectionnez **Create Application**.

    2. Sélectionnez **Applications Web monopages**.

    3. Sélectionnez l’onglet **Settings** et ajoutez les **URL de rappel, de déconnexion et d’origines Web**. Par exemple : `http://localhost:5173`.

    4. Sélectionnez l’onglet **API Access**.

    5. Sélectionnez **Edit** pour **Auth0 My Account API** afin d’ajouter les permissions d’**accès délégué par l’utilisateur** :

       `create:me:authentication_methods`
       `read:me:authentication_methods`
       `update:me:authentication_methods`
       `delete:me:authentication_methods`
       `read:me:factors`

    6. Sélectionnez **Save** pour enregistrer les permissions.

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      * Le jeton d’accès de l’utilisateur comprend uniquement les permissions accordées lors de la connexion.
      * Demandez les cinq scopes pour permettre aux utilisateurs d’inscrire, de consulter et de supprimer des méthodes d’authentification.
    </Callout>

    <h2 id="configure-your-application">
      Configurer votre application
    </h2>

    <h3 id="install-the-component">
      Installer le composant
    </h3>

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

    <h3 id="configure-environment-variables">
      Configurer les variables d’environnement
    </h3>

    Créez un fichier `.env` à la racine de votre projet :

    ```bash wrap lines theme={null}
    VITE_AUTH0_DOMAIN=YOUR_TENANT_DOMAIN.auth0.com
    VITE_AUTH0_CLIENT_ID=YOUR_SPA_CLIENT_ID
    ```

    <h3 id="configure-universal-components">
      Configurer Universal Components
    </h3>

    Importez `Auth0Provider` et `Auth0ComponentProvider`, puis définissez `interactiveErrorHandler="popup"` afin que les challenges d’inscription et de suppression MFA soient gérés dans une fenêtre contextuelle plutôt que de rediriger l’utilisateur hors de la page.

    ```tsx App.tsx wrap lines theme={null}
    import { Auth0Provider } from "@auth0/auth0-react";
    import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";

    const domain = import.meta.env.VITE_AUTH0_DOMAIN;
    const clientId = import.meta.env.VITE_AUTH0_CLIENT_ID;

    export default function App() {
      return (
        <Auth0Provider
          domain={domain}
          clientId={clientId}
          authorizationParams={{ redirect_uri: window.location.origin }}
          interactiveErrorHandler="popup"
        >
          <Auth0ComponentProvider>
            {/* votre application */}
          </Auth0ComponentProvider>
        </Auth0Provider>
      );
    }
    ```

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      * Les utilisateurs doivent être authentifiés avant l’affichage des composants My Account.
      * Les composants chargent automatiquement les méthodes d’authentification de l’utilisateur connecté à partir de la My Account API.
    </Callout>
  </Tab>

  <Tab title="Next.js (RWA)">
    <h2 id="prerequisites-2">
      Prérequis
    </h2>

    <h3 id="enable-my-account-api-2">
      Activer My Account API
    </h3>

    1. Accédez à [**Dashboard > Applications > APIs**](https://manage.auth0.com/#/apis).
    2. Sélectionnez **Activate My Account API** pour l’activer dans votre tenant.

    <h3 id="create-the-application-and-configure-my-account-api-permissions-2">
      Créer l’application et configurer les permissions de My Account API
    </h3>

    1. Accédez à [**Dashboard > Applications > Applications**](https://manage.auth0.com/#/applications), puis sélectionnez **Create Application**.

    2. Sélectionnez **Regular Web Application**.

    3. Sélectionnez l’onglet **Settings** et ajoutez vos **Allowed Callback, and Allowed Logout URLs**. Par exemple : `http://localhost:3000`.

    4. Sélectionnez l’onglet **API Access**.

    5. Sélectionnez **Edit** pour l’**Auth0 My Account API** afin d’ajouter les permissions d’**User-delegated Access** :

       `create:me:authentication_methods`
       `read:me:authentication_methods`
       `update:me:authentication_methods`
       `delete:me:authentication_methods`
       `read:me:factors`

    6. Sélectionnez **Save** pour enregistrer les permissions.

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      * Le jeton d’accès de l’utilisateur comprend uniquement les permissions accordées lors de la connexion.
      * Demandez les cinq scopes pour permettre aux utilisateurs d’inscrire, de consulter et de supprimer des méthodes d’authentification.
    </Callout>

    <h3 id="set-up-the-database-and-test-user">
      Configurer la base de données et l’utilisateur de test
    </h3>

    1. Accédez à [**Dashboard > Authentication > Database**](https://manage.auth0.com/#/connections/database) pour créer une connexion de base de données.
    2. Dans l’onglet **Applications** de la base de données, activez votre application.
    3. Accédez à [**Dashboard > User Management > Users**](https://manage.auth0.com/#/users).
    4. Sélectionnez **Create User** pour créer un utilisateur attribué à la nouvelle connexion de base de données.
    5. Sélectionnez **Create** pour ajouter le nouvel utilisateur, puis utilisez-le pour les tests.

    <h2 id="configure-your-application-2">
      Configurer votre application
    </h2>

    <h3 id="install-the-component-2">
      Installer le composant
    </h3>

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

    <h3 id="configure-environment-variables-2">
      Configurer les variables d’environnement
    </h3>

    Créez un fichier `.env.local` à la racine de votre projet Next.js :

    ```js wrap lines theme={null}
    AUTH0_DOMAIN=https://YOUR_TENANT_DOMAIN.auth0.com
    AUTH0_CLIENT_ID=YOUR_RWA_CLIENT_ID
    AUTH0_CLIENT_SECRET=YOUR_RWA_CLIENT_SECRET
    AUTH0_SECRET=YOUR_AUTH0_SECRET
    APP_BASE_URL=http://localhost:3000
    NEXT_PUBLIC_AUTH0_DOMAIN=https://YOUR_TENANT_DOMAIN.auth0.com
    ```

    Pour obtenir des instructions complètes de configuration du SDK Next.js, consultez la [documentation du SDK Auth0 Next.js](/docs/fr-ca/quickstart/webapp/nextjs).

    <h3 id="configure-universal-components-2">
      Configurer Universal Components
    </h3>

    Ajoutez `Auth0ComponentProvider` à votre layout racine à partir du sous-chemin `/rwa`. Configurez-le en mode proxy afin qu’il puisse utiliser la session Auth0 côté serveur.

    ```tsx app/layout.tsx wrap lines theme={null}
    import { Auth0ComponentProvider } from "@auth0/universal-components-react/rwa";

    export default function RootLayout({ children }: { children: React.ReactNode }) {
      return (
        <html lang="en">
          <body>
            <Auth0ComponentProvider
              domain={process.env.NEXT_PUBLIC_AUTH0_DOMAIN!}
              mode="proxy"
              proxyConfig={{ baseUrl: "/" }}
            >
              {children}
            </Auth0ComponentProvider>
          </body>
        </html>
      );
    }
    ```

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      * Les utilisateurs doivent être authentifiés avant l’affichage des composants My Account.
      * Les composants chargent automatiquement les méthodes d’authentification de l’utilisateur connecté à partir de la My Account API.
    </Callout>
  </Tab>

  <Tab title="shadcn">
    <h2 id="prerequisites-3">
      Prérequis
    </h2>

    <h3 id="enable-my-account-api-3">
      Activer My Account API
    </h3>

    1. Accédez à [**Dashboard > Applications > APIs**](https://manage.auth0.com/#/apis).
    2. Sélectionnez **Activate My Account API** pour l’activer dans votre locataire.

    <h3 id="create-the-application-and-configure-my-account-api-permissions-3">
      Créer l’application et configurer les permissions de My Account API
    </h3>

    1. Accédez à [**Dashboard > Applications > Applications**](https://manage.auth0.com/#/applications), puis sélectionnez **Create Application**.

    2. Sélectionnez **Single Page Web Applications**.

    3. Sélectionnez l’onglet **Settings** et ajoutez les **URL de rappel, de déconnexion et d’origines Web**. Par exemple : `http://localhost:5173`.

    4. Sélectionnez l’onglet **API Access**.

    5. Sélectionnez **Edit** pour **Auth0 My Account API** afin d’ajouter les permissions d’**accès délégué par l’utilisateur** :

       `create:me:authentication_methods`
       `read:me:authentication_methods`
       `update:me:authentication_methods`
       `delete:me:authentication_methods`
       `read:me:factors`

    6. Sélectionnez **Save** pour enregistrer les permissions.

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      * Le jeton d’accès de l’utilisateur inclut uniquement les permissions accordées lors de la connexion.
      * Demandez les cinq portées afin de permettre aux utilisateurs d’inscrire, de consulter et de supprimer des méthodes d’authentification.
    </Callout>

    <h3 id="set-up-the-database-and-test-user-2">
      Configurer la base de données et l’utilisateur de test
    </h3>

    1. Accédez à [**Dashboard > Authentication > Database**](https://manage.auth0.com/#/connections/database) pour créer une connexion à une base de données.
    2. Dans l’onglet **Applications** de la base de données, activez votre application.
    3. Accédez à [**Dashboard > User Management > Users**](https://manage.auth0.com/#/users).
    4. Sélectionnez **Create User** pour créer un utilisateur attribué à la nouvelle connexion à la base de données.
    5. Sélectionnez **Create** pour ajouter le nouvel utilisateur, puis utilisez-le pour les tests.

    <h2 id="configure-your-application-3">
      Configurer votre application
    </h2>

    <h3 id="install-the-component-3">
      Installer le composant
    </h3>

    Exécutez la CLI shadcn pour ajouter les composants directement au code source de votre projet :

    ```bash MFA management wrap lines theme={null}
    npx shadcn@latest add auth0/auth0-ui-components/react/my-account/user-mfa-management
    ```

    ```bash Passkey management wrap lines theme={null}
    npx shadcn@latest add auth0/auth0-ui-components/react/my-account/user-passkey-management
    ```

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

    <details>
      <summary>Ancien registre Vercel (deprecated)</summary>

      Les utilisateurs existants peuvent continuer d’utiliser le chemin hébergé sur Vercel jusqu’au **17 septembre 2026** :

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

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

      Les nouveaux projets devraient utiliser le chemin du registre GitHub ci-dessus.
    </details>

    <h3 id="configure-environment-variables-3">
      Configurer les variables d’environnement
    </h3>

    Créez un fichier `.env.local` à la racine de votre projet :

    ```js wrap lines theme={null}
    VITE_AUTH0_DOMAIN=YOUR_TENANT_DOMAIN.auth0.com
    VITE_AUTH0_CLIENT_ID=YOUR_SPA_CLIENT_ID
    ```

    <h3 id="configure-universal-components-3">
      Configurer Universal Components
    </h3>

    Importez `Auth0Provider` et `Auth0ComponentProvider`, puis définissez `interactiveErrorHandler="popup"` afin que les challenges d’inscription et de suppression MFA soient gérés dans une fenêtre contextuelle plutôt que de rediriger l’utilisateur hors de la page.

    ```tsx App.tsx wrap lines theme={null}
    import { Auth0Provider } from "@auth0/auth0-react";
    import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";

    const domain = import.meta.env.VITE_AUTH0_DOMAIN;
    const clientId = import.meta.env.VITE_AUTH0_CLIENT_ID;

    export default function App() {
      return (
        <Auth0Provider
          domain={domain}
          clientId={clientId}
          authorizationParams={{ redirect_uri: window.location.origin }}
          interactiveErrorHandler="popup"
        >
          <Auth0ComponentProvider>
            {/* votre application */}
          </Auth0ComponentProvider>
        </Auth0Provider>
      );
    }
    ```

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      * Les utilisateurs doivent être authentifiés avant l’affichage des composants My Account.
      * Les composants chargent automatiquement les méthodes d’authentification de l’utilisateur connecté à partir de la My Account API.
    </Callout>
  </Tab>
</Tabs>

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

<CardGroup cols={2}>
  <Card title="Configurer la gestion de la MFA des utilisateurs" icon="gear" href="/docs/fr-ca/get-started/universal-components/web/components/user-mfa-management">
    Référence des facteurs MFA : props, personnalisation, définitions TypeScript et sous-composants avancés.
  </Card>

  <Card title="Configurer la gestion des clés d’accès des utilisateurs" icon="gear" href="/docs/fr-ca/get-started/universal-components/web/components/user-passkey-management">
    Référence de la gestion des clés d’accès : hooks, remplacements de messages et sélecteurs de classes CSS.
  </Card>
</CardGroup>