Passer au contenu principal
Accès anticipé : cette fonctionnalité est actuellement proposée en accès anticipé. En l’utilisant, vousacceptez les conditions d’essai gratuit applicables dans le Contrat d’abonnement principal d’Okta. [En apprendre plus à propos des étapes de publication→](/docs/troubleshoot/product-lifecycle/product-release-stages)

Informations requises

Compte Auth0: inscription à l’URL auth0.comReact 16.11+: Ce package prend en charge React 16.11.0 et versions ultérieures, incluant React 17, 18, et 19 – Tailwind CSS 3+ : suivez le guide Guide d’installation de Tailwind CSS

Installation

npm install @auth0/universal-components-react react-hook-form @auth0/auth0-react
npm/pnpm : installe le package avec les dépendances paires requises (react-hook-form et @auth0/auth0-react).shadcn : installe le code source du composant et la dépendance @auth0/universal-components-core pour les utilitaires partagés et l’intégration Auth0.

Démarrage rapide

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 authDetails = {
  domain: import.meta.env.VITE_AUTH0_DOMAIN,
};

function App() {
  return (
    <Auth0Provider
      domain={authDetails.domain}
      clientId={import.meta.env.VITE_AUTH0_CLIENT_ID}
      authorizationParams={{
        redirect_uri: window.location.origin,
      }}
    >
      <Auth0ComponentProvider authDetails={authDetails}>
        {/* Your app components */}
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

2. Utilisez un composant universel Auth0

Les composants exigent une configuration Auth0 du locataire. Consultez la page de chaque composant et ses exigences de configuration.
OrganizationManagementPage.tsx
importer { useAuth0 } from "@auth0/auth0-react";
importer { OrganizationDetailsEdit } à partir de "@auth0/universal-components-react/spa";

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

  if (isLoading) return <div>Chargement...</div>;
  if (!isAuthenticated) return <div>Veuillez vous connecter</div>;

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

Configuration

Auth0ComponentProvider gère l’authentification, la mise en cache, l’internationalisation et les notifications toast pour tous les composants.
<Auth0ComponentProvider
  authDetails={{ domain: "your-tenant.auth0.com" }}
  i18n={{ currentLanguage: "en" }}
  themeSettings={{ mode: "light", theme: "default" }}
>
  {/* Your app components */}
</Auth0ComponentProvider>

Auth0ComponentProvider

Configurer l’authentification, le thème, l’internationalisation, les notifications toast et les options de mise en cache des requêtes TanStack

Style

L’importation de la feuille de style dans le démarrage rapide (@auth0/universal-components-react/styles) active tous les styles de composants.
**Utilisateurs de Tailwind v4 :**ajoutez @import "@auth0/universal-components-react/tailwind" à votre fichier CSS.**Utilisateurs de shadcn :**aucune importation nécessaire, les styles sont déjà inclus dans votre configuration Tailwind.
Effectuez la personnalisation avec des variables CSS pour qu’elle corresponde à votre marque :
:root {
  --primary: #4f46e5; /* your brand color */
  --primary-foreground: #ffffff; /* text on buttons */
}

Styling & Theming Guide

Apprennez comment personnaliser l’apparence des composants pour qu’elle corresponde à votre image de marque, y compris les préréglages de thèmes, la prise en charge du mode sombre, les variables CSS et les options de style

Exemples de mises en œuvre

Consultez des exemples fonctionnels complets dans les modèles d’application.

Code Examples

Modèles d’applications React SPA (npm), React SPA (shadcn), et Next.js complètes avec schémas de mise en œuvre