Configurer Auth0ComponentProvider

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
Next.js
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 (“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

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

toastSettingsLes 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)
Provider personnalisé

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

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

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

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>

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.

Fournisseur Sonner (par défaut)
Fournisseur personnalisé

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

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

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

​Avantages

​Architecture d’intégration

​Configurer Auth0ComponentProvider

​Propriétés

​Expérience utilisateur

​État et performance

​Propriétés

​Configurer le mode proxy

​Propriétés du mode proxy

​Expérience utilisateur

​État et performance

​Propriétés

​Expérience utilisateur

​État et performance

Avantages

Architecture d’intégration

Configurer `Auth0ComponentProvider`

Propriétés

Expérience utilisateur

État et performance

Propriétés

Configurer le mode proxy

Propriétés du mode proxy

Expérience utilisateur

État et performance

Propriétés

Expérience utilisateur

État et performance