Universal Components pour les applications Web

Découvrez comment installer et configurer Auth0 Universal Components pour les applications Web.

La bibliothèque Auth0 Universal Components for Web offre une interface utilisateur préconçue et intégrable aux flux d’identité Auth0, utilisant React et Next.js.

Universal Components for Web repose sur les Auth0 SDKs et s’intègre à la My Organization API pour offrir une administration déléguée intégrée, notamment la gestion des Organizations, des domaines et des fournisseurs SSO.

​

Prérequis

Pour utiliser Auth0 Universal Components pour le Web :

• Vous devez avoir un compte Auth0 et configurer un tenant Auth0 avec l’API My Organization activée.
• Enregistrez votre application Auth0. Si vous n’avez pas encore d’application Auth0, consultez les Quickstarts Auth0 pour React ou Next.js.
• Pour l’authentification côté client, installez React v.16.11+.
• Pour l’authentification côté serveur, installez Next.js v.13+.

React

​

Installer Universal Components

npm

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

​

Configurer 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 challenges d'authentification renforcée par popup Universal Login
    >
      <Auth0ComponentProvider domain={domain}>
        {/* Les composants de votre application */}
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

2. Importez Universal Components :

OrganizationManagementPage.tsx

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

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

Le Auth0ComponentProvider gère l’authentification, la mise en cache, l’internationalisation et les notifications toast 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 les styles de tous les composants. Si vous utilisez Tailwind v4, ajoutez @import "@auth0/universal-components-react/tailwind" à votre fichier CSS.

Utilisez des variables CSS pour personnaliser votre image de marque :

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

Pour en savoir plus, consultez Styliser Universal Components.

Next.js

​

Installer Universal Components

Vous n’avez pas besoin de @auth0/auth0-react. La mise en œuvre pour Next.js utilise le mode proxy avec une authentification côté serveur.

npm

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

​

Configurer votre application

1. Encapsulez votre application avec Auth0Provider et Auth0ComponentProvider :

   Dans votre fichier de mise en page racine, ajoutez Auth0ComponentProvider en mode proxy. Auth0Provider est configuré séparément dans votre configuration Next.js (généralement dans layout.tsx à l’aide de @auth0/nextjs-auth0).

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 Universal Components :

page.tsx

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

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

​

Configurer Universal Components

Le Auth0ComponentProvider gère l’authentification, la mise en cache, l’internationalisation et les notifications toast de tous les 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 les styles de tous les composants. Si vous utilisez Tailwind v4, ajoutez @import "@auth0/universal-components-react/tailwind" à votre fichier CSS.

Utilisez des variables CSS pour personnaliser votre image de marque :

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

Pour en savoir plus, consultez Style d’Universal Components.

shadcn

​

Installer Universal Components

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

npx shadcn@latest init

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

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

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

​

Configurez votre application

1. Encapsulez 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 traiter les challenges d'authentification renforcée au moyen du popup 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 Universal Components

Le Auth0ComponentProvider gère l’authentification, la mise en cache, l’internationalisation et les notifications toast 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. Aucune importation de styles supplémentaire n’est nécessaire.

Utilisez des variables CSS pour personnaliser votre image de marque :

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

Pour en savoir plus, consultez Styliser Universal Components.

​

Exemples de mise en œuvre

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 de mise en œuvre complets

Démo en direct de SaaStart

Découvrez les composants My Organization dans l’application SaaS B2B de référence en direct

Dépôt de démarrage SaaS

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

​

Prochaines étapes

Configurer Auth0ComponentProvider

Synchronisez l’authentification, l’internationalisation, la personnalisation du thème, les notifications toast et la mise en cache dans tous les composants.

Personnaliser les styles et les thèmes

Personnalisez le système Design à l’aide de Tailwind CSS, de variables CSS et de préréglages de thèmes intégrés.

Créer une interface Delegated Admin

Utilisez l’API My Organization pour permettre à vos clients de gérer leurs propres Organizations, domaines et fournisseurs SSO.