Passer au contenu principal
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+.

​
Installez les composants universels

npm install @auth0/universal-components-react react-hook-form @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>
  );
}
  1. Importez les composants Universal :
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 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.

​
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