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

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

<div id="how-it-works">
  ## Fonctionnement
</div>

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.

<div id="available-components">
  ### Composants disponibles
</div>

| **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)">
    ## Prérequis

    ### Activer My Account API

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

    ### Créer l’application et configurer les permissions de My Account API

    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>

    ## Configurer votre application

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

    ### Configurer les variables d’environnement

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

    ### Configurer Universal Components

    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 domain={domain}>
            {/* 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)">
    ## Prérequis

    ### Activer My Account API

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

    ### Créer l’application et configurer les permissions de My Account API

    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>

    ### Configurer la base de données et l’utilisateur de test

    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.

    ## Configurer votre application

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

    ### Configurer les variables d’environnement

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

    ### Configurer Universal Components

    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 le rendu des composants My Account.
      * Les composants chargent automatiquement les méthodes d’authentification de l’utilisateur connecté à partir de l’API My Account.
    </Callout>
  </Tab>

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

    ### Activer My Account API

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

    ### Créer l’application et configurer les permissions de My Account API

    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>

    ### Configurer la base de données et l’utilisateur de test

    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.

    ## Configurer votre application

    ### Installer le composant

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

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

    ### Configurer les variables d’environnement

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

    ### Configurer Universal Components

    Importez `Auth0Provider` et `Auth0ComponentProvider`, puis définissez `interactiveErrorHandler="popup"` afin que les demandes d’inscription et de suppression MFA soient traitées dans une fenêtre contextuelle plutôt que de rediriger l’utilisateur vers une autre 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 domain={domain}>
            {/* 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 l’API My Account.
    </Callout>
  </Tab>
</Tabs>

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

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