Descubre cómo Auth0ComponentProvider sincroniza la autenticación, la internacionalización, los temas, las notificaciones emergentes y las opciones de almacenamiento en caché.
Auth0ComponentProvider es la capa de orquestación de Auth0 Universal Components. Los SDK de Auth0 administran sesiones y tokens, y Auth0ComponentProvider traduce ese estado de identidad en un contexto de interfaz de usuario funcional y alineado con la marca. Auth0ComponentProvider se asegura de que los componentes, como la inscripción en MFA, tengan los permisos, los datos en caché y los estilos necesarios.
Auth0ComponentProvider es el contenedor raíz obligatorio para todos los Auth0 Universal Components. Los beneficios de usar este contenedor son:
Alineación de identidad: Conecta los SDK de Auth0 con la My Account API para garantizar que las solicitudes se firmen con tokens con scope de usuario.
Optimización del rendimiento: Implementa una caché compartida de TanStack Query específicamente ajustada para flujos de identidad, lo que evita llamadas redundantes a la API y cambios bruscos en el diseño.
Consistencia del sistema de diseño: Propaga variables de Tailwind CSS y temas compatibles con Shadcn en todo el árbol de componentes.
Feedback global: Gestiona un sistema unificado de notificaciones toast para alertas de seguridad y el estado del flujo de trabajo.
Anide Auth0ComponentProvider en su proveedor de autenticación (Auth0Provider). Esta configuración permite acceder al estado de autenticación y a los métodos de obtención de tokens necesarios para llamar a las API de Auth0.
Dominio del inquilino de Auth0 (“YOUR_AUTH0_TENANT.auth0.com”).
previewMode
boolean
No
Cuando true, omite la inicialización del cliente de la API. Se usa para vistas previas de la documentación y demostraciones.
i18n
I18nOptions
No
Configuración de internacionalización, incluidos currentLanguage y fallbackLanguage.
themeSettings
ThemeSettings
No
Configuración del tema, incluido el modo (light/dark), la variante del tema (default/minimal/rounded) y las variables CSS.
toastSettings
ToastSettings
No
Configuración de las notificaciones toast, incluida la selección del proveedor (sonner/custom), la posición, la duración y los métodos toast personalizados.
cacheConfig
QueryCacheConfig
No
Controla el almacenamiento en caché de TanStack Query (dos min de stale / cinco min de GC de forma predeterminada). Establece enabled: false para forzar datos actualizados.
loader
React.ReactNode
No
Componente de carga personalizado que se muestra durante la inicialización de la autenticación.
toastSettingsLa configuración de Toast admite dos tipos de proveedor: Sonner (predeterminado) o personalizado. Cada proveedor tiene su propia estructura de configuración para mayor seguridad de tipos.
Proveedor Sonner (predeterminado)
Proveedor personalizado
Propiedad
Tipo
Predeterminado
Descripción
provider
"sonner"
"sonner"
Usa la biblioteca integrada de toasts Sonner
settings.position
ToastPosition
"top-right"
Posición en la que aparecen los toasts: “top-left”, “top-right”, “bottom-left”, “bottom-right”, “top-center”, “bottom-center”
settings.duration
number
4000
Duración en milisegundos antes de que el toast se cierre automáticamente (valor predeterminado de Sonner)
settings.maxToasts
number
-
Número máximo de toasts visibles al mismo tiempo
settings.dismissible
boolean
true
Indica si los toasts se pueden cerrar manualmente mediante la interacción del usuario (valor predeterminado de Sonner)
settings.closeButton
boolean
true
Indica si se debe mostrar un botón de cierre explícito en los toasts
Sonner Provider Example
const toastSettings = { provider: 'sonner', // Opcional, este es el valor predeterminado settings: { position: 'top-center', duration: 6000, maxToasts: 5, dismissible: true, closeButton: true }};
Propiedad
Tipo
Obligatorio
Descripción
provider
"custom"
Sí
Usa tu implementación personalizada de toast
methods.success
(message: string) => void
No
Manejador personalizado para toast de éxito
methods.error
(message: string) => void
No
Manejador personalizado para toast de error
methods.warning
(message: string) => void
No
Manejador personalizado para toast de advertencia
methods.info
(message: string) => void
No
Manejador personalizado para toast informativo
methods.dismiss
(toastId?: string) => void
No
Manejador personalizado para cerrar
Custom Provider Example
const toastSettings = { provider: 'custom', methods: { success: (message: string) => { // Tu implementación personalizada para toast de éxito myToastLibrary.success(message); }, error: (message: string) => { // Tu implementación personalizada para toast de error myToastLibrary.error(message); }, warning: (message: string) => { // Tu implementación personalizada para toast de advertencia myToastLibrary.warning(message); }, info: (message: string) => { // Tu implementación personalizada para toast informativo myToastLibrary.info(message); }, dismiss: (toastId?: string) => { // Tu implementación personalizada para cerrar myToastLibrary.dismiss(toastId); } }};
Todos los métodos personalizados son opcionales. Implementa solo los que necesites. Los métodos
reciben solo el texto del mensaje; tu implementación se encarga del estilo,
la posición y la duración.
Ajusta con precisión el almacenamiento en caché de TanStack Query para cada componente de Auth0. Los valores predeterminados mantienen los datos actualizados durante dos minutos, los recopilan como basura tras cinco minutos y omiten las recargas al enfocar la ventana.
Propiedad
Tipo
Valor predeterminado
Descripción
enabled
boolean
true
Activa o desactiva por completo el almacenamiento en caché. Cuando se establece en false, se desactiva el uso de datos obsoletos y las entradas en caché se eliminan rápidamente.
staleTime
number
120000
Milisegundos antes de que los datos se consideren obsoletos. El valor predeterminado es de dos minutos. Auméntelo para paneles y redúzcalo para flujos de trabajo críticos.
gcTime
number
300000
Milisegundos antes de que las consultas inactivas se eliminen mediante recolección de basura. El valor predeterminado es de cinco minutos.
refetchOnWindowFocus
boolean | “always”
false
Controla si las consultas se vuelven a ejecutar cuando el navegador recupera el foco. Use
“always” para mantener la máxima frescura.
Desactivar el almacenamiento en caché: Pasa { enabled: false }. Esto establece automáticamente staleTime en 0 y reduce la ventana de recolección de basura a cinco segundos, de modo que cada renderizado obtenga datos actualizados.Sugerencia: Mantén el almacenamiento en caché habilitado, pero reduce staleTime al integrarlo con paneles de administración que requieren actualizaciones casi en tiempo real.
Dominio del inquilino de Auth0 (por ejemplo, “your-tenant.auth0.com”). Obligatorio para el modo proxy.
mode
’proxy’
Sí
En Next.js, use siempre el modo ‘proxy’ para la autenticación en el servidor.
proxyConfig
{ baseUrl: string }
Sí
Configuración del proxy con la URL base de su servidor proxy de autenticación.
previewMode
boolean
No
Cuando es true, omite la inicialización del cliente de la API. Se usa para vistas previas de la documentación y demostraciones.
i18n
I18nOptions
No
Configuración de internacionalización, incluidos currentLanguage y fallbackLanguage.
themeSettings
ThemeSettings
No
Configuración del tema, incluido el modo (claro/oscuro), la variante del tema (default/minimal/rounded) y las variables CSS.
toastSettings
ToastSettings
No
Configuración de las notificaciones toast, incluida la selección del proveedor (sonner/custom), la posición, la duración y los métodos toast personalizados.
cacheConfig
QueryCacheConfig
No
Controla el almacenamiento en caché de TanStack Query (dos min de caducidad / cinco min de GC de forma predeterminada). Establezca enabled: false para forzar la obtención de datos nuevos.
loader
React.ReactNode
No
Componente de carga personalizado que se muestra durante la inicialización de la autenticación.
toastSettingsLa configuración de Toast admite dos tipos de proveedor: Sonner (predeterminado) o personalizado. Cada proveedor tiene su propia estructura de configuración para mayor seguridad de tipos.
Sonner Provider (predeterminado)
Propiedad
Tipo
Predeterminado
Descripción
provider
"sonner"
"sonner"
Usa la biblioteca integrada de toasts Sonner
settings.position
ToastPosition
"top-right"
Posición en la que aparecen los toasts: “top-left”, “top-right”, “bottom-left”, “bottom-right”, “top-center”, “bottom-center”
settings.duration
number
4000
Duración en milisegundos antes de que el toast se cierre automáticamente (valor predeterminado de Sonner)
settings.maxToasts
number
-
Número máximo de toasts visibles al mismo tiempo
settings.dismissible
boolean
true
Indica si los toasts se pueden cerrar manualmente mediante la interacción del usuario (valor predeterminado de Sonner)
settings.closeButton
boolean
true
Indica si se debe mostrar un botón de cierre explícito en los toasts
Sonner Provider Example
const toastSettings = { provider: 'sonner', // Opcional, este es el valor predeterminado settings: { position: 'top-center', duration: 6000, maxToasts: 5, dismissible: true, closeButton: true }};
Provider personalizado
Propiedad
Tipo
Obligatorio
Descripción
provider
"custom"
Sí
Usa tu implementación personalizada de toast
methods.success
(message: string) => void
No
Manejador personalizado para toast de éxito
methods.error
(message: string) => void
No
Manejador personalizado para toast de error
methods.warning
(message: string) => void
No
Manejador personalizado para toast de advertencia
methods.info
(message: string) => void
No
Manejador personalizado para toast informativo
methods.dismiss
(toastId?: string) => void
No
Manejador personalizado para cerrar
Custom Provider Example
const toastSettings = { provider: 'custom', methods: { success: (message: string) => { // Tu implementación personalizada de toast de éxito myToastLibrary.success(message); }, error: (message: string) => { // Tu implementación personalizada de toast de error myToastLibrary.error(message); }, warning: (message: string) => { // Tu implementación personalizada de toast de advertencia myToastLibrary.warning(message); }, info: (message: string) => { // Tu implementación personalizada de toast de información myToastLibrary.info(message); }, dismiss: (toastId?: string) => { // Tu implementación personalizada para descartar myToastLibrary.dismiss(toastId); } }};
Todos los métodos personalizados son opcionales. Implementa solo los que necesites. Los métodos reciben únicamente el texto del mensaje; tu implementación se encarga del estilo, la posición y la duración.
Ajusta el almacenamiento en caché de TanStack Query para cada componente de Auth0. Los valores predeterminados mantienen los datos actualizados durante dos minutos, los recolectan como basura tras cinco minutos y omiten las recargas al enfocar la ventana.
Propiedad
Tipo
Predeterminado
Descripción
enabled
boolean
true
Activa o desactiva por completo el almacenamiento en caché. Cuando se establece en false, se desactiva el uso de datos obsoletos y las entradas en caché se eliminan rápidamente.
staleTime
number
120000
Milisegundos antes de que los datos se consideren obsoletos (dos minutos de forma predeterminada). Auméntelo para paneles de control y redúzcalo para flujos de trabajo críticos.
gcTime
number
300000
Milisegundos antes de que las consultas inactivas se eliminen mediante recolección de basura (cinco minutos de forma predeterminada).
refetchOnWindowFocus
boolean | “always”
false
Controla si las consultas se vuelven a ejecutar cuando el navegador recupera el foco. Use
“always” para mantener la máxima actualización.
Deshabilitar la caché: Pasa { enabled: false }. Esto establece automáticamente staleTime en 0 y reduce la ventana de recolección de basura a 5 segundos para que cada renderizado obtenga datos nuevos.Consejo: Mantén la caché habilitada, pero reduce staleTime al integrarlo con paneles de administración que requieren actualizaciones casi en tiempo real.
Dominio del inquilino de Auth0 (por ejemplo, “your-tenant.auth0.com”).
authContext
ContextInterface
No
Contexto de autenticación personalizado para SPA que no usan @auth0/auth0-react. Proporciona funciones de autenticación, como getAccessTokenSilently.
previewMode
boolean
No
Cuando true, omite la inicialización del cliente de API. Se usa para vistas previas de la documentación y demostraciones.
i18n
I18nOptions
No
Configuración de internacionalización que incluye currentLanguage y fallbackLanguage.
themeSettings
ThemeSettings
No
Configuración del tema, incluido el modo (claro/oscuro), la variante del tema (default/minimal/rounded) y las variables CSS.
toastSettings
ToastSettings
No
Configuración de las notificaciones toast, incluida la selección del proveedor (sonner/custom), la posición, la duración y métodos toast personalizados.
cacheConfig
QueryCacheConfig
No
Controla el almacenamiento en caché de TanStack Query (dos minutos de staleness y cinco minutos de GC de forma predeterminada). Establece enabled: false para forzar datos actualizados.
loader
React.ReactNode
No
Componente de carga personalizado que se muestra durante la inicialización de la autenticación.
toastSettingsLa configuración de Toast admite dos tipos de proveedor: Sonner (predeterminado) o personalizado. Cada proveedor tiene su propia estructura de configuración para mayor seguridad de tipos.
Proveedor Sonner (predeterminado)
Proveedor personalizado
Propiedad
Tipo
Predeterminado
Descripción
provider
"sonner"
"sonner"
Usa la biblioteca Sonner integrada para toasts
settings.position
ToastPosition
"top-right"
Posición en la que aparecen los toasts: “top-left”, “top-right”, “bottom-left”, “bottom-right”, “top-center”, “bottom-center”
settings.duration
number
4000
Duración en milisegundos antes de que el toast se cierre automáticamente (valor predeterminado de Sonner)
settings.maxToasts
number
-
Número máximo de toasts visibles al mismo tiempo
settings.dismissible
boolean
true
Si los toasts se pueden cerrar manualmente mediante la interacción del usuario (valor predeterminado de Sonner)
settings.closeButton
boolean
true
Si se debe mostrar un botón de cierre explícito en los toasts
Sonner Provider Example
const toastSettings = { provider: 'sonner', // Opcional, este es el valor predeterminado settings: { position: 'top-center', duration: 6000, maxToasts: 5, dismissible: true, closeButton: true }};
Propiedad
Tipo
Obligatorio
Descripción
provider
"custom"
Sí
Usa tu implementación personalizada de toast
methods.success
(message: string) => void
No
Manejador personalizado para toast de éxito
methods.error
(message: string) => void
No
Manejador personalizado para toast de error
methods.warning
(message: string) => void
No
Manejador personalizado para toast de advertencia
methods.info
(message: string) => void
No
Manejador personalizado para toast informativo
methods.dismiss
(toastId?: string) => void
No
Manejador de cierre personalizado
Custom Provider Example
const toastSettings = { provider: 'custom', methods: { success: (message: string) => { // Tu implementación personalizada de toast de éxito myToastLibrary.success(message); }, error: (message: string) => { // Tu implementación personalizada de toast de error myToastLibrary.error(message); }, warning: (message: string) => { // Tu implementación personalizada de toast de advertencia myToastLibrary.warning(message); }, info: (message: string) => { // Tu implementación personalizada de toast informativo myToastLibrary.info(message); }, dismiss: (toastId?: string) => { // Tu implementación personalizada de cierre myToastLibrary.dismiss(toastId); } }};
Todos los métodos personalizados son opcionales. Implementa solo los que necesites. Los métodos
reciben solo el texto del mensaje; tu implementación se encarga del estilo,
la posición y la duración.
Ajusta el caché de TanStack Query para cada componente de Auth0. Los valores predeterminados mantienen los datos actualizados durante dos minutos, los eliminan del caché tras cinco minutos y omiten las recargas al recuperar el foco de la ventana.
Propiedad
Tipo
Predeterminado
Descripción
enabled
boolean
true
Activa o desactiva por completo el almacenamiento en caché. Cuando se establece en false, se desactiva el uso de datos obsoletos y las entradas en caché se eliminan rápidamente.
staleTime
number
120000
Milisegundos antes de que los datos queden obsoletos (dos minutos de forma predeterminada). Auméntelo para paneles y redúzcalo para flujos de trabajo críticos.
gcTime
number
300000
Milisegundos antes de que las consultas inactivas se eliminen (5 minutos de forma predeterminada).
refetchOnWindowFocus
boolean | “always”
false
Controla si las consultas se vuelven a ejecutar cuando el navegador recupera el foco. Use
“always” para garantizar siempre datos recientes.
Desactivar la caché: Pasa { enabled: false }. Esto establece automáticamente staleTime en 0 y reduce la ventana de recolección de basura a 5 segundos para que cada renderizado obtenga datos actualizados.Consejo práctico: Mantén la caché habilitada, pero reduce staleTime al integrarla con paneles de administración que requieren actualizaciones casi en tiempo real.
Autenticar
Administrar usuarios
Personalizar
Auth0 AI
Plataforma