> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Auth0 Universal Components

> Découvrez comment installer et configurer Auth0 Universal Components.

<Warning>
  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](https://www.okta.com/agreements/). Pour en savoir plus, consultez les [phases de
  lancement des produits](/fr-CA/docs/troubleshoot/product-lifecycle/product-release-stages).
</Warning>

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](/fr-CA/docs/libraries) 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](/fr-CA/docs/authenticate/single-sign-on) avec Auth0 ou votre [fournisseur d’identité social ou d’entreprise (IdP)](/fr-CA/docs/authenticate/single-sign-on/outbound-single-sign-on)
* 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.

<div id="how-it-works">
  ## Fonctionnement
</div>

Universal Components sert de couche de présentation entre votre application et Auth0, en coordonnant la communication entre votre application, les API [My Account](/fr-CA/docs/manage-users/my-account-api) et [My Organization](/fr-CA/docs/api/myorganization), 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](https://ui.shadcn.com/docs/components) et les feuilles de style [Tailwind CSS](https://tailwindcss.com/docs/installation/using-vite) pour adapter les composants à votre image de marque et à vos thèmes.

<div id="prerequisites">
  ## Prérequis
</div>

Pour utiliser les Auth0 Universal Components :

* Vous devez [avoir un compte Auth0](https://auth0.com) et configurer un locataire Auth0 avec les API My Account et My Organization activées
* [Enregistrez votre application Auth0](/fr-CA/docs/get-started/auth0-overview/create-applications). Si vous n’avez pas d’application Auth0, vous pouvez commencer par les [guides de démarrage rapide](https://auth0.com/docs/quickstart/spa/react) pour Auth0 React ou Next.js.
* Installez [Shadcn UI](https://ui.shadcn.com/docs/installation) pour créer la bibliothèque de Universal Components
* Installez [Tailwinds CSS v.3](https://tailwindcss.com/docs/installation) 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+**.

<Tabs>
  <Tab title="React">
    ## Installez les composants universels

    <CodeGroup>
      ```bash npm  theme={null}
      npm install @auth0/universal-components-react react-hook-form @auth0/auth0-react
      ```

      ```bash pnpm theme={null}
      pnpm add @auth0/universal-components-react react-hook-form @auth0/auth0-react
      ```

      <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
        Installe le package avec les dépendances de pair requises (`react-hook-form` et `@auth0/auth0-react`).
      </Callout>
    </CodeGroup>

    ## Configurez votre application

    1. Enveloppez votre application avec `Auth0Provider` et `Auth0ComponentProvider` :

    ```tsx App.tsx theme={null}
    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 :

    ```tsx OrganizationManagementPage.tsx theme={null}
    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.

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

    ## Composants de style

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      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.
    </Callout>

    Utilisez des variables CSS pour personnaliser votre image de marque :

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

    Pour en savoir plus, consultez [Styliser les composants universels](/fr-CA/docs/get-started/universal-components/universal-components-style).
  </Tab>

  <Tab title="Next.js">
    ## Installer les composants universels

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      Vous n’avez pas besoin de `@auth0/auth0-react`. L’implémentation Next.js utilise le
      mode proxy avec une authentification côté serveur.
    </Callout>

    <CodeGroup>
      ```bash npm  theme={null}
      npm install @auth0/universal-components-react react-hook-form
      ```

      ```bash pnpm theme={null}
      pnpm add @auth0/universal-components-react react-hook-form
      ```
    </CodeGroup>

    ## Configurer votre application

    1. Enveloppez votre application avec `Auth0Provider` et `Auth0ComponentProvider` :

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

    ```tsx layout.tsx theme={null}
    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 :

    ```tsx page.tsx theme={null}
    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.

    ```tsx layout.tsx theme={null}
    <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

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      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.
    </Callout>

    Utilisez des variables CSS pour personnaliser votre image de marque :

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

    Pour en savoir plus, consultez [Styliser les composants universels](/fr-CA/docs/get-started/universal-components/universal-components-style).
  </Tab>

  <Tab title="shadcn">
    ## Installer Universal Components

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

    ```bash theme={null}
    npx shadcn@latest init
    ```

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

    ```bash theme={null}
    npx shadcn@latest add @auth0/organization-details-edit
    ```

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      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.
    </Callout>

    ## Configurez votre application

    1. Enveloppez votre application avec `Auth0Provider` et `Auth0ComponentProvider` :

    ```tsx App.tsx theme={null}
    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 :

    ```tsx OrganizationManagementPage.tsx theme={null}
    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.

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

    ## Composants de style

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      Les styles de Shadcn sont déjà inclus dans votre build Tailwind. Aucun import
      de style supplémentaire n’est nécessaire.
    </Callout>

    Utilisez des variables CSS pour personnaliser votre image de marque :

    ```css theme={null}
    :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](/fr-CA/docs/get-started/universal-components/universal-components-style).
  </Tab>
</Tabs>

<div id="example-implementations">
  ## Exemples d’implémentation
</div>

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

<Card title="Exemples de code" icon="github" href="https://github.com/auth0/auth0-ui-components/tree/main/examples">
  Applications d’exemple React SPA (npm), React SPA (shadcn) et Next.js avec des
  modèles d’implémentation complets
</Card>

<CardGroup cols={2}>
  <Card title="Démo SaaStart en direct" icon="play" href="https://universal-components-saastart.vercel.app/">
    Voyez les composants My Organization à l’œuvre dans l’application SaaS B2B de référence en direct
  </Card>

  <Card title="Référentiel SaaS Starter" icon="github" href="https://github.com/auth0-ui-components/saas-starter-uicomponents">
    Un point de départ sécurisé et performant pour créer des applications Web SaaS B2B modernes.
  </Card>
</CardGroup>

<div id="learn-more">
  ## En savoir plus
</div>

* [Configurer Auth0ComponentProvider](/fr-CA/docs/get-started/universal-components/auth0-component-provider)
* [Personnaliser le style et les thèmes avec Universal Components](/fr-CA/docs/get-started/universal-components/universal-components-style)