> ## 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 thématisation, les notifications toast et les options de mise en cache.

<Warning>
  Auth0 Universal Components est actuellement en accès anticipé. En l’utilisant, vous
  acceptez les conditions applicables de l’essai gratuit énoncées dans le [Contrat-cadre d’abonnement
  d’Okta](https://www.okta.com/agreements/). Pour en savoir plus, consultez [Phases de lancement
  des produits](/fr-CA/docs/troubleshoot/product-lifecycle/product-release-stages).
</Warning>

`Auth0ComponentProvider` est la couche d’orchestration de [Auth0 Universal Components](/fr-CA/docs/get-started/universal-components/universal-components-overview). Les SDK Auth0 gèrent les sessions et les jetons, et `Auth0ComponentProvider` convertit cet état d’authentification en un contexte d’interface utilisateur fonctionnel et aux couleurs de votre marque. `Auth0ComponentProvider` veille à ce que les composants, comme ceux de l’inscription à l’authentification multifacteur (MFA), disposent des autorisations, des données mises en cache et du style nécessaires.

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

`Auth0ComponentProvider` est le conteneur racine requis pour tous les Auth0 Universal Components. Voici les avantages de son utilisation :

* **Alignement de l’identité** : Fait le lien entre les [SDK Auth0](/fr-CA/docs/libraries) et l’[API My Account](/fr-CA/docs/manage-users/my-account-api) afin de garantir que les requêtes sont signées avec des jetons associés à l’utilisateur.
* **Optimisation des performances** : Met en œuvre un cache **TanStack Query** partagé, spécialement optimisé pour les flux d’identité, afin d’éviter les appels d’API redondants et les changements de mise en page.
* **Cohérence du système de conception** : Propage les variables **Tailwind CSS** et les thèmes compatibles avec **Shadcn** dans toute 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 permet d’accéder à l’état de l’authentification et aux méthodes d’obtention de jetons requises pour appeler les API d’Auth0.

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

<Tabs>
  <Tab title="React">
    ```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 par élévation de privilèges via la fenêtre contextuelle Universal Login
        >
          <Auth0ComponentProvider domain="your-tenant.auth0.com">
            {/* Votre application avec les composants universels Auth0 */}
          </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 locataire Auth0 ("YOUR\_AUTH0\_TENANT.auth0.com").</td>
        </tr>

        <tr>
          <td><code>previewMode</code></td>
          <td><code>boolean</code></td>
          <td>Non</td>
          <td>Lorsque <code>true</code>, ignore l'initialisation du client d'API. Utilisé pour les prévisualisations de la 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 (light/dark), la variante du 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 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 (durée stale de deux min / GC de cinq min 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>

    ***

    ## Expérience utilisateur

    ***

    **i18n**

    Utilisez les propriétés suivantes pour adapter les composants universels 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 courante (p. ex., "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 remplacement lorsque des traductions sont manquantes</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é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 (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 des bordures :**

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

      **Clair et foncé (couleurs et ombres propres au 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-*` (état normal, survol, focus)
      * `--shadow-button-destructive-*`
      * `--shadow-button-outlined-*`
      * `--shadow-input-*` (état normal, survol, focus)
      * `--shadow-input-destructive-*`
      * `--shadow-checkbox-*` (état normal, survol)
      * `--shadow-switch-*` (état normal, survol, focus, curseur, curseur foncé)
    </Accordion>

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

    ***

    **toastSettings**

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

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

        ```tsx Exemple de provider Sonner 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
          }
        };
        ```
      </Tab>

      <Tab title="Provider personnalisé">
        | Propriété         | Type                         | Requis | Description                                               |
        | ----------------- | ---------------------------- | ------ | --------------------------------------------------------- |
        | `provider`        | `"custom"`                   | Oui    | Utilise votre implémentation de toast personnalisée       |
        | `methods.success` | `(message: string) => void`  | Non    | Gestionnaire personnalisé pour les toasts de succès       |
        | `methods.error`   | `(message: string) => void`  | Non    | Gestionnaire personnalisé pour les toasts d’erreur        |
        | `methods.warning` | `(message: string) => void`  | Non    | Gestionnaire personnalisé pour les toasts d’avertissement |
        | `methods.info`    | `(message: string) => void`  | Non    | Gestionnaire personnalisé pour les toasts d’information   |
        | `methods.dismiss` | `(toastId?: string) => void` | Non    | Gestionnaire personnalisé pour la fermeture               |

        ```tsx Exemple de provider personnalisé theme={null}
        const toastSettings = {
          provider: 'custom',
          methods: {
            success: (message: string) => {
              // Votre implémentation personnalisée pour les toasts de succès
              myToastLibrary.success(message);
            },
            error: (message: string) => {
              // Votre implémentation personnalisée pour les toasts d’erreur
              myToastLibrary.error(message);
            },
            warning: (message: string) => {
              // Votre implémentation personnalisée pour les toasts d’avertissement
              myToastLibrary.warning(message);
            },
            info: (message: string) => {
              // Votre implémentation personnalisée pour les toasts d’information
              myToastLibrary.info(message);
            },
            dismiss: (toastId?: string) => {
              // Votre implémentation personnalisée pour la fermeture
              myToastLibrary.dismiss(toastId);
            }
          }
        };
        ```

        <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
          Toutes les méthodes personnalisées sont facultatives. Implémentez
          seulement 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 d’affichage.
        </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 fraîches pendant deux minutes, sont collectées par le ramasse-miettes après cinq minutes, et les rechargements au focus de fenêtre sont ignorés.

    <table class="table">
      <thead>
        <tr>
          <th>Propriété</th>
          <th>Type</th>
          <th>Valeur 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. Lorsque cette option est définie sur <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. La valeur par défaut est de deux minutes. Augmentez
            cette valeur pour les tableaux de bord et réduisez-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. 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>
            Détermine si les requêtes sont récupérées de nouveau lorsque la fenêtre du navigateur retrouve le focus. Utilisez{" "}
            <code>"always"</code> pour garantir une fraîcheur maximale.
          </td>
        </tr>
      </tbody>
    </table>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Désactiver la mise en cache :** transmettez `{ enabled: false }`. Cela définit automatiquement `staleTime` à 0 et réduit la fenêtre de garbage collection à cinq secondes, de sorte que chaque rendu récupère les données les plus récentes.

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

    <Tabs>
      <Tab title="Régler 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 locataire Auth0 (p. ex., "your-tenant.auth0.com"). Requis pour le mode proxy.</td>
        </tr>

        <tr>
          <td><code>mode</code></td>
          <td><code>'proxy'</code></td>
          <td>Oui</td>
          <td>Pour 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 avec 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>, n’initialise pas le client d’API. Utilisé pour les aperçus de la 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/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), le positionnement, la durée et les méthodes 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 min / GC après cinq min 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>

    ***

    ## 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 pour l'authentification en mode proxy. Requis lors de l'utilisation de 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
            s’ajoutent à 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 (p. ex., "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 remplacement lorsque des traductions sont manquantes</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 sombre</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 des bordures :**

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

      **Clair & sombre (couleurs et ombres propres au 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-*` (au repos, survol, focus)
      * `--shadow-button-destructive-*`
      * `--shadow-button-outlined-*`
      * `--shadow-input-*` (au repos, survol, focus)
      * `--shadow-input-destructive-*`
      * `--shadow-checkbox-*` (au repos, survol)
      * `--shadow-switch-*` (au repos, survol, focus, curseur, curseur foncé)
    </Accordion>

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

    ***

    **toastSettings**

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

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

      ```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
        }
      };
      ```
    </Accordion>

    <Accordion title="Provider personnalisé">
      | Propriété         | Type                         | Obligatoire | Description                                          |
      | ----------------- | ---------------------------- | ----------- | ---------------------------------------------------- |
      | `provider`        | `"custom"`                   | Oui         | Utilise votre implémentation personnalisée de toast  |
      | `methods.success` | `(message: string) => void`  | Non         | Gestionnaire personnalisé des toasts de succès       |
      | `methods.error`   | `(message: string) => void`  | Non         | Gestionnaire personnalisé des toasts d’erreur        |
      | `methods.warning` | `(message: string) => void`  | Non         | Gestionnaire personnalisé des toasts d’avertissement |
      | `methods.info`    | `(message: string) => void`  | Non         | Gestionnaire personnalisé des toasts 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 toast de succès
            myToastLibrary.success(message);
          },
          error: (message: string) => {
            // Votre implémentation personnalisée de toast d'erreur
            myToastLibrary.error(message);
          },
          warning: (message: string) => {
            // Votre implémentation personnalisée de toast d'avertissement
            myToastLibrary.warning(message);
          },
          info: (message: string) => {
            // Votre implémentation personnalisée de toast 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 ne reçoivent que le texte du message - votre implémentation gère le style, le positionnement et la durée d’affichage.
      </Callout>
    </Accordion>

    ***

    ## État et performance

    Affinez la mise en cache de TanStack Query pour chaque composant Auth0. Par défaut, les données restent fraîches pendant deux minutes, sont collectées par le ramasse-miettes après cinq minutes, et les rechargements au focus de fenêtre sont ignorés.

    <table class="table">
      <thead>
        <tr>
          <th>Propriété</th>
          <th>Type</th>
          <th>Valeur 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 à <code>false</code>, les données obsolètes ne sont plus utilisées et les entrées 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 obsolètes (deux minutes par défaut). Augmentez cette valeur pour les tableaux de bord et réduisez-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 exécutées de nouveau lorsque le navigateur retrouve le focus. Utilisez{" "}
            <code>"always"</code> pour garantir une fraîcheur stricte.
          </td>
        </tr>
      </tbody>
    </table>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **Désactiver la mise en cache :** Passez `{ enabled: false }`. Cela définit automatiquement `staleTime` à 0 et réduit la fenêtre de garbage collection à 5 secondes, de sorte 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 interfaces d’administration qui nécessitent des mises à jour quasi 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">
    ```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 par élévation de privilèges via la fenêtre contextuelle Universal Login
        >
          <Auth0ComponentProvider domain="your-tenant.auth0.com">
            {/* Votre application avec les composants universels Auth0 */}
          </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 locataire Auth0 (p. ex., "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>, n'initialise pas le client d'API. Utilisé pour les aperçus de la documentation et les démos.</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 (light/dark), 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), la position, la durée et les méthodes 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 (deux minutes avant expiration / 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 (p. ex., "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 si des traductions sont manquantes</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 sombre</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 :**

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

      **Clair et foncé (couleurs et ombres propres au 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, pastille, pastille foncée)
    </Accordion>

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

    ***

    **toastSettings**

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

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

        ```tsx Exemple de fournisseur Sonner 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="Fournisseur personnalisé">
        | Propriété         | Type                         | Obligatoire | Description                                          |
        | ----------------- | ---------------------------- | ----------- | ---------------------------------------------------- |
        | `provider`        | `"custom"`                   | Oui         | Utilise votre propre implémentation de toast         |
        | `methods.success` | `(message: string) => void`  | Non         | Gestionnaire personnalisé des toasts de succès       |
        | `methods.error`   | `(message: string) => void`  | Non         | Gestionnaire personnalisé des toasts d’erreur        |
        | `methods.warning` | `(message: string) => void`  | Non         | Gestionnaire personnalisé des toasts d’avertissement |
        | `methods.info`    | `(message: string) => void`  | Non         | Gestionnaire personnalisé des toasts d’information   |
        | `methods.dismiss` | `(toastId?: string) => void` | Non         | Gestionnaire personnalisé de fermeture               |

        ```tsx Exemple de fournisseur personnalisé theme={null}
        const toastSettings = {
          provider: 'custom',
          methods: {
            success: (message: string) => {
              // Votre implémentation personnalisée de toast de succès
              myToastLibrary.success(message);
            },
            error: (message: string) => {
              // Votre implémentation personnalisée de toast d’erreur
              myToastLibrary.error(message);
            },
            warning: (message: string) => {
              // Votre implémentation personnalisée de toast d’avertissement
              myToastLibrary.warning(message);
            },
            info: (message: string) => {
              // Votre implémentation personnalisée de toast 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 performance

    Affinez la mise en cache de TanStack Query pour chaque composant Auth0. Par défaut, les données restent fraîches pendant deux minutes, sont collectées par le ramasse-miettes après cinq minutes, et les rechargements au focus de 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 complètement la mise en cache. Lorsqu’elle est définie sur <code>false</code>, l’utilisation des données périmées est
            désactivée et les entrées mises en cache sont rapidement effacé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 (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>
            Détermine si les requêtes sont récupérées de nouveau lorsque le navigateur redevient actif. Utilisez{" "}
            <code>"always"</code> pour garantir une fraîcheur stricte.
          </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 la période de garbage collection à 5 secondes, de sorte 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 consoles d’administration qui nécessitent des mises à jour quasi en temps réel.
    </Callout>

    <Tabs>
      <Tab title="Configurer 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>