Configurer Auth0ComponentProvider

Le Auth0ComponentProvider est la couche d’orchestration des Auth0 Universal Components. 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.

Avantages

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 et la 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.

Architecture d’intégration

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.

Configurer `Auth0ComponentProvider`

React
Next.js
shadcn

Recommandation de sécurité : Pour les applications de production qui gèrent la configuration des Organizations, Auth0 recommande la configuration 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 afin de comprendre les compromis.

App.tsx

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

Propriété	Type	Obligatoire	Description
`domain`	`string`	Oui	Domaine du tenant Auth0 (“YOUR_AUTH0_TENANT.auth0.com”).
`previewMode`	`boolean`	Non	Lorsqu’il est défini sur `true`, l’initialisation du client API est ignorée. Utilisé pour les aperçus et les démos de la documentation.
`i18n`	`I18nOptions`	Non	Paramètres d’internationalisation, notamment currentLanguage et fallbackLanguage.
`themeSettings`	`ThemeSettings`	Non	Configuration du thème, y compris le mode (clair/sombre), la variante de thème (default/minimal/rounded) et les variables CSS.
`toastSettings`	`ToastSettings`	Non	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.
`cacheConfig`	`QueryCacheConfig`	Non	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 `enabled: false` pour forcer l’utilisation de données à jour.
`loader`	`React.ReactNode`	Non	Composant de chargement personnalisé à afficher pendant l’initialisation de l’authentification.

Expérience utilisateur

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

Propriété	Type	Obligatoire	Par défaut	Description
`currentLanguage`	`string`	Oui	-	Code de la langue actuelle (par exemple, “en”, “es”, “fr”)
`fallbackLanguage`	`string`	Non	`”en”`	Code de la langue de secours lorsque des traductions sont absentes

themeSettings

Propriété	Type	Par défaut	Description
`mode`	`”light” \| “dark"`	`"light”`	Mode de couleur du thème
`theme`	`”default” \| “minimal” \| “rounded"`	`"default”`	Variante de thème proposant différents styles visuels
`variables`	`StylingVariables`	Propriétés CSS personnalisées pour les thèmes commun, clair et foncé

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é)

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.

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

Fournisseur Sonner (par défaut)
Custom Provider

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

Sonner Provider Example

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
  }
};

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

Custom Provider Example

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);
    }
  }
};

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.

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

Propriété	Type	Par défaut	Description
`enabled`	`boolean`	`true`	Active ou désactive la mise en cache. Lorsque cette option est définie sur `false`, les données obsolètes sont désactivées et les entrées du cache sont rapidement supprimées.
`staleTime`	`number`	`120000`	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.
`gcTime`	`number`	`300000`	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.
`refetchOnWindowFocus`	`boolean \| “always”`	`false`	Indique si les requêtes sont relancées lorsque le navigateur reprend le focus. Utilisez `“always”` pour garantir des données toujours à jour.

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.

Configurer le TTL
Désactiver le cache

<Auth0ComponentProvider
  domain="your-tenant.auth0.com"
  cacheConfig={{
    staleTime: 10 * 60 * 1000,
    gcTime: 15 * 60 * 1000,
    refetchOnWindowFocus: true,
  }}
>
  <App />
</Auth0ComponentProvider>

<Auth0ComponentProvider
  domain="your-tenant.auth0.com"
  cacheConfig={{ enabled: false }}
>
  <App />
</Auth0ComponentProvider>

layout.tsx

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

Propriété	Type	Obligatoire	Description
`domain`	`string`	Oui	Domaine du tenant Auth0 (par exemple, “your-tenant.auth0.com”). Obligatoire en mode proxy.
`mode`	`’proxy’`	Oui	Avec Next.js, utilisez toujours le mode `‘proxy’` pour l’authentification côté serveur.
`proxyConfig`	`{ baseUrl: string }`	Oui	Configuration du proxy contenant l’URL de base de votre serveur proxy d’authentification.
`previewMode`	`boolean`	Non	Lorsque `true`, l’initialisation du client API est ignorée. Utilisé pour les aperçus et les démos de la documentation.
`i18n`	`I18nOptions`	Non	Paramètres d’internationalisation, dont currentLanguage et fallbackLanguage.
`themeSettings`	`ThemeSettings`	Non	Configuration du thème, y compris le mode (clair/sombre), la variante de thème (default/minimal/rounded) et les variables CSS.
`toastSettings`	`ToastSettings`	Non	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.
`cacheConfig`	`QueryCacheConfig`	Non	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 `enabled: false` pour forcer l’actualisation des données.
`loader`	`React.ReactNode`	Non	Composant de chargement personnalisé à afficher pendant l’initialisation de l’authentification.

Configurer le mode proxy

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

layout.tsx

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.

Propriété	Type	Obligatoire	Description
`baseUrl`	`string`	Oui	URL de votre serveur proxy d’authentification (par exemple, “/api/auth”). Les appels d’API sont ajoutés à ce chemin de base.

Expérience utilisateur

i18n

Propriété	Type	Obligatoire	Par défaut	Description
`currentLanguage`	`string`	Oui	-	Code de la langue actuelle (par exemple, “en”, “es”, “fr”)
`fallbackLanguage`	`string`	Non	`”en”`	Code de langue de secours en l’absence de traductions

themeSettings

Propriété	Type	Par défaut	Description
`mode`	`”light” \| “dark"`	`"light”`	Mode de couleur du thème
`theme`	`”default” \| “minimal” \| “rounded"`	`"default”`	Variante de thème offrant différentes options de style
`variables`	`StylingVariables`	Propriétés CSS personnalisées pour les thèmes commun, clair et foncé

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)

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.

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

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

Sonner Provider Example

const toastSettings = {
  provider: 'sonner', // Facultatif, c'est la valeur par défaut
  settings: {
    position: 'top-center',
    duration: 6000,
    maxToasts: 5,
    dismissible: true,
    closeButton: true
  }
};

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é

Custom Provider Example

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);
    }
  }
};

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.

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

Propriété	Type	Par défaut	Description
`enabled`	`boolean`	`true`	Active ou désactive complètement la mise en cache. Lorsque défini à `false`, les données périmées ne sont plus utilisées et les entrées mises en cache sont rapidement supprimées.
`staleTime`	`number`	`120000`	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.
`gcTime`	`number`	`300000`	Nombre de millisecondes avant que les requêtes inactives soient supprimées par le ramasse-miettes (cinq minutes par défaut).
`refetchOnWindowFocus`	`boolean \| “always”`	`false`	Détermine si les requêtes sont récupérées de nouveau lorsque le navigateur reprend le focus. Utilisez `“always”` pour garantir la fraîcheur des données.

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.

Régler le TTL

layout.tsx

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

Désactiver le cache

layout.tsx

<Auth0ComponentProvider
  mode="proxy"
  domain="your-tenant.auth0.com"
  proxyConfig={{ baseUrl: "/api/auth" }}
  cacheConfig={{ enabled: false }}
>
  <App />
</Auth0ComponentProvider>

Recommandation de sécurité : Pour les applications de production qui gèrent la configuration d’une Organization, Auth0 recommande la configuration 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 afin de comprendre les compromis.

App.tsx

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

Propriété	Type	Obligatoire	Description
`domain`	`string`	Oui	Domaine du tenant Auth0 (par exemple, “your-tenant.auth0.com”).
`authContext`	`ContextInterface`	Non	Contexte d’authentification personnalisé pour les SPA qui n’utilisent pas `@auth0/auth0-react`. Fournit des fonctions d’authentification, comme `getAccessTokenSilently`.
`previewMode`	`boolean`	Non	Lorsque `true`, l’initialisation du client API est ignorée. Utilisé pour les aperçus de documentation et les démonstrations.
`i18n`	`I18nOptions`	Non	Paramètres d’internationalisation, y compris currentLanguage et fallbackLanguage.
`themeSettings`	`ThemeSettings`	Non	Configuration du thème, y compris le mode (clair/foncé), la variante de thème (par défaut/minimal/arrondi) et les variables CSS.
`toastSettings`	`ToastSettings`	Non	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.
`cacheConfig`	`QueryCacheConfig`	Non	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 `enabled: false` pour forcer l’obtention de données à jour.
`loader`	`React.ReactNode`	Non	Composant de chargement personnalisé à afficher pendant l’initialisation de l’authentification.

Expérience utilisateur

i18n

Propriété	Type	Obligatoire	Par défaut	Description
`currentLanguage`	`string`	Oui	-	Code de la langue actuelle (par exemple, “en”, “es”, “fr”)
`fallbackLanguage`	`string`	Non	`”en”`	Code de la langue de secours lorsque des traductions sont absentes

themeSettings

Propriété	Type	Par défaut	Description
`mode`	`”light” \| “dark"`	`"light”`	Mode de couleur du thème
`theme`	`”default” \| “minimal” \| “rounded"`	`"default”`	Variante de thème proposant différents styles
`variables`	`StylingVariables`	Propriétés CSS personnalisées pour les thèmes commun, clair et foncé

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é)

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.

Fournisseur Sonner (par défaut)
Custom Provider

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

Sonner Provider Example

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
  }
};

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

Custom Provider Example

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);
    }
  }
};

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.

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

Propriété	Type	Par défaut	Description
`enabled`	`boolean`	`true`	Active ou désactive entièrement la mise en cache. Lorsqu’elle est définie sur `false`, les données périmées sont désactivées et les entrées mises en cache sont rapidement supprimées.
`staleTime`	`number`	`120000`	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.
`gcTime`	`number`	`300000`	Nombre de millisecondes avant que les requêtes inactives ne soient supprimées par le ramasse-miettes (5 minutes par défaut).
`refetchOnWindowFocus`	`boolean \| “always”`	`false`	Indique si les requêtes sont récupérées à nouveau lorsque le navigateur reprend le focus. Utilisez `“always”` pour garantir des données toujours à jour.

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.

Régler le TTL
Désactiver le cache

App.tsx

<Auth0ComponentProvider
  domain="your-tenant.auth0.com"
  cacheConfig={{
    staleTime: 10 * 60 * 1000,
    gcTime: 15 * 60 * 1000,
    refetchOnWindowFocus: true,
  }}
>
  <App />
</Auth0ComponentProvider>

App.tsx

<Auth0ComponentProvider
  domain="your-tenant.auth0.com"
  cacheConfig={{ enabled: false }}
>
  <App />
</Auth0ComponentProvider>

Composants Web

Composants iOS

Composants Android

Configurer Auth0ComponentProvider

Avantages

Architecture d’intégration

Configurer `Auth0ComponentProvider`

Propriétés

Expérience utilisateur

État et performances

Propriétés

Configurer le mode proxy

Propriétés du mode proxy

Expérience utilisateur

État et performances

Propriétés

Expérience utilisateur

État et performance

​Avantages

​Architecture d’intégration

​Configurer Auth0ComponentProvider

​Propriétés

​Expérience utilisateur

​État et performances

​Propriétés

​Configurer le mode proxy

​Propriétés du mode proxy

​Expérience utilisateur

​État et performances

​Propriétés

​Expérience utilisateur

​État et performance

Avantages

Architecture d’intégration

Configurer `Auth0ComponentProvider`

Propriétés

Expérience utilisateur

État et performances

Propriétés

Configurer le mode proxy

Propriétés du mode proxy

Expérience utilisateur

État et performances

Propriétés

Expérience utilisateur

État et performance