> ## 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.

# Universal Components pour les applications Web

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

export const ReleaseStageNotice = ({feature, stage, plans, contact, terms}) => {
  const stageTextMap = {
    "beta": "bêta",
    "ea": "Accès anticipé"
  };
  const stageText = stageTextMap[stage] || "une phase de lancement du produit";
  const prsLink = "/docs/troubleshoot/product-lifecycle/product-release-stages";
  const linkify = (text, url) => {
    return <a href={url} target="_blank" rel="noreferrer" class="link">{text}</a>;
  };
  const includeDetails = (plans, contact, terms) => {
    const hasDetails = terms || plans || contact;
    if (!hasDetails) return null;
    return <span data-as="p">
            {plans && <>Cette fonctionnalité est offerte avec les forfaits {linkify(`${plans}`, "https://auth0.com/pricing")}. </>}
            {contact && "Pour y participer, communiquez avec " + contact + ". "}
            {terms && <>En utilisant cette fonctionnalité, vous acceptez les conditions applicables de l’essai gratuit énoncées dans le {linkify("Master Subscription Agreement", "https://www.okta.com/legal")} d’Okta.</>}
        </span>;
  };
  return <Warning>
            <span data-as="p">
                <strong>La fonctionnalité {feature} est en {linkify(stageText, prsLink)}.</strong>
            </span>

            {includeDetails(plans, contact, terms)}
        </Warning>;
};

<ReleaseStageNotice feature="Auth0 Universal Components" stage="ea" terms="true" contact="Auth0 Support" />

La bibliothèque Auth0 [Universal Components for Web](https://github.com/auth0/auth0-ui-components) offre une interface utilisateur préconçue et intégrable aux flux d’identité Auth0, utilisant [React](https://react.dev/) et [Next.js](https://nextjs.org/).

Universal Components for Web repose sur les [Auth0 SDKs](/docs/fr-ca/libraries) et s’intègre à la [My Organization API](/docs/fr-ca/api/myorganization) pour offrir une administration déléguée intégrée, notamment la gestion des Organizations, des domaines et des fournisseurs SSO.

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

Pour utiliser Auth0 Universal Components pour le Web :

* Vous devez [avoir un compte Auth0](https://auth0.com) et configurer un tenant Auth0 avec l’API My Organization activée.
* [Enregistrez votre application Auth0](/docs/fr-ca/get-started/auth0-overview/create-applications). Si vous n’avez pas encore d’application Auth0, consultez les [Quickstarts](https://auth0.com/docs/quickstart/spa/react) 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+**.

<Tabs>
  <Tab title="React">
    ## Installer Universal Components

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

      ```bash pnpm wrap lines 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, ainsi que `react-hook-form` (une dépendance pair) et `@auth0/auth0-react` (requis pour l’authentification des SPA côté client). L’onglet Next.js utilise le mode proxy et ne nécessite pas `@auth0/auth0-react`.
      </Callout>
    </CodeGroup>

    ## Configurer votre application

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

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

    2. Importez Universal Components :

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

    ```tsx App.tsx wrap lines 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 les styles de tous les composants. Si vous utilisez Tailwind v4, ajoutez `@import
                                  "@auth0/universal-components-react/tailwind"` à votre fichier CSS.
    </Callout>

    Utilisez des variables CSS pour personnaliser votre image de marque :

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

    Pour en savoir plus, consultez [Styliser Universal Components](/docs/fr-ca/get-started/universal-components/web/universal-components-style).
  </Tab>

  <Tab title="Next.js">
    ## Installer Universal Components

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

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

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

    ## 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`](https://github.com/auth0/nextjs-auth0)).

    ```tsx layout.tsx wrap lines 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 Universal Components :

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

    ```tsx layout.tsx wrap lines 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 les styles de tous les composants. Si vous utilisez Tailwind v4, ajoutez `@import
                                  "@auth0/universal-components-react/tailwind"` à votre fichier CSS.
    </Callout>

    Utilisez des variables CSS pour personnaliser votre image de marque :

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

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

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

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

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

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

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

    ## Configurez votre application

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

    ```tsx App.tsx wrap lines 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 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 :

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

    ```tsx App.tsx wrap lines 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. Aucune
      importation de styles supplémentaire n’est nécessaire.
    </Callout>

    Utilisez des variables CSS pour personnaliser votre image de marque :

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

    Pour en savoir plus, consultez [Styliser Universal Components](/docs/fr-ca/get-started/universal-components/web/universal-components-style).
  </Tab>
</Tabs>

<div id="example-implementations">
  ## Exemples de mise en œuvre
</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 de
  mise en œuvre complets
</Card>

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

  <Card title="Dépôt de démarrage SaaS" 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="next-steps">
  ## Prochaines étapes
</div>

<CardGroup cols={2}>
  <Card title="Configurer Auth0ComponentProvider" icon="gear" href="/docs/fr-ca/get-started/universal-components/web/auth0-component-provider">
    Synchronisez l’authentification, l’internationalisation, la personnalisation du thème, les notifications toast et la mise en cache dans tous les composants.
  </Card>

  <Card title="Personnaliser les styles et les thèmes" icon="palette" href="/docs/fr-ca/get-started/universal-components/web/universal-components-style">
    Personnalisez le système Design à l’aide de Tailwind CSS, de variables CSS et de préréglages de thèmes intégrés.
  </Card>

  <Card title="Créer une interface Delegated Admin" icon="users-gear" href="/docs/fr-ca/get-started/universal-components/web/components/build-delegated-admin">
    Utilisez l’API My Organization pour permettre à vos clients de gérer leurs propres Organizations, domaines et fournisseurs SSO.
  </Card>
</CardGroup>