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.

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.

​

Fonctionnement

Les composants My Account utilisent les endpoints de l’My Account API dédiés aux méthodes d’authentification pour afficher une interface de gestion de l’authentification dans votre application.

L’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.

Lorsqu’un utilisateur authentifié ouvre l’écran des paramètres de son compte, le SDK Auth0 récupère un jeton d’accès 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 au nom de l’utilisateur connecté, de sorte que chaque utilisateur ne peut consulter et modifier que ses propres méthodes d’authentification.

​

Composants disponibles

Composant	Endpoint d’API
UserMFAManagement 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 Enregistrer et révoquer des clés d’accès WebAuthn.	/me/v1/authentication-methods (type : passkey)

• 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 Auth0, consultez Créer une interface d’administration déléguée.

React (SPA)

​

Prérequis

​

Activer My Account API

1. Accédez à Dashboard > Applications > 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, 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.

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

​

Configurer votre application

​

Installer le composant

pnpm

pnpm add @auth0/universal-components-react react-hook-form @tanstack/react-query

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.

​

Configurer les variables d’environnement

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

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.

App.tsx

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>
  );
}

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

Next.js (RWA)

​

Prérequis

​

Activer My Account API

1. Accédez à Dashboard > Applications > 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, 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.

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

​

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

1. Accédez à Dashboard > Authentication > 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.
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

pnpm

pnpm add @auth0/universal-components-react react-hook-form @tanstack/react-query

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.

​

Configurer les variables d’environnement

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

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.

​

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.

app/layout.tsx

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>
  );
}

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

shadcn

​

Prérequis

​

Activer My Account API

1. Accédez à Dashboard > Applications > 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, 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.

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

​

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

1. Accédez à Dashboard > Authentication > 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.
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 :

MFA management

npx shadcn@latest add https://auth0-universal-components.vercel.app/r/my-account/user-mfa-management.json

Passkey management

npx shadcn@latest add https://auth0-universal-components.vercel.app/r/my-account/user-passkey-management.json

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.

​

Configurer les variables d’environnement

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

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.

App.tsx

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>
  );
}

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

​

En savoir plus

Configurer la gestion de la MFA des utilisateurs

Référence des facteurs MFA : props, personnalisation, définitions TypeScript et sous-composants avancés.

Configurer la gestion des clés d’accès des utilisateurs

Référence de la gestion des clés d’accès : hooks, remplacements de messages et sélecteurs de classes CSS.