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

# Configurer Auth0ComponentProvider

> Découvrez comment Auth0ComponentProvider synchronise l’authentification, l’internationalisation, la personnalisation de l’apparence, les notifications toast et les options de mise en cache.

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" />

Le `Auth0ComponentProvider` est la couche d’orchestration des [Auth0 Universal Components](/docs/fr-ca/get-started/universal-components/universal-components-overview). Les SDK Auth0 gèrent les sessions et les jetons, tandis que le `Auth0ComponentProvider` traduit cet état d’identité en un contexte d’interface utilisateur fonctionnel et adapté à l’image de marque. Le `Auth0ComponentProvider` veille à ce que les composants, comme l’inscription à l’AMF, disposent des permissions, des données mises en cache et du style nécessaires.

<div id="benefits">
  ## Avantages
</div>

`Auth0ComponentProvider` est l’enveloppe racine requise pour tous les Auth0 Universal Components. Voici les avantages de son utilisation :

* **Alignement des identités** : Fait le pont entre les [Auth0 SDKs](/docs/fr-ca/libraries) et la [My Account API](/docs/fr-ca/manage-users/my-account-api) afin que les requêtes soient signées avec des jetons associés à l’utilisateur.
* **Optimisation des performances** : Implémente un cache **TanStack Query** partagé, spécialement optimisé pour les flux de travail liés à l’identité, afin d’éviter les appels d’API redondants et les décalages de mise en page.
* **Cohérence du système de conception** : Propage les variables **Tailwind CSS** et les thèmes compatibles avec **Shadcn** dans l’arborescence des composants.
* **Rétroaction globale** : Gère un système unifié de notifications toast pour les alertes de sécurité et l’état des flux de travail.

<div id="integration-architecture">
  ## Architecture d’intégration
</div>

Imbriquez `Auth0ComponentProvider` dans votre fournisseur d’authentification (`Auth0Provider`). Cette configuration donne accès à l’état d’authentification et aux méthodes d’obtention de jetons nécessaires pour appeler les API Auth0.

<div id="configure-auth0componentprovider">
  ## Configurer `Auth0ComponentProvider`
</div>

<Tabs>
  <Tab title="React">
    <Callout icon="shield-halved" color="#F59E0B" iconType="solid">
      **Recommandation de sécurité :** Pour les applications de production qui gèrent la configuration des Organizations, Auth0 recommande la [configuration Next.js](/docs/fr-ca/get-started/universal-components/auth0-component-provider#next-js) (application Web classique). Le mode proxy de Next.js stocke les jetons côté serveur, ce qui réduit la surface d’attaque par rapport au stockage des jetons dans le navigateur d’une SPA. Si vous utilisez le mode React SPA, consultez les conseils sur le [Stockage des jetons](/docs/fr-ca/secure/security-guidance/data-security/token-storage) afin de comprendre les compromis.
    </Callout>

    ```tsx App.tsx theme={null}
    import { Auth0Provider } from "@auth0/auth0-react";
    import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";

    function App() {
      return (
        <Auth0Provider
          domain="your-tenant.auth0.com"
          clientId="YOUR_CLIENT_ID"
          authorizationParams={{ redirect_uri: window.location.origin }}
          interactiveErrorHandler='popup' // Requis pour gérer les défis d’authentification renforcée au moyen de la fenêtre contextuelle Universal Login
        >
          <Auth0ComponentProvider domain="your-tenant.auth0.com">
            {/* Votre application avec Auth0 Universal Components */}
          </Auth0ComponentProvider>
        </Auth0Provider>
      );
    }
    ```

    ***

    ## Propriétés

    <table class="table">
      <thead>
        <tr>
          <th>Propriété</th>
          <th>Type</th>
          <th>Obligatoire</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td><code>domain</code></td>
          <td><code>string</code></td>
          <td>Oui</td>
          <td>Domaine du tenant Auth0 ("YOUR\_AUTH0\_TENANT.auth0.com").</td>
        </tr>

        <tr>
          <td><code>previewMode</code></td>
          <td><code>boolean</code></td>
          <td>Non</td>
          <td>Lorsqu’il est défini sur <code>true</code>, l’initialisation du client API est ignorée. Utilisé pour les aperçus et les démos de la documentation.</td>
        </tr>

        <tr>
          <td><code>i18n</code></td>
          <td><code>I18nOptions</code></td>
          <td>Non</td>
          <td>Paramètres d’internationalisation, notamment currentLanguage et fallbackLanguage.</td>
        </tr>

        <tr>
          <td><code>themeSettings</code></td>
          <td><code>ThemeSettings</code></td>
          <td>Non</td>
          <td>Configuration du thème, y compris le mode (clair/sombre), la variante de thème (default/minimal/rounded) et les variables CSS.</td>
        </tr>

        <tr>
          <td><code>toastSettings</code></td>
          <td><code>ToastSettings</code></td>
          <td>Non</td>
          <td>Configuration des notifications toast, y compris le choix du fournisseur (sonner/custom), le positionnement, la durée et les méthodes de notifications toast personnalisées.</td>
        </tr>

        <tr>
          <td><code>cacheConfig</code></td>
          <td><code>QueryCacheConfig</code></td>
          <td>Non</td>
          <td>Contrôle la mise en cache de TanStack Query (données périmées après deux minutes / GC après cinq minutes par défaut). Définissez <code>enabled: false</code> pour forcer l’utilisation de données à jour.</td>
        </tr>

        <tr>
          <td><code>loader</code></td>
          <td><code>React.ReactNode</code></td>
          <td>Non</td>
          <td>Composant de chargement personnalisé à afficher pendant l’initialisation de l’authentification.</td>
        </tr>
      </tbody>
    </table>

    ***

    ## Expérience utilisateur

    ***

    **i18n**

    Utilisez les propriétés suivantes pour adapter Universal Components au système de conception et aux paramètres régionaux de votre application.

    <table class="table">
      <thead>
        <tr>
          <th>Propriété</th>
          <th>Type</th>
          <th>Obligatoire</th>
          <th>Par défaut</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>currentLanguage</code>
          </td>

          <td>
            <code>string</code>
          </td>

          <td>Oui</td>
          <td>-</td>
          <td>Code de la langue actuelle (par exemple, "en", "es", "fr")</td>
        </tr>

        <tr>
          <td>
            <code>fallbackLanguage</code>
          </td>

          <td>
            <code>string</code>
          </td>

          <td>Non</td>

          <td>
            <code>"en"</code>
          </td>

          <td>Code de la langue de secours lorsque des traductions sont absentes</td>
        </tr>
      </tbody>
    </table>

    ***

    **themeSettings**

    <table class="table">
      <thead>
        <tr>
          <th>Propriété</th>
          <th>Type</th>
          <th>Par défaut</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>mode</code>
          </td>

          <td>
            <code>"light" | "dark"</code>
          </td>

          <td>
            <code>"light"</code>
          </td>

          <td>Mode de couleur du thème</td>
        </tr>

        <tr>
          <td>
            <code>theme</code>
          </td>

          <td>
            <code>"default" | "minimal" | "rounded"</code>
          </td>

          <td>
            <code>"default"</code>
          </td>

          <td>Variante de thème proposant différents styles visuels</td>
        </tr>

        <tr>
          <td>
            <code>variables</code>
          </td>

          <td>
            <code>StylingVariables</code>
          </td>

          <td>
            <code>
              {}
            </code>
          </td>

          <td>Propriétés CSS personnalisées pour les thèmes commun, clair et foncé</td>
        </tr>
      </tbody>
    </table>

    <Accordion title="Variables CSS offertes">
      **Commun (s’applique à tous les thèmes) :**

      **Typographie :**

      * `--font-size-page-header`
      * `--font-size-page-description`
      * `--font-size-heading`
      * `--font-size-title`
      * `--font-size-subtitle`
      * `--font-size-body`
      * `--font-size-paragraph`
      * `--font-size-label`

      **Rayon de bordure :**

      * `--radius-xs` à `--radius-9xl`

      **Clair et foncé (couleurs et ombres propres à chaque thème) :**

      **Couleurs :**

      * `--background`, `--foreground`
      * `--card`, `--card-foreground`
      * `--primary`, `--primary-foreground`
      * `--secondary`, `--secondary-foreground`
      * `--accent`, `--accent-foreground`
      * `--muted`, `--muted-foreground`
      * `--destructive`, `--destructive-foreground`
      * `--popover`, `--popover-foreground`
      * `--input`, `--border`, `--ring`
      * `--color-page`
      * `--color-info`, `--color-info-foreground`
      * `--color-success`, `--color-success-foreground`
      * `--color-warning`, `--color-warning-foreground`
      * `--color-destructive-border`
      * `--color-popover-border`
      * `--color-input-foreground`
      * `--color-input-muted`

      **Ombres :**

      * `--shadow-bevel-*` (xs, sm, md, lg, xl, 2xl)
      * `--shadow-button-*` (repos, survol, focus)
      * `--shadow-button-destructive-*`
      * `--shadow-button-outlined-*`
      * `--shadow-input-*` (repos, survol, focus)
      * `--shadow-input-destructive-*`
      * `--shadow-checkbox-*` (repos, survol)
      * `--shadow-switch-*` (repos, survol, focus, curseur, curseur foncé)
    </Accordion>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      Pour des exemples détaillés de styles et de modèles de personnalisation, consultez [Personnaliser
      les styles et les thèmes avec les Universal
      Components](/docs/fr-ca/get-started/universal-components/web/universal-components-style).
    </Callout>

    ***

    **toastSettings**

    Les paramètres des notifications éphémères prennent en charge deux types de fournisseurs : **Sonner** (par défaut) ou **personnalisé**. Chaque fournisseur possède sa propre structure de configuration, ce qui améliore la sûreté du typage.

    <Tabs>
      <Tab title="Fournisseur Sonner (par défaut)">
        | Propriété              | Type            | Par défaut    | Description                                                                                                                          |
        | ---------------------- | --------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
        | `provider`             | `"sonner"`      | `"sonner"`    | Utilise la bibliothèque de notifications Sonner intégrée                                                                             |
        | `settings.position`    | `ToastPosition` | `"top-right"` | Emplacement où les notifications s’affichent : "top-left", "top-right", "bottom-left", "bottom-right", "top-center", "bottom-center" |
        | `settings.duration`    | `number`        | `4000`        | Durée en millisecondes avant la fermeture automatique de la notification (valeur par défaut de Sonner)                               |
        | `settings.maxToasts`   | `number`        | -             | Nombre maximal de notifications visibles simultanément                                                                               |
        | `settings.dismissible` | `boolean`       | `true`        | Indique si les notifications peuvent être fermées manuellement par l’utilisateur (valeur par défaut de Sonner)                       |
        | `settings.closeButton` | `boolean`       | `true`        | Indique s’il faut afficher un bouton de fermeture sur les notifications                                                              |

        ```tsx Sonner Provider Example theme={null}
        const toastSettings = {
          provider: 'sonner', // Facultatif, cette valeur est utilisée par défaut
          settings: {
            position: 'top-center',
            duration: 6000,
            maxToasts: 5,
            dismissible: true,
            closeButton: true
          }
        };
        ```
      </Tab>

      <Tab title="Custom Provider">
        | Propriété         | Type                         | Obligatoire | Description                                                 |
        | ----------------- | ---------------------------- | ----------- | ----------------------------------------------------------- |
        | `provider`        | `"custom"`                   | Oui         | Utilise votre implémentation personnalisée de notifications |
        | `methods.success` | `(message: string) => void`  | Non         | Gestionnaire personnalisé de notification de réussite       |
        | `methods.error`   | `(message: string) => void`  | Non         | Gestionnaire personnalisé de notification d’erreur          |
        | `methods.warning` | `(message: string) => void`  | Non         | Gestionnaire personnalisé de notification d’avertissement   |
        | `methods.info`    | `(message: string) => void`  | Non         | Gestionnaire personnalisé de notification d’information     |
        | `methods.dismiss` | `(toastId?: string) => void` | Non         | Gestionnaire personnalisé de fermeture                      |

        ```tsx Custom Provider Example theme={null}
        const toastSettings = {
          provider: 'custom',
          methods: {
            success: (message: string) => {
              // Votre implémentation personnalisée de notification de réussite
              myToastLibrary.success(message);
            },
            error: (message: string) => {
              // Votre implémentation personnalisée de notification d’erreur
              myToastLibrary.error(message);
            },
            warning: (message: string) => {
              // Votre implémentation personnalisée de notification d’avertissement
              myToastLibrary.warning(message);
            },
            info: (message: string) => {
              // Votre implémentation personnalisée de notification d’information
              myToastLibrary.info(message);
            },
            dismiss: (toastId?: string) => {
              // Votre implémentation personnalisée de fermeture
              myToastLibrary.dismiss(toastId);
            }
          }
        };
        ```

        <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
          Toutes les méthodes personnalisées sont facultatives. Implémentez uniquement celles dont vous avez besoin. Les méthodes
          reçoivent uniquement le texte du message — votre implémentation gère le style,
          le positionnement et la durée.
        </Callout>
      </Tab>
    </Tabs>

    ***

    ## État et performances

    Ajustez avec précision la mise en cache de TanStack Query pour chaque composant Auth0. Par défaut, les données demeurent fraîches pendant deux minutes, sont libérées par le ramasse-miettes après cinq minutes, et les rechargements déclenchés par le focus de la fenêtre sont ignorés.

    <table class="table">
      <thead>
        <tr>
          <th>Propriété</th>
          <th>Type</th>
          <th>Par défaut</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>enabled</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            <code>true</code>
          </td>

          <td>
            Active ou désactive la mise en cache. Lorsque cette option est définie sur <code>false</code>, les données obsolètes sont
            désactivées et les entrées du cache sont rapidement supprimées.
          </td>
        </tr>

        <tr>
          <td>
            <code>staleTime</code>
          </td>

          <td>
            <code>number</code>
          </td>

          <td>
            <code>120000</code>
          </td>

          <td>
            Nombre de millisecondes avant que les données deviennent obsolètes. La valeur par défaut est de deux minutes. Augmentez cette valeur
            pour les tableaux de bord et diminuez-la pour les workflows critiques.
          </td>
        </tr>

        <tr>
          <td>
            <code>gcTime</code>
          </td>

          <td>
            <code>number</code>
          </td>

          <td>
            <code>300000</code>
          </td>

          <td>
            Nombre de millisecondes avant que les requêtes inactives soient supprimées par le récupérateur de mémoire. La valeur par défaut est de cinq minutes.
          </td>
        </tr>

        <tr>
          <td>
            <code>refetchOnWindowFocus</code>
          </td>

          <td>
            <code>boolean | "always"</code>
          </td>

          <td>
            <code>false</code>
          </td>

          <td>
            Indique si les requêtes sont relancées lorsque le navigateur reprend le focus. Utilisez{" "}
            <code>"always"</code> pour garantir des données toujours à jour.
          </td>
        </tr>
      </tbody>
    </table>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Désactiver la mise en cache :** Passez `{ enabled: false }`. Cela règle automatiquement `staleTime` à 0 et réduit le délai de récupération de mémoire à cinq secondes, afin que chaque rendu récupère des données récentes.

      **Conseil de pro :** Gardez la mise en cache activée, mais réduisez `staleTime` lors de l’intégration à des panneaux d’administration nécessitant des mises à jour quasi instantanées.
    </Callout>

    <Tabs>
      <Tab title="Configurer le TTL">
        ```tsx theme={null}
        <Auth0ComponentProvider
          domain="your-tenant.auth0.com"
          cacheConfig={{
            staleTime: 10 * 60 * 1000,
            gcTime: 15 * 60 * 1000,
            refetchOnWindowFocus: true,
          }}
        >
          <App />
        </Auth0ComponentProvider>
        ```
      </Tab>

      <Tab title="Désactiver le cache">
        ```tsx theme={null}
        <Auth0ComponentProvider
          domain="your-tenant.auth0.com"
          cacheConfig={{ enabled: false }}
        >
          <App />
        </Auth0ComponentProvider>
        ```
      </Tab>
    </Tabs>
  </Tab>

  <Tab title="Next.js">
    ```tsx layout.tsx theme={null}
    import { Auth0ComponentProvider } from "@auth0/universal-components-react/rwa";

    export default function RootLayout({ children }) {
      return (
        <html lang="en">
          <body>
            <Auth0ComponentProvider
              mode="proxy"
              domain="your-tenant.auth0.com"
              proxyConfig={{ baseUrl: "/api/auth" }}
            >
              {children}
            </Auth0ComponentProvider>
          </body>
        </html>
      );
    }
    ```

    ***

    ## Propriétés

    <table class="table">
      <thead>
        <tr>
          <th>Propriété</th>
          <th>Type</th>
          <th>Obligatoire</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td><code>domain</code></td>
          <td><code>string</code></td>
          <td>Oui</td>
          <td>Domaine du tenant Auth0 (par exemple, "your-tenant.auth0.com"). Obligatoire en mode proxy.</td>
        </tr>

        <tr>
          <td><code>mode</code></td>
          <td><code>'proxy'</code></td>
          <td>Oui</td>
          <td>Avec Next.js, utilisez toujours le mode <code>'proxy'</code> pour l’authentification côté serveur.</td>
        </tr>

        <tr>
          <td><code>proxyConfig</code></td>
          <td>`{ baseUrl: string }`</td>
          <td>Oui</td>
          <td>Configuration du proxy contenant l’URL de base de votre serveur proxy d’authentification.</td>
        </tr>

        <tr>
          <td><code>previewMode</code></td>
          <td><code>boolean</code></td>
          <td>Non</td>
          <td>Lorsque <code>true</code>, l’initialisation du client API est ignorée. Utilisé pour les aperçus et les démos de la documentation.</td>
        </tr>

        <tr>
          <td><code>i18n</code></td>
          <td><code>I18nOptions</code></td>
          <td>Non</td>
          <td>Paramètres d’internationalisation, dont currentLanguage et fallbackLanguage.</td>
        </tr>

        <tr>
          <td><code>themeSettings</code></td>
          <td><code>ThemeSettings</code></td>
          <td>Non</td>
          <td>Configuration du thème, y compris le mode (clair/sombre), la variante de thème (default/minimal/rounded) et les variables CSS.</td>
        </tr>

        <tr>
          <td><code>toastSettings</code></td>
          <td><code>ToastSettings</code></td>
          <td>Non</td>
          <td>Configuration des notifications toast, y compris la sélection du fournisseur (sonner/custom), la position, la durée et les méthodes de notification toast personnalisées.</td>
        </tr>

        <tr>
          <td><code>cacheConfig</code></td>
          <td><code>QueryCacheConfig</code></td>
          <td>Non</td>
          <td>Contrôle la mise en cache de TanStack Query (données périmées après deux minutes et GC après cinq minutes par défaut). Définissez <code>enabled: false</code> pour forcer l’actualisation des données.</td>
        </tr>

        <tr>
          <td><code>loader</code></td>
          <td><code>React.ReactNode</code></td>
          <td>Non</td>
          <td>Composant de chargement personnalisé à afficher pendant l’initialisation de l’authentification.</td>
        </tr>
      </tbody>
    </table>

    ***

    ## Configurer le mode proxy

    Pour les applications Next.js, utilisez le mode proxy avec l’authentification côté serveur :

    ```tsx layout.tsx theme={null}
    import { Auth0ComponentProvider } from "@auth0/universal-components-react/rwa";

    export default function RootLayout({ children }) {
      return (
        <html lang="en">
          <body>
            <Auth0ComponentProvider
              mode="proxy"
              domain="your-tenant.auth0.com"
              proxyConfig={{ baseUrl: "/api/auth" }}
            >
              {children}
            </Auth0ComponentProvider>
          </body>
        </html>
      );
    }
    ```

    ***

    ### Propriétés du mode proxy

    Configuration de l’authentification en mode proxy. Obligatoire avec Next.js.

    <table class="table">
      <thead>
        <tr>
          <th>Propriété</th>
          <th>Type</th>
          <th>Obligatoire</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>baseUrl</code>
          </td>

          <td>
            <code>string</code>
          </td>

          <td>Oui</td>

          <td>
            URL de votre serveur proxy d’authentification (par exemple, "/api/auth"). Les appels d’API
            sont ajoutés à ce chemin de base.
          </td>
        </tr>
      </tbody>
    </table>

    ***

    ## Expérience utilisateur

    ***

    **i18n**

    <table class="table">
      <thead>
        <tr>
          <th>Propriété</th>
          <th>Type</th>
          <th>Obligatoire</th>
          <th>Par défaut</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>currentLanguage</code>
          </td>

          <td>
            <code>string</code>
          </td>

          <td>Oui</td>
          <td>-</td>
          <td>Code de la langue actuelle (par exemple, "en", "es", "fr")</td>
        </tr>

        <tr>
          <td>
            <code>fallbackLanguage</code>
          </td>

          <td>
            <code>string</code>
          </td>

          <td>Non</td>

          <td>
            <code>"en"</code>
          </td>

          <td>Code de langue de secours en l’absence de traductions</td>
        </tr>
      </tbody>
    </table>

    ***

    **themeSettings**

    <table class="table">
      <thead>
        <tr>
          <th>Propriété</th>
          <th>Type</th>
          <th>Par défaut</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>mode</code>
          </td>

          <td>
            <code>"light" | "dark"</code>
          </td>

          <td>
            <code>"light"</code>
          </td>

          <td>Mode de couleur du thème</td>
        </tr>

        <tr>
          <td>
            <code>theme</code>
          </td>

          <td>
            <code>"default" | "minimal" | "rounded"</code>
          </td>

          <td>
            <code>"default"</code>
          </td>

          <td>Variante de thème offrant différentes options de style</td>
        </tr>

        <tr>
          <td>
            <code>variables</code>
          </td>

          <td>
            <code>StylingVariables</code>
          </td>

          <td>
            <code>
              {}
            </code>
          </td>

          <td>Propriétés CSS personnalisées pour les thèmes commun, clair et foncé</td>
        </tr>
      </tbody>
    </table>

    <Accordion title="Variables CSS offertes">
      **Commun à tous les thèmes :**

      **Typographie :**

      * `--font-size-page-header`
      * `--font-size-page-description`
      * `--font-size-heading`
      * `--font-size-title`
      * `--font-size-subtitle`
      * `--font-size-body`
      * `--font-size-paragraph`
      * `--font-size-label`

      **Rayon des bordures :**

      * de `--radius-xs` à `--radius-9xl`

      **Clair et sombre (couleurs et ombres propres à chaque thème) :**

      **Couleurs :**

      * `--background`, `--foreground`
      * `--card`, `--card-foreground`
      * `--primary`, `--primary-foreground`
      * `--secondary`, `--secondary-foreground`
      * `--accent`, `--accent-foreground`
      * `--muted`, `--muted-foreground`
      * `--destructive`, `--destructive-foreground`
      * `--popover`, `--popover-foreground`
      * `--input`, `--border`, `--ring`
      * `--color-page`
      * `--color-info`, `--color-info-foreground`
      * `--color-success`, `--color-success-foreground`
      * `--color-warning`, `--color-warning-foreground`
      * `--color-destructive-border`
      * `--color-popover-border`
      * `--color-input-foreground`
      * `--color-input-muted`

      **Ombres :**

      * `--shadow-bevel-*` (xs, sm, md, lg, xl, 2xl)
      * `--shadow-button-*` (repos, survol, focus)
      * `--shadow-button-destructive-*`
      * `--shadow-button-outlined-*`
      * `--shadow-input-*` (repos, survol, focus)
      * `--shadow-input-destructive-*`
      * `--shadow-checkbox-*` (repos, survol)
      * `--shadow-switch-*` (repos, survol, focus, curseur, curseur sombre)
    </Accordion>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      Pour obtenir des exemples détaillés de mise en forme et de personnalisation, consultez [Personnaliser
      le style et les thèmes avec Universal
      Components](/docs/fr-ca/get-started/universal-components/web/universal-components-style).
    </Callout>

    ***

    **toastSettings**

    Les paramètres des notifications toast prennent en charge deux types de fournisseurs : **Sonner** (par défaut) ou **personnalisé**. Chaque fournisseur possède sa propre structure de configuration afin d’assurer une meilleure sécurité des types.

    <Accordion title="Fournisseur Sonner (par défaut)">
      | Propriété              | Type            | Par défaut    | Description                                                                                                                          |
      | ---------------------- | --------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
      | `provider`             | `"sonner"`      | `"sonner"`    | Utilise la bibliothèque intégrée de notifications Sonner                                                                             |
      | `settings.position`    | `ToastPosition` | `"top-right"` | Emplacement où les notifications s’affichent : "top-left", "top-right", "bottom-left", "bottom-right", "top-center", "bottom-center" |
      | `settings.duration`    | `number`        | `4000`        | Durée, en millisecondes, avant la suppression automatique de la notification (valeur par défaut de Sonner)                           |
      | `settings.maxToasts`   | `number`        | -             | Nombre maximal de notifications visibles simultanément                                                                               |
      | `settings.dismissible` | `boolean`       | `true`        | Indique si les notifications peuvent être supprimées manuellement par l’utilisateur (valeur par défaut de Sonner)                    |
      | `settings.closeButton` | `boolean`       | `true`        | Indique si un bouton de fermeture doit être affiché sur les notifications                                                            |

      ```tsx Sonner Provider Example theme={null}
      const toastSettings = {
        provider: 'sonner', // Facultatif, c'est la valeur par défaut
        settings: {
          position: 'top-center',
          duration: 6000,
          maxToasts: 5,
          dismissible: true,
          closeButton: true
        }
      };
      ```
    </Accordion>

    <Accordion title="Custom Provider">
      | Propriété         | Type                         | Obligatoire | Description                                         |
      | ----------------- | ---------------------------- | ----------- | --------------------------------------------------- |
      | `provider`        | `"custom"`                   | Oui         | Utilise votre implémentation de toast personnalisée |
      | `methods.success` | `(message: string) => void`  | Non         | Gestionnaire de toast de réussite personnalisé      |
      | `methods.error`   | `(message: string) => void`  | Non         | Gestionnaire de toast d’erreur personnalisé         |
      | `methods.warning` | `(message: string) => void`  | Non         | Gestionnaire de toast d’avertissement personnalisé  |
      | `methods.info`    | `(message: string) => void`  | Non         | Gestionnaire de toast d’information personnalisé    |
      | `methods.dismiss` | `(toastId?: string) => void` | Non         | Gestionnaire de suppression personnalisé            |

      ```tsx Custom Provider Example theme={null}
      const toastSettings = {
        provider: 'custom',
        methods: {
          success: (message: string) => {
            // Votre mise en œuvre personnalisée de la notification de réussite
            myToastLibrary.success(message);
          },
          error: (message: string) => {
            // Votre mise en œuvre personnalisée de la notification d'erreur
            myToastLibrary.error(message);
          },
          warning: (message: string) => {
            // Votre mise en œuvre personnalisée de la notification d'avertissement
            myToastLibrary.warning(message);
          },
          info: (message: string) => {
            // Votre mise en œuvre personnalisée de la notification d'information
            myToastLibrary.info(message);
          },
          dismiss: (toastId?: string) => {
            // Votre mise en œuvre personnalisée de la suppression
            myToastLibrary.dismiss(toastId);
          }
        }
      };
      ```

      <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
        Toutes les méthodes personnalisées sont facultatives. N’implémentez que celles dont vous avez besoin. Les méthodes reçoivent uniquement le texte du message; votre implémentation gère la mise en forme, le positionnement et le moment de l’affichage.
      </Callout>
    </Accordion>

    ***

    ## État et performances

    Ajustez finement la mise en cache de TanStack Query pour chaque composant Auth0. Par défaut, les données restent à jour pendant deux minutes, sont supprimées après cinq minutes et ne sont pas actualisées lorsque la fenêtre reprend le focus.

    <table class="table">
      <thead>
        <tr>
          <th>Propriété</th>
          <th>Type</th>
          <th>Par défaut</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>enabled</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            <code>true</code>
          </td>

          <td>
            Active ou désactive complètement la mise en cache. Lorsque défini à <code>false</code>, les données périmées ne sont plus utilisées et les entrées mises en cache sont rapidement supprimées.
          </td>
        </tr>

        <tr>
          <td>
            <code>staleTime</code>
          </td>

          <td>
            <code>number</code>
          </td>

          <td>
            <code>120000</code>
          </td>

          <td>
            Nombre de millisecondes avant que les données deviennent périmées (deux minutes par défaut). Augmentez cette valeur
            pour les tableaux de bord et diminuez-la pour les flux de travail critiques.
          </td>
        </tr>

        <tr>
          <td>
            <code>gcTime</code>
          </td>

          <td>
            <code>number</code>
          </td>

          <td>
            <code>300000</code>
          </td>

          <td>
            Nombre de millisecondes avant que les requêtes inactives soient supprimées par le ramasse-miettes (cinq minutes par
            défaut).
          </td>
        </tr>

        <tr>
          <td>
            <code>refetchOnWindowFocus</code>
          </td>

          <td>
            <code>boolean | "always"</code>
          </td>

          <td>
            <code>false</code>
          </td>

          <td>
            Détermine si les requêtes sont récupérées de nouveau lorsque le navigateur reprend le focus. Utilisez{" "}
            <code>"always"</code> pour garantir la fraîcheur des données.
          </td>
        </tr>
      </tbody>
    </table>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Désactiver la mise en cache :** transmettez `{ enabled: false }`. Cela règle automatiquement `staleTime` à 0 et réduit le délai de récupération de la mémoire à 5 secondes afin que chaque rendu récupère des données à jour.

      **Conseil de pro :** laissez la mise en cache activée, mais réduisez `staleTime` lors de l’intégration à des panneaux d’administration qui nécessitent des mises à jour presque en temps réel.
    </Callout>

    <Accordion title="Régler le TTL">
      ```tsx layout.tsx theme={null}
      <Auth0ComponentProvider
        mode="proxy"
        domain="your-tenant.auth0.com"
        proxyConfig={{ baseUrl: "/api/auth" }}
        cacheConfig={{
          staleTime: 10 * 60 * 1000,
          gcTime: 15 * 60 * 1000,
          refetchOnWindowFocus: true,
        }}
      >
        <App />
      </Auth0ComponentProvider>
      ```
    </Accordion>

    <Accordion title="Désactiver le cache">
      ```tsx layout.tsx theme={null}
      <Auth0ComponentProvider
        mode="proxy"
        domain="your-tenant.auth0.com"
        proxyConfig={{ baseUrl: "/api/auth" }}
        cacheConfig={{ enabled: false }}
      >
        <App />
      </Auth0ComponentProvider>
      ```
    </Accordion>
  </Tab>

  <Tab title="shadcn">
    <Callout icon="shield-halved" color="#F59E0B" iconType="solid">
      **Recommandation de sécurité :** Pour les applications de production qui gèrent la configuration d’une Organization, Auth0 recommande la [configuration Next.js](/docs/fr-ca/get-started/universal-components/auth0-component-provider#next-js) (application Web classique). Le mode proxy de Next.js stocke les jetons côté serveur, ce qui réduit la surface d’attaque par rapport au stockage des jetons dans le navigateur d’une SPA. Si vous utilisez le mode React SPA, consultez les conseils sur le [stockage des jetons](/docs/fr-ca/secure/security-guidance/data-security/token-storage) afin de comprendre les compromis.
    </Callout>

    ```tsx App.tsx theme={null}
    import { Auth0Provider } from "@auth0/auth0-react";
    import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";

    function App() {
      return (
        <Auth0Provider
          domain="your-tenant.auth0.com"
          clientId="YOUR_CLIENT_ID"
          authorizationParams={{ redirect_uri: window.location.origin }}
          interactiveErrorHandler='popup' // Requis pour gérer les challenges d’authentification renforcée au moyen de la fenêtre contextuelle Universal Login
        >
          <Auth0ComponentProvider domain="your-tenant.auth0.com">
            {/* Votre application avec Auth0 Universal Components */}
          </Auth0ComponentProvider>
        </Auth0Provider>
      );
    }
    ```

    ***

    ## Propriétés

    <table class="table">
      <thead>
        <tr>
          <th>Propriété</th>
          <th>Type</th>
          <th>Obligatoire</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td><code>domain</code></td>
          <td><code>string</code></td>
          <td>Oui</td>
          <td>Domaine du tenant Auth0 (par exemple, "your-tenant.auth0.com").</td>
        </tr>

        <tr>
          <td><code>authContext</code></td>
          <td><code>ContextInterface</code></td>
          <td>Non</td>
          <td>Contexte d’authentification personnalisé pour les SPA qui n’utilisent pas `@auth0/auth0-react`. Fournit des fonctions d’authentification, comme `getAccessTokenSilently`.</td>
        </tr>

        <tr>
          <td><code>previewMode</code></td>
          <td><code>boolean</code></td>
          <td>Non</td>
          <td>Lorsque <code>true</code>, l’initialisation du client API est ignorée. Utilisé pour les aperçus de documentation et les démonstrations.</td>
        </tr>

        <tr>
          <td><code>i18n</code></td>
          <td><code>I18nOptions</code></td>
          <td>Non</td>
          <td>Paramètres d’internationalisation, y compris currentLanguage et fallbackLanguage.</td>
        </tr>

        <tr>
          <td><code>themeSettings</code></td>
          <td><code>ThemeSettings</code></td>
          <td>Non</td>
          <td>Configuration du thème, y compris le mode (clair/foncé), la variante de thème (par défaut/minimal/arrondi) et les variables CSS.</td>
        </tr>

        <tr>
          <td><code>toastSettings</code></td>
          <td><code>ToastSettings</code></td>
          <td>Non</td>
          <td>Configuration des notifications toast, y compris le choix du fournisseur (sonner/personnalisé), le positionnement, la durée et les méthodes de notification personnalisées.</td>
        </tr>

        <tr>
          <td><code>cacheConfig</code></td>
          <td><code>QueryCacheConfig</code></td>
          <td>Non</td>
          <td>Contrôle la mise en cache de TanStack Query (données périmées après deux minutes et GC après cinq minutes par défaut). Définissez <code>enabled: false</code> pour forcer l’obtention de données à jour.</td>
        </tr>

        <tr>
          <td><code>loader</code></td>
          <td><code>React.ReactNode</code></td>
          <td>Non</td>
          <td>Composant de chargement personnalisé à afficher pendant l’initialisation de l’authentification.</td>
        </tr>
      </tbody>
    </table>

    ***

    ## Expérience utilisateur

    ***

    **i18n**

    <table class="table">
      <thead>
        <tr>
          <th>Propriété</th>
          <th>Type</th>
          <th>Obligatoire</th>
          <th>Par défaut</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>currentLanguage</code>
          </td>

          <td>
            <code>string</code>
          </td>

          <td>Oui</td>
          <td>-</td>
          <td>Code de la langue actuelle (par exemple, "en", "es", "fr")</td>
        </tr>

        <tr>
          <td>
            <code>fallbackLanguage</code>
          </td>

          <td>
            <code>string</code>
          </td>

          <td>Non</td>

          <td>
            <code>"en"</code>
          </td>

          <td>Code de la langue de secours lorsque des traductions sont absentes</td>
        </tr>
      </tbody>
    </table>

    ***

    **themeSettings**

    <table class="table">
      <thead>
        <tr>
          <th>Propriété</th>
          <th>Type</th>
          <th>Par défaut</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>mode</code>
          </td>

          <td>
            <code>"light" | "dark"</code>
          </td>

          <td>
            <code>"light"</code>
          </td>

          <td>Mode de couleur du thème</td>
        </tr>

        <tr>
          <td>
            <code>theme</code>
          </td>

          <td>
            <code>"default" | "minimal" | "rounded"</code>
          </td>

          <td>
            <code>"default"</code>
          </td>

          <td>Variante de thème proposant différents styles</td>
        </tr>

        <tr>
          <td>
            <code>variables</code>
          </td>

          <td>
            <code>StylingVariables</code>
          </td>

          <td>
            <code>
              {}
            </code>
          </td>

          <td>Propriétés CSS personnalisées pour les thèmes commun, clair et foncé</td>
        </tr>
      </tbody>
    </table>

    <Accordion title="Variables CSS offertes">
      **Commun à tous les thèmes :**

      **Typographie :**

      * `--font-size-page-header`
      * `--font-size-page-description`
      * `--font-size-heading`
      * `--font-size-title`
      * `--font-size-subtitle`
      * `--font-size-body`
      * `--font-size-paragraph`
      * `--font-size-label`

      **Rayon des bordures :**

      * de `--radius-xs` à `--radius-9xl`

      **Clair et foncé (couleurs et ombres propres à chaque thème) :**

      **Couleurs :**

      * `--background`, `--foreground`
      * `--card`, `--card-foreground`
      * `--primary`, `--primary-foreground`
      * `--secondary`, `--secondary-foreground`
      * `--accent`, `--accent-foreground`
      * `--muted`, `--muted-foreground`
      * `--destructive`, `--destructive-foreground`
      * `--popover`, `--popover-foreground`
      * `--input`, `--border`, `--ring`
      * `--color-page`
      * `--color-info`, `--color-info-foreground`
      * `--color-success`, `--color-success-foreground`
      * `--color-warning`, `--color-warning-foreground`
      * `--color-destructive-border`
      * `--color-popover-border`
      * `--color-input-foreground`
      * `--color-input-muted`

      **Ombres :**

      * `--shadow-bevel-*` (xs, sm, md, lg, xl, 2xl)
      * `--shadow-button-*` (normal, survol, focus)
      * `--shadow-button-destructive-*`
      * `--shadow-button-outlined-*`
      * `--shadow-input-*` (normal, survol, focus)
      * `--shadow-input-destructive-*`
      * `--shadow-checkbox-*` (normal, survol)
      * `--shadow-switch-*` (normal, survol, focus, curseur, curseur foncé)
    </Accordion>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      Pour obtenir des exemples détaillés de mise en forme et de modèles de personnalisation, consultez [Personnaliser
      le style et les thèmes avec les composants Universal
      Components](/docs/fr-ca/get-started/universal-components/web/universal-components-style).
    </Callout>

    ***

    **toastSettings**

    Les paramètres des notifications éphémères prennent en charge deux types de fournisseurs : **Sonner** (par défaut) ou **personnalisé**. Chaque fournisseur possède sa propre structure de configuration, ce qui améliore la sûreté de typage.

    <Tabs>
      <Tab title="Fournisseur Sonner (par défaut)">
        | Propriété              | Type            | Par défaut    | Description                                                                                                                    |
        | ---------------------- | --------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------ |
        | `provider`             | `"sonner"`      | `"sonner"`    | Utilise la bibliothèque de notifications intégrée Sonner                                                                       |
        | `settings.position`    | `ToastPosition` | `"top-right"` | Position d’affichage des notifications : "top-left", "top-right", "bottom-left", "bottom-right", "top-center", "bottom-center" |
        | `settings.duration`    | `number`        | `4000`        | Durée, en millisecondes, avant la fermeture automatique de la notification (valeur par défaut de Sonner)                       |
        | `settings.maxToasts`   | `number`        | -             | Nombre maximal de notifications visibles simultanément                                                                         |
        | `settings.dismissible` | `boolean`       | `true`        | Indique si les notifications peuvent être fermées manuellement par l’utilisateur (valeur par défaut de Sonner)                 |
        | `settings.closeButton` | `boolean`       | `true`        | Indique s’il faut afficher un bouton de fermeture sur les notifications                                                        |

        ```tsx Sonner Provider Example theme={null}
        const toastSettings = {
          provider: 'sonner', // Facultatif : il s’agit de la valeur par défaut
          settings: {
            position: 'top-center',
            duration: 6000,
            maxToasts: 5,
            dismissible: true,
            closeButton: true
          }
        };
        ```
      </Tab>

      <Tab title="Custom Provider">
        | Propriété         | Type                         | Obligatoire | Description                                                      |
        | ----------------- | ---------------------------- | ----------- | ---------------------------------------------------------------- |
        | `provider`        | `"custom"`                   | Oui         | Utilise votre propre implémentation de notifications             |
        | `methods.success` | `(message: string) => void`  | Non         | Gestionnaire personnalisé pour les notifications de réussite     |
        | `methods.error`   | `(message: string) => void`  | Non         | Gestionnaire personnalisé pour les notifications d’erreur        |
        | `methods.warning` | `(message: string) => void`  | Non         | Gestionnaire personnalisé pour les notifications d’avertissement |
        | `methods.info`    | `(message: string) => void`  | Non         | Gestionnaire personnalisé pour les notifications d’information   |
        | `methods.dismiss` | `(toastId?: string) => void` | Non         | Gestionnaire personnalisé de suppression                         |

        ```tsx Custom Provider Example theme={null}
        const toastSettings = {
          provider: 'custom',
          methods: {
            success: (message: string) => {
              // Votre propre implémentation de notification de réussite
              myToastLibrary.success(message);
            },
            error: (message: string) => {
              // Votre propre implémentation de notification d’erreur
              myToastLibrary.error(message);
            },
            warning: (message: string) => {
              // Votre propre implémentation de notification d’avertissement
              myToastLibrary.warning(message);
            },
            info: (message: string) => {
              // Votre propre implémentation de notification d’information
              myToastLibrary.info(message);
            },
            dismiss: (toastId?: string) => {
              // Votre propre implémentation de suppression
              myToastLibrary.dismiss(toastId);
            }
          }
        };
        ```

        <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
          Toutes les méthodes personnalisées sont facultatives. Implémentez uniquement celles dont vous avez besoin. Les méthodes
          reçoivent uniquement le texte du message ; votre implémentation gère la mise en forme,
          le positionnement et la durée.
        </Callout>
      </Tab>
    </Tabs>

    ***

    ## État et performance

    Affinez la mise en cache de TanStack Query pour chaque composant Auth0. Par défaut, les données restent à jour pendant deux minutes, sont supprimées après cinq minutes et ne sont pas récupérées de nouveau lorsque la fenêtre reprend le focus.

    <table class="table">
      <thead>
        <tr>
          <th>Propriété</th>
          <th>Type</th>
          <th>Par défaut</th>
          <th>Description</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>enabled</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            <code>true</code>
          </td>

          <td>
            Active ou désactive entièrement la mise en cache. Lorsqu’elle est définie sur <code>false</code>, les données
            périmées sont désactivées et les entrées mises en cache sont rapidement supprimées.
          </td>
        </tr>

        <tr>
          <td>
            <code>staleTime</code>
          </td>

          <td>
            <code>number</code>
          </td>

          <td>
            <code>120000</code>
          </td>

          <td>
            Nombre de millisecondes avant que les données ne deviennent périmées (deux minutes par défaut). Augmentez cette valeur
            pour les tableaux de bord et diminuez-la pour les workflows critiques.
          </td>
        </tr>

        <tr>
          <td>
            <code>gcTime</code>
          </td>

          <td>
            <code>number</code>
          </td>

          <td>
            <code>300000</code>
          </td>

          <td>
            Nombre de millisecondes avant que les requêtes inactives ne soient supprimées par le ramasse-miettes (5 minutes par
            défaut).
          </td>
        </tr>

        <tr>
          <td>
            <code>refetchOnWindowFocus</code>
          </td>

          <td>
            <code>boolean | "always"</code>
          </td>

          <td>
            <code>false</code>
          </td>

          <td>
            Indique si les requêtes sont récupérées à nouveau lorsque le navigateur reprend le focus. Utilisez{" "}
            <code>"always"</code> pour garantir des données toujours à jour.
          </td>
        </tr>
      </tbody>
    </table>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Désactiver la mise en cache :** Transmettez `{ enabled: false }`. Cela règle automatiquement `staleTime` à 0 et réduit la période de récupération de mémoire à 5 secondes afin que chaque rendu récupère des données récentes.

      **Conseil de pro :** Gardez la mise en cache activée, mais réduisez `staleTime` lors de l’intégration à des panneaux d’administration qui exigent des mises à jour presque en temps réel.
    </Callout>

    <Tabs>
      <Tab title="Régler le TTL">
        ```tsx App.tsx theme={null}
        <Auth0ComponentProvider
          domain="your-tenant.auth0.com"
          cacheConfig={{
            staleTime: 10 * 60 * 1000,
            gcTime: 15 * 60 * 1000,
            refetchOnWindowFocus: true,
          }}
        >
          <App />
        </Auth0ComponentProvider>
        ```
      </Tab>

      <Tab title="Désactiver le cache">
        ```tsx App.tsx theme={null}
        <Auth0ComponentProvider
          domain="your-tenant.auth0.com"
          cacheConfig={{ enabled: false }}
        >
          <App />
        </Auth0ComponentProvider>
        ```
      </Tab>
    </Tabs>
  </Tab>
</Tabs>