Auth0 Universal Components

Découvrez comment installer et configurer Auth0 Universal Components.

Auth0 Universal Components est actuellement en accès anticipé. En l’utilisant, vous acceptez les conditions applicables de l’essai gratuit figurant dans le Contrat-cadre d’abonnement d’Okta. Pour en savoir plus, consultez les phases de lancement des produits.

Auth0 Universal Components est une bibliothèque de composants d’interface utilisateur préconçus que vous pouvez utiliser pour créer votre pipeline et votre expérience d’identité dans votre application. Conçus à partir des SDK Auth0 selon une approche axée sur les API, les Universal Components vous permettent d’intégrer les services d’Auth0, comme les flux d’authentification, la gestion des organisations et l’inscription à la MFA, sans avoir à créer l’interface utilisateur manuellement ni à gérer des proxys backend hautement privilégiés.

Avec Universal Components, vous pouvez :

• Créer et gérer vos organisations Auth0
• Gérer les rôles et les comptes utilisateur au sein de votre organisation
• Gérer l’authentification unique avec Auth0 ou votre fournisseur d’identité social ou d’entreprise (IdP)
• Personnaliser l’expérience de connexion avec votre propre image de marque et vos thèmes
• Permettre aux utilisateurs de consulter et de mettre à jour les renseignements de leur compte. Cela comprend la possibilité de choisir leurs méthodes d’authentification et de récupération de compte.

​

Fonctionnement

Universal Components sert de couche de présentation entre votre application et Auth0, en coordonnant la communication entre votre application, les API My Account et My Organization, ainsi que les SDK Auth0.

Les SDK Auth0 assurent la logique en gérant les flux d’authentification, l’échange de jetons et la gestion des sessions. L’API My Account offre des fonctionnalités en libre-service qui permettent aux utilisateurs authentifiés de gérer leur expérience d’authentification. Par exemple, les utilisateurs authentifiés peuvent choisir leurs propres méthodes d’authentification, comme MFA ou les clés d’accès. L’API My Organization fournit une interface sécurisée, à portée d’Organisation, qui permet à vos clients de gérer leurs propres Organisations dans votre locataire Auth0. Cette API constitue la base technique de l’administration déléguée intégrée et des intégrations axées sur les API.

Universal Components s’appuie sur les composants Shadcn et les feuilles de style Tailwind CSS pour adapter les composants à votre image de marque et à vos thèmes.

​

Prérequis

Pour utiliser les Auth0 Universal Components :

• Vous devez avoir un compte Auth0 et configurer un locataire Auth0 avec les API My Account et My Organization activées
• Enregistrez votre application Auth0. Si vous n’avez pas d’application Auth0, vous pouvez commencer par les guides de démarrage rapide pour Auth0 React ou Next.js.
• Installez Shadcn UI pour créer la bibliothèque de Universal Components
• Installez Tailwinds CSS v.3 pour personnaliser les composants à l’image de votre marque
• Pour l’authentification côté client, installez React v.16.11+.
• Pour l’authentification côté serveur, installez Next.js v.13+.

React

​

Installez les composants universels

npm

npm install @auth0/universal-components-react react-hook-form @auth0/auth0-react

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

Installe le package avec les dépendances de pair requises (react-hook-form et @auth0/auth0-react).

​

Configurez votre application

1. Enveloppez votre application avec Auth0Provider et Auth0ComponentProvider :

App.tsx

import { Auth0Provider } from "@auth0/auth0-react";
import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
import "@auth0/universal-components-react/styles";

const domain = import.meta.env.VITE_AUTH0_DOMAIN;

function App() {
  return (
    <Auth0Provider
      domain={domain}
      clientId={import.meta.env.VITE_AUTH0_CLIENT_ID}
      authorizationParams={{
        redirect_uri: window.location.origin,
      }}
      interactiveErrorHandler='popup' // Requis pour gérer les défis d'authentification par élévation de privilèges via la fenêtre contextuelle Universal Login
    >
      <Auth0ComponentProvider domain={domain}>
        {/* Les composants de votre application */}
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

2. Importez les composants Universal :

OrganizationManagementPage.tsx

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

function OrganizationManagementPage() {
  const { isAuthenticated, isLoading } = useAuth0();

  if (isLoading) return <div>Loading...</div>;
  if (!isAuthenticated) return <div>Please log in</div>;

  return (
    <div>
      <OrganizationDetailsEdit />
    </div>
  );
}

​

Configurer les composants universels

Le Auth0ComponentProvider gère l’authentification, la mise en cache, l’internationalisation et les notifications éphémères de tous les composants.

App.tsx

<Auth0ComponentProvider
  domain="your-tenant.auth0.com"
  i18n={{ currentLanguage: "en" }}
  themeSettings={{ mode: "light", theme: "default" }}
>
  {/* Les composants de votre application */}
</Auth0ComponentProvider>

​

Composants de style

La feuille de style que vous avez importée (@auth0/universal-components-react/styles) active tous les styles des composants. Si vous utilisez Tailwind v4, ajoutez @import "@auth0/universal-components-react/tailwind" dans votre fichier CSS.

Utilisez des variables CSS pour personnaliser votre image de marque :

:root {
  --primary: #4f46e5; /* couleur de votre marque */
  --primary-foreground: #ffffff; /* texte sur les boutons */
}

Pour en savoir plus, consultez Styliser les composants universels.

Next.js

​

Installer les composants universels

Vous n’avez pas besoin de @auth0/auth0-react. L’implémentation Next.js utilise le mode proxy avec une authentification côté serveur.

npm

npm install @auth0/universal-components-react react-hook-form

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

​

Configurer votre application

1. Enveloppez votre application avec Auth0Provider et Auth0ComponentProvider :

Dans la mise en page /root, ajoutez Auth0ComponentProvider en mode proxy :

layout.tsx

import { Auth0ComponentProvider } from "@auth0/universal-components-react/rwa";
import "@auth0/universal-components-react/styles";

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

2. Importez les composants Universal :

page.tsx

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

export default function OrganizationManagementPage() {
  return (
    <div>
      <OrganizationDetailsEdit />
    </div>
  );
}

​

Configurer les composants universels

Le Auth0ComponentProvider gère l’authentification, la mise en cache, l’internationalisation et les notifications toast pour l’ensemble des composants. Dans Next.js, utilisez le mode proxy pour l’authentification côté serveur.

layout.tsx

<Auth0ComponentProvider
  mode="proxy"
  domain="your-tenant.auth0.com"
  proxyConfig={{ baseUrl: "/api/auth" }}
  i18n={{ currentLanguage: "en" }}
  themeSettings={{ mode: "light", theme: "default" }}
>
  {/* Les composants de votre application */}
</Auth0ComponentProvider>

​

Composants de style

La feuille de style que vous avez importée (@auth0/universal-components-react/styles) active tous les styles des composants. Si vous utilisez Tailwind v4, ajoutez @import "@auth0/universal-components-react/tailwind" dans votre fichier CSS.

Utilisez des variables CSS pour personnaliser votre image de marque :

:root {
  --primary: #4f46e5; /* la couleur de votre marque */
  --primary-foreground: #ffffff; /* texte sur les boutons */
}

Pour en savoir plus, consultez Styliser les composants universels.

shadcn

​

Installer Universal Components

Universal Components utilisent les imports @/.... Commencez par configurer l’alias de chemin et les dépendances du projet :

npx shadcn@latest init

Ensuite, installez les Universal Components individuellement à l’aide de la CLI de Shadcn. Par exemple :

npx shadcn@latest add @auth0/organization-details-edit

Shadcn CLI installe le code source du composant ainsi que la dépendance @auth0/universal-components-core, qui fournit des utilitaires partagés et l’intégration à Auth0.

​

Configurez votre application

1. Enveloppez votre application avec Auth0Provider et Auth0ComponentProvider :

App.tsx

import { Auth0Provider } from "@auth0/auth0-react";
import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";

const domain = import.meta.env.VITE_AUTH0_DOMAIN;

function App() {
  return (
    <Auth0Provider
      domain={domain}
      clientId={import.meta.env.VITE_AUTH0_CLIENT_ID}
      authorizationParams={{
        redirect_uri: window.location.origin,
      }}
      interactiveErrorHandler='popup' // Requis pour gérer les défis d'authentification par élévation de privilèges via la fenêtre contextuelle Universal Login
    >
      <Auth0ComponentProvider domain={domain}>
        {/* Les composants de votre application */}
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

2. Importez Universal Components :

OrganizationManagementPage.tsx

import { OrganizationDetailsEdit } from "@/components/auth0/my-organization/organization-details-edit";

function OrganizationManagementPage() {
  return (
    <div>
      <OrganizationDetailsEdit />
    </div>
  );
}

​

Configurer les composants universels

Le Auth0ComponentProvider gère l’authentification, la mise en cache, l’internationalisation et les notifications éphémères de tous les composants.

App.tsx

<Auth0ComponentProvider
  domain="your-tenant.auth0.com"
  i18n={{ currentLanguage: "en" }}
  themeSettings={{ mode: "light", theme: "default" }}
>
  {/* Les composants de votre application */}
</Auth0ComponentProvider>

​

Composants de style

Les styles de Shadcn sont déjà inclus dans votre build Tailwind. Aucun import de style supplémentaire n’est nécessaire.

Utilisez des variables CSS pour personnaliser votre image de marque :

:root {
  --primary: #4f46e5; /* couleur de votre marque */
  --primary-foreground: #ffffff; /* texte sur les boutons */
}

Pour en savoir plus, consultez Personnalisez le style et les thèmes avec Universal Components.

​

Exemples d’implémentation

Consultez des exemples complets et fonctionnels dans les applications d’exemple.

Exemples de code

Applications d’exemple React SPA (npm), React SPA (shadcn) et Next.js avec des modèles d’implémentation complets

Démo SaaStart en direct

Voyez les composants My Organization à l’œuvre dans l’application SaaS B2B de référence en direct

Référentiel SaaS Starter

Un point de départ sécurisé et performant pour créer des applications Web SaaS B2B modernes.

​

En savoir plus

• Configurer Auth0ComponentProvider
• Personnaliser le style et les thèmes avec Universal Components