> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Configurar Auth0ComponentProvider

> Descubre cómo Auth0ComponentProvider sincroniza la autenticación, la internacionalización, los temas, las notificaciones emergentes y las opciones de almacenamiento en caché.

<Warning>
  Auth0 Universal Components se encuentra actualmente en acceso anticipado. Al usarlo,
  aceptas los términos aplicables de la prueba gratuita del [Contrato maestro de
  suscripción de Okta](https://www.okta.com/agreements/). Para obtener más información,
  consulta [Fases de lanzamiento del producto](/es/docs/troubleshoot/product-lifecycle/product-release-stages).
</Warning>

`Auth0ComponentProvider` es la capa de orquestación de [Auth0 Universal Components](/es/docs/get-started/universal-components/universal-components-overview). 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.

<div id="benefits">
  ## Beneficios
</div>

`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](/es/docs/libraries) con la [My Account API](/es/docs/manage-users/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.

<div id="integration-architecture">
  ## Arquitectura de la integración
</div>

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.

<div id="configure-auth0componentprovider">
  ## Configurar `Auth0ComponentProvider`
</div>

<Tabs>
  <Tab title="React">
    ```tsx App.tsx theme={null}
    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' // Necesario para gestionar los desafíos de autenticación step-up mediante el popup de Universal Login
        >
          <Auth0ComponentProvider domain="your-tenant.auth0.com">
            {/* Tu aplicación con Auth0 Universal Components */}
          </Auth0ComponentProvider>
        </Auth0Provider>
      );
    }
    ```

    ***

    ## Propiedades

    <table class="table">
      <thead>
        <tr>
          <th>Propiedad</th>
          <th>Tipo</th>
          <th>Obligatorio</th>
          <th>Descripción</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td><code>domain</code></td>
          <td><code>string</code></td>
          <td>Sí</td>
          <td>Dominio del inquilino de Auth0 ("YOUR\_AUTH0\_TENANT.auth0.com").</td>
        </tr>

        <tr>
          <td><code>previewMode</code></td>
          <td><code>boolean</code></td>
          <td>No</td>
          <td>Cuando <code>true</code>, omite la inicialización del cliente de la API. Se usa para vistas previas de la documentación y demostraciones.</td>
        </tr>

        <tr>
          <td><code>i18n</code></td>
          <td><code>I18nOptions</code></td>
          <td>No</td>
          <td>Configuración de internacionalización, incluidos currentLanguage y fallbackLanguage.</td>
        </tr>

        <tr>
          <td><code>themeSettings</code></td>
          <td><code>ThemeSettings</code></td>
          <td>No</td>
          <td>Configuración del tema, incluido el modo (light/dark), la variante del tema (default/minimal/rounded) y las variables CSS.</td>
        </tr>

        <tr>
          <td><code>toastSettings</code></td>
          <td><code>ToastSettings</code></td>
          <td>No</td>
          <td>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.</td>
        </tr>

        <tr>
          <td><code>cacheConfig</code></td>
          <td><code>QueryCacheConfig</code></td>
          <td>No</td>
          <td>Controla el almacenamiento en caché de TanStack Query (dos min de stale / cinco min de GC de forma predeterminada). Establece <code>enabled: false</code> para forzar datos actualizados.</td>
        </tr>

        <tr>
          <td><code>loader</code></td>
          <td><code>React.ReactNode</code></td>
          <td>No</td>
          <td>Componente de carga personalizado que se muestra durante la inicialización de la autenticación.</td>
        </tr>
      </tbody>
    </table>

    ***

    ## Experiencia del usuario

    ***

    **i18n**

    Utiliza las siguientes propiedades para adaptar los Universal Components al sistema de diseño y la configuración regional de tu aplicación.

    <table class="table">
      <thead>
        <tr>
          <th>Propiedad</th>
          <th>Tipo</th>
          <th>Obligatorio</th>
          <th>Predeterminado</th>
          <th>Descripción</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>currentLanguage</code>
          </td>

          <td>
            <code>string</code>
          </td>

          <td>Sí</td>
          <td>-</td>
          <td>Código del idioma actual (p. ej., "en", "es", "fr")</td>
        </tr>

        <tr>
          <td>
            <code>fallbackLanguage</code>
          </td>

          <td>
            <code>string</code>
          </td>

          <td>No</td>

          <td>
            <code>"en"</code>
          </td>

          <td>Código del idioma de respaldo cuando faltan traducciones</td>
        </tr>
      </tbody>
    </table>

    ***

    **themeSettings**

    <table class="table">
      <thead>
        <tr>
          <th>Propiedad</th>
          <th>Tipo</th>
          <th>Predeterminado</th>
          <th>Descripción</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>mode</code>
          </td>

          <td>
            <code>"light" | "dark"</code>
          </td>

          <td>
            <code>"light"</code>
          </td>

          <td>Modo de color del tema</td>
        </tr>

        <tr>
          <td>
            <code>theme</code>
          </td>

          <td>
            <code>"default" | "minimal" | "rounded"</code>
          </td>

          <td>
            <code>"default"</code>
          </td>

          <td>Variante del tema con distintos estilos</td>
        </tr>

        <tr>
          <td>
            <code>variables</code>
          </td>

          <td>
            <code>StylingVariables</code>
          </td>

          <td>
            <code>
              {}
            </code>
          </td>

          <td>Propiedades personalizadas de CSS para los temas común, claro y oscuro</td>
        </tr>
      </tbody>
    </table>

    <Accordion title="Variables de CSS disponibles">
      **Común (se aplica a todos los temas):**

      **Tipografía:**

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

      **Radio de borde:**

      * `--radius-xs` hasta `--radius-9xl`

      **Claro y oscuro (colores y sombras específicos del tema):**

      **Colores:**

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

      **Sombras:**

      * `--shadow-bevel-*` (xs, sm, md, lg, xl, 2xl)
      * `--shadow-button-*` (reposo, hover, focus)
      * `--shadow-button-destructive-*`
      * `--shadow-button-outlined-*`
      * `--shadow-input-*` (reposo, hover, focus)
      * `--shadow-input-destructive-*`
      * `--shadow-checkbox-*` (reposo, hover)
      * `--shadow-switch-*` (reposo, hover, focus, thumb, thumb-dark)
    </Accordion>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      Para ver ejemplos detallados de estilos y patrones de personalización, consulta [Personaliza
      el estilo y los temas con Universal
      Components](/es/docs/get-started/universal-components/universal-components-style).
    </Callout>

    ***

    **toastSettings**

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

    <Tabs>
      <Tab title="Proveedor Sonner (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                                                          |

        ```tsx Sonner Provider Example theme={null}
        const toastSettings = {
          provider: 'sonner', // Opcional, este es el valor predeterminado
          settings: {
            position: 'top-center',
            duration: 6000,
            maxToasts: 5,
            dismissible: true,
            closeButton: true
          }
        };
        ```
      </Tab>

      <Tab title="Proveedor 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               |

        ```tsx Custom Provider Example theme={null}
        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);
            }
          }
        };
        ```

        <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
          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.
        </Callout>
      </Tab>
    </Tabs>

    ***

    ## Estado y rendimiento

    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.

    <table class="table">
      <thead>
        <tr>
          <th>Propiedad</th>
          <th>Tipo</th>
          <th>Valor predeterminado</th>
          <th>Descripción</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>enabled</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            <code>true</code>
          </td>

          <td>
            Activa o desactiva por completo el almacenamiento en caché. Cuando se establece en <code>false</code>, se desactiva el uso de datos obsoletos y las entradas en caché se eliminan rápidamente.
          </td>
        </tr>

        <tr>
          <td>
            <code>staleTime</code>
          </td>

          <td>
            <code>number</code>
          </td>

          <td>
            <code>120000</code>
          </td>

          <td>
            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.
          </td>
        </tr>

        <tr>
          <td>
            <code>gcTime</code>
          </td>

          <td>
            <code>number</code>
          </td>

          <td>
            <code>300000</code>
          </td>

          <td>
            Milisegundos antes de que las consultas inactivas se eliminen mediante recolección de basura. El valor predeterminado es de cinco minutos.
          </td>
        </tr>

        <tr>
          <td>
            <code>refetchOnWindowFocus</code>
          </td>

          <td>
            <code>boolean | "always"</code>
          </td>

          <td>
            <code>false</code>
          </td>

          <td>
            Controla si las consultas se vuelven a ejecutar cuando el navegador recupera el foco. Use{" "}
            <code>"always"</code> para mantener la máxima frescura.
          </td>
        </tr>
      </tbody>
    </table>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **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.
    </Callout>

    <Tabs>
      <Tab title="Configurar TTL">
        ```tsx theme={null}
        <Auth0ComponentProvider
          domain="your-tenant.auth0.com"
          cacheConfig={{
            staleTime: 10 * 60 * 1000,
            gcTime: 15 * 60 * 1000,
            refetchOnWindowFocus: true,
          }}
        >
          <App />
        </Auth0ComponentProvider>
        ```
      </Tab>

      <Tab title="Desactivar la caché">
        ```tsx theme={null}
        <Auth0ComponentProvider
          domain="your-tenant.auth0.com"
          cacheConfig={{ enabled: false }}
        >
          <App />
        </Auth0ComponentProvider>
        ```
      </Tab>
    </Tabs>
  </Tab>

  <Tab title="Next.js">
    ```tsx layout.tsx theme={null}
    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>
      );
    }
    ```

    ***

    ## Propiedades

    <table class="table">
      <thead>
        <tr>
          <th>Propiedad</th>
          <th>Tipo</th>
          <th>Obligatorio</th>
          <th>Descripción</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td><code>domain</code></td>
          <td><code>string</code></td>
          <td>Sí</td>
          <td>Dominio del inquilino de Auth0 (por ejemplo, "your-tenant.auth0.com"). Obligatorio para el modo proxy.</td>
        </tr>

        <tr>
          <td><code>mode</code></td>
          <td><code>'proxy'</code></td>
          <td>Sí</td>
          <td>En Next.js, use siempre el modo <code>'proxy'</code> para la autenticación en el servidor.</td>
        </tr>

        <tr>
          <td><code>proxyConfig</code></td>
          <td>`{ baseUrl: string }`</td>
          <td>Sí</td>
          <td>Configuración del proxy con la URL base de su servidor proxy de autenticación.</td>
        </tr>

        <tr>
          <td><code>previewMode</code></td>
          <td><code>boolean</code></td>
          <td>No</td>
          <td>Cuando es <code>true</code>, omite la inicialización del cliente de la API. Se usa para vistas previas de la documentación y demostraciones.</td>
        </tr>

        <tr>
          <td><code>i18n</code></td>
          <td><code>I18nOptions</code></td>
          <td>No</td>
          <td>Configuración de internacionalización, incluidos currentLanguage y fallbackLanguage.</td>
        </tr>

        <tr>
          <td><code>themeSettings</code></td>
          <td><code>ThemeSettings</code></td>
          <td>No</td>
          <td>Configuración del tema, incluido el modo (claro/oscuro), la variante del tema (default/minimal/rounded) y las variables CSS.</td>
        </tr>

        <tr>
          <td><code>toastSettings</code></td>
          <td><code>ToastSettings</code></td>
          <td>No</td>
          <td>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.</td>
        </tr>

        <tr>
          <td><code>cacheConfig</code></td>
          <td><code>QueryCacheConfig</code></td>
          <td>No</td>
          <td>Controla el almacenamiento en caché de TanStack Query (dos min de caducidad / cinco min de GC de forma predeterminada). Establezca <code>enabled: false</code> para forzar la obtención de datos nuevos.</td>
        </tr>

        <tr>
          <td><code>loader</code></td>
          <td><code>React.ReactNode</code></td>
          <td>No</td>
          <td>Componente de carga personalizado que se muestra durante la inicialización de la autenticación.</td>
        </tr>
      </tbody>
    </table>

    ***

    ## Configurar el modo proxy

    Para aplicaciones de Next.js, usa el modo proxy con autenticación del lado del servidor:

    ```tsx layout.tsx theme={null}
    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>
      );
    }
    ```

    ***

    ### Propiedades del modo proxy

    Configuración para la autenticación en modo proxy. Obligatoria cuando se usa Next.js.

    <table class="table">
      <thead>
        <tr>
          <th>Propiedad</th>
          <th>Tipo</th>
          <th>Obligatorio</th>
          <th>Descripción</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>baseUrl</code>
          </td>

          <td>
            <code>string</code>
          </td>

          <td>Sí</td>

          <td>
            URL de tu servidor proxy de autenticación (p. ej., "/api/auth"). Las llamadas a la API
            se añaden a esta ruta base.
          </td>
        </tr>
      </tbody>
    </table>

    ***

    ## Experiencia del usuario

    ***

    **i18n**

    <table class="table">
      <thead>
        <tr>
          <th>Propiedad</th>
          <th>Tipo</th>
          <th>Obligatorio</th>
          <th>Predeterminado</th>
          <th>Descripción</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>currentLanguage</code>
          </td>

          <td>
            <code>string</code>
          </td>

          <td>Sí</td>
          <td>-</td>
          <td>Código del idioma actual (p. ej., "en", "es", "fr")</td>
        </tr>

        <tr>
          <td>
            <code>fallbackLanguage</code>
          </td>

          <td>
            <code>string</code>
          </td>

          <td>No</td>

          <td>
            <code>"en"</code>
          </td>

          <td>Código del idioma de respaldo cuando faltan traducciones</td>
        </tr>
      </tbody>
    </table>

    ***

    **themeSettings**

    <table class="table">
      <thead>
        <tr>
          <th>Propiedad</th>
          <th>Tipo</th>
          <th>Predeterminado</th>
          <th>Descripción</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>mode</code>
          </td>

          <td>
            <code>"light" | "dark"</code>
          </td>

          <td>
            <code>"light"</code>
          </td>

          <td>Modo de color del tema</td>
        </tr>

        <tr>
          <td>
            <code>theme</code>
          </td>

          <td>
            <code>"default" | "minimal" | "rounded"</code>
          </td>

          <td>
            <code>"default"</code>
          </td>

          <td>Variante de tema con diferentes estilos</td>
        </tr>

        <tr>
          <td>
            <code>variables</code>
          </td>

          <td>
            <code>StylingVariables</code>
          </td>

          <td>
            <code>
              {}
            </code>
          </td>

          <td>Propiedades personalizadas de CSS para la configuración común y los temas claro y oscuro</td>
        </tr>
      </tbody>
    </table>

    <Accordion title="Variables de CSS disponibles">
      **Común (se aplica a todos los temas):**

      **Tipografía:**

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

      **Radio de borde:**

      * `--radius-xs` a `--radius-9xl`

      **Claro y oscuro (colores y sombras específicos del tema):**

      **Colores:**

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

      **Sombras:**

      * `--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)
    </Accordion>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      Para ver ejemplos detallados de estilos y patrones de personalización, consulta [Personaliza
      estilos y temas con Universal
      Components](/es/docs/get-started/universal-components/universal-components-style).
    </Callout>

    ***

    **toastSettings**

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

    <Accordion title="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                                                          |

      ```tsx Sonner Provider Example theme={null}
      const toastSettings = {
        provider: 'sonner', // Opcional, este es el valor predeterminado
        settings: {
          position: 'top-center',
          duration: 6000,
          maxToasts: 5,
          dismissible: true,
          closeButton: true
        }
      };
      ```
    </Accordion>

    <Accordion title="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               |

      ```tsx Custom Provider Example theme={null}
      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);
          }
        }
      };
      ```

      <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
        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.
      </Callout>
    </Accordion>

    ***

    ## Estado y rendimiento

    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.

    <table class="table">
      <thead>
        <tr>
          <th>Propiedad</th>
          <th>Tipo</th>
          <th>Predeterminado</th>
          <th>Descripción</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>enabled</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            <code>true</code>
          </td>

          <td>
            Activa o desactiva por completo el almacenamiento en caché. Cuando se establece en <code>false</code>, se desactiva el uso de datos obsoletos y las entradas en caché se eliminan rápidamente.
          </td>
        </tr>

        <tr>
          <td>
            <code>staleTime</code>
          </td>

          <td>
            <code>number</code>
          </td>

          <td>
            <code>120000</code>
          </td>

          <td>
            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.
          </td>
        </tr>

        <tr>
          <td>
            <code>gcTime</code>
          </td>

          <td>
            <code>number</code>
          </td>

          <td>
            <code>300000</code>
          </td>

          <td>
            Milisegundos antes de que las consultas inactivas se eliminen mediante recolección de basura (cinco minutos de forma predeterminada).
          </td>
        </tr>

        <tr>
          <td>
            <code>refetchOnWindowFocus</code>
          </td>

          <td>
            <code>boolean | "always"</code>
          </td>

          <td>
            <code>false</code>
          </td>

          <td>
            Controla si las consultas se vuelven a ejecutar cuando el navegador recupera el foco. Use{" "}
            <code>"always"</code> para mantener la máxima actualización.
          </td>
        </tr>
      </tbody>
    </table>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **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.
    </Callout>

    <Accordion title="Ajustar el TTL">
      ```tsx layout.tsx theme={null}
      <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>
      ```
    </Accordion>

    <Accordion title="Desactivar la caché">
      ```tsx layout.tsx theme={null}
      <Auth0ComponentProvider
        mode="proxy"
        domain="your-tenant.auth0.com"
        proxyConfig={{ baseUrl: "/api/auth" }}
        cacheConfig={{ enabled: false }}
      >
        <App />
      </Auth0ComponentProvider>
      ```
    </Accordion>
  </Tab>

  <Tab title="shadcn">
    ```tsx App.tsx theme={null}
    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' // Necesario para gestionar los desafíos de autenticación step-up mediante el popup de Universal Login
        >
          <Auth0ComponentProvider domain="your-tenant.auth0.com">
            {/* Tu aplicación con Auth0 Universal Components */}
          </Auth0ComponentProvider>
        </Auth0Provider>
      );
    }
    ```

    ***

    ## Propiedades

    <table class="table">
      <thead>
        <tr>
          <th>Propiedad</th>
          <th>Tipo</th>
          <th>Obligatorio</th>
          <th>Descripción</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td><code>domain</code></td>
          <td><code>string</code></td>
          <td>Sí</td>
          <td>Dominio del inquilino de Auth0 (por ejemplo, "your-tenant.auth0.com").</td>
        </tr>

        <tr>
          <td><code>authContext</code></td>
          <td><code>ContextInterface</code></td>
          <td>No</td>
          <td>Contexto de autenticación personalizado para SPA que no usan `@auth0/auth0-react`. Proporciona funciones de autenticación, como `getAccessTokenSilently`.</td>
        </tr>

        <tr>
          <td><code>previewMode</code></td>
          <td><code>boolean</code></td>
          <td>No</td>
          <td>Cuando <code>true</code>, omite la inicialización del cliente de API. Se usa para vistas previas de la documentación y demostraciones.</td>
        </tr>

        <tr>
          <td><code>i18n</code></td>
          <td><code>I18nOptions</code></td>
          <td>No</td>
          <td>Configuración de internacionalización que incluye currentLanguage y fallbackLanguage.</td>
        </tr>

        <tr>
          <td><code>themeSettings</code></td>
          <td><code>ThemeSettings</code></td>
          <td>No</td>
          <td>Configuración del tema, incluido el modo (claro/oscuro), la variante del tema (default/minimal/rounded) y las variables CSS.</td>
        </tr>

        <tr>
          <td><code>toastSettings</code></td>
          <td><code>ToastSettings</code></td>
          <td>No</td>
          <td>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.</td>
        </tr>

        <tr>
          <td><code>cacheConfig</code></td>
          <td><code>QueryCacheConfig</code></td>
          <td>No</td>
          <td>Controla el almacenamiento en caché de TanStack Query (dos minutos de staleness y cinco minutos de GC de forma predeterminada). Establece <code>enabled: false</code> para forzar datos actualizados.</td>
        </tr>

        <tr>
          <td><code>loader</code></td>
          <td><code>React.ReactNode</code></td>
          <td>No</td>
          <td>Componente de carga personalizado que se muestra durante la inicialización de la autenticación.</td>
        </tr>
      </tbody>
    </table>

    ***

    ## Experiencia del usuario

    ***

    **i18n**

    <table class="table">
      <thead>
        <tr>
          <th>Propiedad</th>
          <th>Tipo</th>
          <th>Obligatorio</th>
          <th>Predeterminado</th>
          <th>Descripción</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>currentLanguage</code>
          </td>

          <td>
            <code>string</code>
          </td>

          <td>Sí</td>
          <td>-</td>
          <td>Código de idioma actual (p. ej., "en", "es", "fr")</td>
        </tr>

        <tr>
          <td>
            <code>fallbackLanguage</code>
          </td>

          <td>
            <code>string</code>
          </td>

          <td>No</td>

          <td>
            <code>"en"</code>
          </td>

          <td>Código de idioma de respaldo cuando no hay traducciones disponibles</td>
        </tr>
      </tbody>
    </table>

    ***

    **themeSettings**

    <table class="table">
      <thead>
        <tr>
          <th>Propiedad</th>
          <th>Tipo</th>
          <th>Predeterminado</th>
          <th>Descripción</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>mode</code>
          </td>

          <td>
            <code>"light" | "dark"</code>
          </td>

          <td>
            <code>"light"</code>
          </td>

          <td>Modo de color del tema</td>
        </tr>

        <tr>
          <td>
            <code>theme</code>
          </td>

          <td>
            <code>"default" | "minimal" | "rounded"</code>
          </td>

          <td>
            <code>"default"</code>
          </td>

          <td>Variante del tema con distintos estilos</td>
        </tr>

        <tr>
          <td>
            <code>variables</code>
          </td>

          <td>
            <code>StylingVariables</code>
          </td>

          <td>
            <code>
              {}
            </code>
          </td>

          <td>Propiedades personalizadas de CSS para estilos comunes y para los temas claro y oscuro</td>
        </tr>
      </tbody>
    </table>

    <Accordion title="Variables de CSS disponibles">
      **Común (se aplica a todos los temas):**

      **Tipografía:**

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

      **Radio de borde:**

      * `--radius-xs` a `--radius-9xl`

      **Claro y oscuro (colores y sombras específicos del tema):**

      **Colores:**

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

      **Sombras:**

      * `--shadow-bevel-*` (xs, sm, md, lg, xl, 2xl)
      * `--shadow-button-*` (reposo, hover, foco)
      * `--shadow-button-destructive-*`
      * `--shadow-button-outlined-*`
      * `--shadow-input-*` (reposo, hover, foco)
      * `--shadow-input-destructive-*`
      * `--shadow-checkbox-*` (reposo, hover)
      * `--shadow-switch-*` (reposo, hover, foco, thumb, thumb-dark)
    </Accordion>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      Para ver ejemplos detallados de estilos y patrones de personalización, consulte [Personalice
      estilos y temas con Universal
      Components](/es/docs/get-started/universal-components/universal-components-style).
    </Callout>

    ***

    **toastSettings**

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

    <Tabs>
      <Tab title="Proveedor Sonner (predeterminado)">
        | 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                                                                 |

        ```tsx Sonner Provider Example theme={null}
        const toastSettings = {
          provider: 'sonner', // Opcional, este es el valor predeterminado
          settings: {
            position: 'top-center',
            duration: 6000,
            maxToasts: 5,
            dismissible: true,
            closeButton: true
          }
        };
        ```
      </Tab>

      <Tab title="Proveedor 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 de cierre personalizado                 |

        ```tsx Custom Provider Example theme={null}
        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);
            }
          }
        };
        ```

        <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
          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.
        </Callout>
      </Tab>
    </Tabs>

    ***

    ## Estado y rendimiento

    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.

    <table class="table">
      <thead>
        <tr>
          <th>Propiedad</th>
          <th>Tipo</th>
          <th>Predeterminado</th>
          <th>Descripción</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>
            <code>enabled</code>
          </td>

          <td>
            <code>boolean</code>
          </td>

          <td>
            <code>true</code>
          </td>

          <td>
            Activa o desactiva por completo el almacenamiento en caché. Cuando se establece en <code>false</code>, se desactiva el uso de datos obsoletos y las entradas en caché se eliminan rápidamente.
          </td>
        </tr>

        <tr>
          <td>
            <code>staleTime</code>
          </td>

          <td>
            <code>number</code>
          </td>

          <td>
            <code>120000</code>
          </td>

          <td>
            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.
          </td>
        </tr>

        <tr>
          <td>
            <code>gcTime</code>
          </td>

          <td>
            <code>number</code>
          </td>

          <td>
            <code>300000</code>
          </td>

          <td>
            Milisegundos antes de que las consultas inactivas se eliminen (5 minutos de forma predeterminada).
          </td>
        </tr>

        <tr>
          <td>
            <code>refetchOnWindowFocus</code>
          </td>

          <td>
            <code>boolean | "always"</code>
          </td>

          <td>
            <code>false</code>
          </td>

          <td>
            Controla si las consultas se vuelven a ejecutar cuando el navegador recupera el foco. Use{" "}
            <code>"always"</code> para garantizar siempre datos recientes.
          </td>
        </tr>
      </tbody>
    </table>

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      **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.
    </Callout>

    <Tabs>
      <Tab title="Ajustar TTL">
        ```tsx App.tsx theme={null}
        <Auth0ComponentProvider
          domain="your-tenant.auth0.com"
          cacheConfig={{
            staleTime: 10 * 60 * 1000,
            gcTime: 15 * 60 * 1000,
            refetchOnWindowFocus: true,
          }}
        >
          <App />
        </Auth0ComponentProvider>
        ```
      </Tab>

      <Tab title="Deshabilitar caché">
        ```tsx App.tsx theme={null}
        <Auth0ComponentProvider
          domain="your-tenant.auth0.com"
          cacheConfig={{ enabled: false }}
        >
          <App />
        </Auth0ComponentProvider>
        ```
      </Tab>
    </Tabs>
  </Tab>
</Tabs>