Configurer Auth0ComponentProvider

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

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. Pour en savoir plus, consultez Phases de lancement des produits.

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

​

Avantages

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 et l’API My Account 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.

​

Architecture d’intégration

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.

​

Configurer Auth0ComponentProvider

React

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

Propriété	Type	Obligatoire	Description
domain	string	Oui	Domaine du locataire Auth0 (“YOUR_AUTH0_TENANT.auth0.com”).
previewMode	boolean	Non	Lorsque true, ignore l’initialisation du client d’API. Utilisé pour les prévisualisations de la 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 (light/dark), la variante du 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 toast personnalisées.
cacheConfig	QueryCacheConfig	Non	Contrôle la mise en cache de TanStack Query (durée stale de deux min / GC de cinq min 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.

---

​

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.

Propriété	Type	Obligatoire	Par défaut	Description
currentLanguage	string	Oui	-	Code de la langue courante (p. ex., “en”, “es”, “fr”)
fallbackLanguage	string	Non	”en”	Code de la langue de remplacement lorsque des traductions sont manquantes

---

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

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.

---

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.

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

Exemple de provider Sonner

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

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

Exemple de provider personnalisé

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

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.

---

​

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

Propriété	Type	Valeur par défaut	Description
enabled	boolean	true	Active ou désactive entièrement la mise en cache. Lorsque cette option est définie sur 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. 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.
gcTime	number	300000	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.
refetchOnWindowFocus	boolean | “always”	false	Détermine si les requêtes sont récupérées de nouveau lorsque la fenêtre du navigateur retrouve le focus. Utilisez “always” pour garantir une fraîcheur maximale.

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.

Régler le TTL

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

Désactiver le cache

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

Next.js

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 locataire Auth0 (p. ex., “your-tenant.auth0.com”). Requis pour le mode proxy.
mode	’proxy’	Oui	Pour Next.js, utilisez toujours le mode ‘proxy’ pour l’authentification côté serveur.
proxyConfig	{ baseUrl: string }	Oui	Configuration du proxy avec l’URL de base de votre serveur proxy d’authentification.
previewMode	boolean	Non	Lorsque true, n’initialise pas le client d’API. Utilisé pour les aperçus de la 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/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), le positionnement, la durée et les méthodes toast personnalisées.
cacheConfig	QueryCacheConfig	Non	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 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.

---

​

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 pour l’authentification en mode proxy. Requis lors de l’utilisation de 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 s’ajoutent à ce chemin de base.

---

​

Expérience utilisateur

---

i18n

Propriété	Type	Obligatoire	Par défaut	Description
currentLanguage	string	Oui	-	Code de la langue actuelle (p. ex., “en”, “es”, “fr”)
fallbackLanguage	string	Non	”en”	Code de la langue de remplacement lorsque des traductions sont manquantes

---

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 sombre

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

Pour des exemples détaillés de styles et d’approches de personnalisation, consultez Personnaliser le style et les thèmes avec Universal Components.

---

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.

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

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

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

Custom Provider Example

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

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.

---

​

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

Propriété	Type	Valeur par défaut	Description
enabled	boolean	true	Active ou désactive entièrement la mise en cache. Lorsqu’elle est définie à false, les données obsolètes ne sont plus utilisées et les entrées en cache sont rapidement supprimées.
staleTime	number	120000	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.
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 exécutées de nouveau lorsque le navigateur retrouve le focus. Utilisez “always” pour garantir une fraîcheur stricte.

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.

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>

shadcn

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

Propriété	Type	Obligatoire	Description
domain	string	Oui	Domaine du locataire Auth0 (p. ex., “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, n’initialise pas le client d’API. Utilisé pour les aperçus de la documentation et les démos.
i18n	I18nOptions	Non	Paramètres d’internationalisation, y compris currentLanguage et fallbackLanguage.
themeSettings	ThemeSettings	Non	Configuration du thème, y compris le mode (light/dark), 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), la position, la durée et les méthodes toast personnalisées.
cacheConfig	QueryCacheConfig	Non	Contrôle la mise en cache de TanStack Query (deux minutes avant expiration / 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 (p. ex., “en”, “es”, “fr”)
fallbackLanguage	string	Non	”en”	Code de langue de secours si des traductions sont manquantes

---

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 sombre

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)

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.

---

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.

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

Exemple de fournisseur Sonner

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

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

Exemple de fournisseur personnalisé

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

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

Propriété	Type	Par défaut	Description
enabled	boolean	true	Active ou désactive complètement la mise en cache. Lorsqu’elle est définie sur false, l’utilisation des données périmées est désactivée et les entrées mises en cache sont rapidement effacé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 (5 minutes par défaut).
refetchOnWindowFocus	boolean | “always”	false	Détermine si les requêtes sont récupérées de nouveau lorsque le navigateur redevient actif. Utilisez “always” pour garantir une fraîcheur stricte.

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.

Configurer le TTL

App.tsx

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

Désactiver le cache

App.tsx

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