Référence pour Auth0ComponentProvider

Le composant Auth0ComponentProvider est le conteneur racine obligatoire pour tous les composants universels d’Auth0. Il synchronise votre état d’authentification avec l’interface utilisateur et fournit un contexte partagé pour :

Authentification – Signe les requêtes de Management API automatiquement
Thèmes et i18n – Injecte des traductions et des style dans l’ensemble de l’arborescence des composants
Rétroaction – Gère un système de notifications toast unifié (Sonner ou personnalisé)
Performances – Met en oeuvre un cache de requêtes TanStack partagé pour éviter les appels API redondants

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 }}
    >
      <Auth0ComponentProvider
        authDetails={{ domain: "your-tenant.auth0.com" }}
      >
        {/* Your app with Auth0 Universal Components */}
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

Propriétés

Propriété	Type	Obligatoire	Description
`authDetails`	`AuthDetails`	Non	Configuration de l’authentification, incluant le domaine, authProxyUrl et contextInterface
`i18n`	`I18nOptions`	Non	Les paramètres d’internationalisation, notamment currentLanguage et fallbackLanguage
`themeSettings`	`ThemeSettings`	Non	La configuration du thème, incluant le mode (clair/sombre), la variante du thème (par défaut/minimaliste/arrondi) et les variables CSS
`toastSettings`	`ToastSettings`	Non	Configuration des notifications toast, y compris la sélection du fournisseur (Sonner/personnalisé), le positionnement, la durée et les méthodes toast personnalisées
`cacheConfig`	`QueryCacheConfig`	Non	Contrôle le cache TanStack Query (valeur par défaut : deux minutes avant péremption/cinq minutes avant suppression). 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

authDetails

Propriété	Type	Obligatoire	Description
`domain`	`string`	Non	Votre domaine Auth0 (p. ex., « votre-locataire.auth0.com »)
`authProxyUrl`	`string`	Conditionnel	URL à votre serveur d’authentification mandataire pour l’authentification côté serveur. Requis pour le mode RWA/Next.js (active le mode proxy).
`contextInterface`	`BasicAuth0ContextInterface`	Non	Interface de contexte personnalisée d’authentification pour les cadre d’applications autres que @auth0/auth0-react. Fournit des fonctionnalités d’authentification (getAccessTokenSilently, loginWithRedirect, etc.) lorsque la trousse SDK Auth0 React n’est pas utilisée.
`previewMode`	`boolean`	Non	Si la valeur est `true`, l’initialisation du client API est ignorée. Utilisé pour les aperçus de documentation et les démonstrations.

i18n

Propriété	Type	Obligatoire	Par défaut	Description
`currentLanguage`	`string`	Oui	-	Code de langue actuel (p. ex., « en », « es », « fr »)
`fallbackLanguage`	`string`	Non	`"en"`	Code de langue de remplacement en cas d’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 avec différentes approches de style
`variables`	`StylingVariables`	`{}`	Propriétés CSS personnalisées pour les thèmes courants, clairs et sombres

Variables CSS disponibles

Courant (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-labelRayon de la bordure :

--radius-xs through --radius-9xl

Clair et sombre (ombrages et couleur 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-mutedOmbrages :– --shadow-bevel-* (xs, sm, md, lg, xl, 2xl) – --shadow-button-* (resting, hover, focus) – --shadow-button-destructive-* – --shadow-button-outlined-* – --shadow-input-* (resting, hover, focus) – --shadow-input-destructive-* – --shadow-checkbox-* (resting, hover) – --shadow-switch-* (resting, hover, focus, thumb, thumb-dark)

Pour des exemples de style détaillés et des modèles de personnalisation, consultez le Guide de style et de thèmes.

toastSettings

Les paramètres 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écurité des types.

Fournisseur Sonner (par défaut)
Fournisseur personnalisé

Propriété	Type	Défault	Description
`provider`	`"sonner"`	`"sonner"`	Utilise la librairie Sonner intégrée
`settings.position`	`ToastPosition`	`"top-right"`	Position où le toast s’affiche : “top-left”, “top-right”, “bottom-left”, “bottom-right”, “top-center”, “bottom-center”
`settings.duration`	`number`	`4000`	Durée en millisecondes avant que le toast disparaisse (Défault pour Sonner)
`settings.maxToasts`	`number`	-	Nombre maximum de toasts visibiles en même temps
`settings.dismissible`	`boolean`	`true`	Détermine si les toasts peuvent être masqués manuellement par l’utilisateur (Défaut pour Sonner)
`settings.closeButton`	`boolean`	`true`	Détermine si un bouton Fermer est affiché explicitement dans lest toasts

Sonner Provider Example

const toastSettings = {
  provider: 'sonner', // Optional, this is the default
  settings: {
    position: 'top-center',
    duration: 6000,
    maxToasts: 5,
    dismissible: true,
    closeButton: true
  }
};

Propriété	Type	Requis	Description
`provider`	`"custom"`	Oui	Utilise votre mise en œuvre personnalisée de toasts
`methods.success`	`(message: string) => void`	Non	Gestionnaire personnalisé de notifications de succès
`methods.error`	`(message: string) => void`	Non	Gestionnaire personnalisé de notifications d’erreurs
`methods.warning`	`(message: string) => void`	Non	Gestionnaire personnalisé de notifications d’avertissement
`methods.info`	`(message: string) => void`	Non	Gestionnaire personnalisé de notifications d’informations
`methods.dismiss`	`(toastId?: string) => void`	Non	Gestionnaire de fermeture personnalisé

Custom Provider Example

const toastSettings = {
  provider: 'custom',
  methods: {
    success: (message: string) => {
      // Your custom success toast implementation
      myToastLibrary.success(message);
    },
    error: (message: string) => {
      // Your custom error toast implementation
      myToastLibrary.error(message);
    },
    warning: (message: string) => {
      // Your custom warning toast implementation
      myToastLibrary.warning(message);
    },
    info: (message: string) => {
      // Your custom info toast implementation
      myToastLibrary.info(message);
    },
    dismiss: (toastId?: string) => {
      // Your custom dismiss implementation
      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 mise en œuvre gère le style, le positionnement et la durée.

cacheConfig

Affiner la mise en cache de TanStack Query pour chaque composant Auth0. Par défaut, les données restent fraîches pendant deux minutes, sont supprimées par la récupération de l’espace mémoire après cinq minutes et ne sont pas rafraîchies lors du retour à la fenêtre.

Propriété	Type	Par défaut	Description
`enabled`	`boolean`	`true`	Active ou désactive complètement la mise en cache. Lorsque cette option est définie sur `false`, les données périmées sont désactivées et les entrées en cache sont rapidement effacées.
`staleTime`	`number`	`120000`	Millisecondes avant la péremption des données (deux minutes par défaut). Augmenter pour les tableaux de bord, diminuer pour les flux de production critiques.
`gcTime`	`number`	`300000`	Délai en millisecondes avant que les requêtes inactives ne soient supprimées par la récupération de mémoire (cinq minutes par défaut).
`refetchOnWindowFocus`	`boolean \| "always"`	`false`	Contrôle si les requêtes sont réexaminées lorsque le navigateur reprend le focus. Utilisez `always` pour une mise à jour stricte.

Désactivez la mise en cache : passez { enabled: false }. Cela définit automatiquement le délai de péremption staleTime à 0 et réduit la fenêtre de récupération de mémoire à cinq secondes, garantissant que chaque rendu récupère des données fraîches.Conseil d’expert : gardez la mise en cache activée, mais réduisez le délai de péremption staleTime pour les interfaces d’administration qui nécessitent des mises à jour en quasi temps réel.

Régler la durée de vie
Désactiver le cache

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

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

My Organization

​Propriétés

​authDetails

​i18n

​themeSettings

​toastSettings

​cacheConfig

Propriétés

authDetails

i18n

themeSettings

toastSettings

cacheConfig