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

# Auth0 Universal Components

> Aprende a instalar y configurar Auth0 Universal Components.

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

Auth0 Universal Components es una biblioteca de componentes de UI prediseñados que puedes usar para crear tu flujo y experiencia de identidad dentro de tu aplicación. Creado sobre los [SDK de Auth0](/es/docs/libraries) con un enfoque centrado en la API, Universal Components te permite integrar los servicios de Auth0, como los flujos de autenticación, la gestión de Organizaciones y la inscripción en MFA, sin tener que crear la UI manualmente ni administrar proxies de backend con privilegios elevados.

Con Universal Components, puedes:

* Crear y administrar tus Organizaciones de Auth0
* Administrar roles y cuentas de usuario dentro de tu Organización
* Administrar el [inicio de sesión único](/es/docs/authenticate/single-sign-on) con Auth0 o tu [Proveedor de identidad (IdP) social o empresarial](/es/docs/authenticate/single-sign-on/outbound-single-sign-on)
* Personalizar la experiencia de inicio de sesión con tu propia marca y temas
* Permitir que los usuarios revisen y actualicen la información de su cuenta. Esto incluye permitirles elegir sus métodos de autenticación y recuperación de cuenta.

<div id="how-it-works">
  ## Cómo funciona
</div>

Universal Components actúa como la capa de presentación entre su aplicación y Auth0, y coordina la comunicación entre su aplicación, las API de [My Account](/es/docs/manage-users/my-account-api) y [My Organization](/es/docs/api/myorganization), y los SDK de Auth0.

Los SDK de Auth0 constituyen la capa lógica y se encargan de los flujos de autenticación, el intercambio de tokens y la gestión de sesiones. La API My Account ofrece funciones de autoservicio para que los usuarios autenticados administren su experiencia de autenticación. Por ejemplo, los usuarios autenticados pueden elegir sus propios métodos de autenticación, como MFA o passkeys. La API My Organization ofrece una interfaz segura con alcance de Organización que permite a sus clientes empresariales administrar sus propias Organizaciones en su inquilino de Auth0. Esta API actúa como la base técnica de la administración delegada integrada y de las integraciones API-first.

Universal Components utiliza componentes de [Shadcn](https://ui.shadcn.com/docs/components) y hojas de estilo de [Tailwind CSS](https://tailwindcss.com/docs/installation/using-vite) para personalizar los componentes de modo que se adapten a su propia marca y temas.

<div id="prerequisites">
  ## Requisitos previos
</div>

Para usar Auth0 Universal Components:

* Debe [tener una cuenta de Auth0](https://auth0.com) y configurar un inquilino de Auth0 con las API My Account y My Organization habilitadas
* [Registre su aplicación de Auth0](/es/docs/get-started/auth0-overview/create-applications). Si no tiene una aplicación de Auth0, puede empezar con las [guías de inicio rápido](https://auth0.com/docs/quickstart/spa/react) de Auth0 React o Next.js.
* Instale [Shadcn UI](https://ui.shadcn.com/docs/installation) para crear la biblioteca de componentes universales
* Instale [Tailwinds CSS v.3](https://tailwindcss.com/docs/installation) para dar estilo a los componentes según su marca
* Para la autenticación del lado del cliente, instale **React v.16.11+**.
* Para la autenticación del lado del servidor, instale **Next.js v.13+**.

<Tabs>
  <Tab title="React">
    ## Instala Universal Components

    <CodeGroup>
      ```bash npm  theme={null}
      npm install @auth0/universal-components-react react-hook-form @auth0/auth0-react
      ```

      ```bash pnpm theme={null}
      pnpm add @auth0/universal-components-react react-hook-form @auth0/auth0-react
      ```

      <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
        Instala el paquete junto con las dependencias de pares necesarias (`react-hook-form` y `@auth0/auth0-react`).
      </Callout>
    </CodeGroup>

    ## Configura tu aplicación

    1. Envuelve tu aplicación en `Auth0Provider` y `Auth0ComponentProvider`:

    ```tsx App.tsx theme={null}
    import { Auth0Provider } from "@auth0/auth0-react";
    import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";
    import "@auth0/universal-components-react/styles";

    const domain = import.meta.env.VITE_AUTH0_DOMAIN;

    function App() {
      return (
        <Auth0Provider
          domain={domain}
          clientId={import.meta.env.VITE_AUTH0_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={domain}>
            {/* Los componentes de tu aplicación */}
          </Auth0ComponentProvider>
        </Auth0Provider>
      );
    }
    ```

    2. Importe los componentes universales:

    ```tsx OrganizationManagementPage.tsx theme={null}
    import { useAuth0 } from "@auth0/auth0-react";
    import { OrganizationDetailsEdit } from "@auth0/universal-components-react";

    function OrganizationManagementPage() {
      const { isAuthenticated, isLoading } = useAuth0();

      if (isLoading) return <div>Loading...</div>;
      if (!isAuthenticated) return <div>Please log in</div>;

      return (
        <div>
          <OrganizationDetailsEdit />
        </div>
      );
    }
    ```

    ## Configurar Universal Components

    `Auth0ComponentProvider` gestiona la autenticación, el almacenamiento en caché, la internacionalización y las notificaciones toast de todos los componentes.

    ```tsx App.tsx theme={null}
    <Auth0ComponentProvider
      domain="your-tenant.auth0.com"
      i18n={{ currentLanguage: "en" }}
      themeSettings={{ mode: "light", theme: "default" }}
    >
      {/* Los componentes de tu aplicación */}
    </Auth0ComponentProvider>
    ```

    ## Componentes de estilo

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      La hoja de estilos que importaste (`@auth0/universal-components-react/styles`)
      habilita los estilos de todos los componentes. Si usas Tailwind v4, agrega `@import
                                              "@auth0/universal-components-react/tailwind"` a tu archivo CSS.
    </Callout>

    Usa variables CSS para personalizar tu marca:

    ```css theme={null}
    :root {
      --primary: #4f46e5; /* color de tu marca */
      --primary-foreground: #ffffff; /* texto en botones */
    }
    ```

    Para obtener más información, consulte [Style Universal Components](/es/docs/get-started/universal-components/universal-components-style).
  </Tab>

  <Tab title="Next.js">
    ## Instala Universal Components

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      No necesitas `@auth0/auth0-react`. La implementación de Next.js usa el modo
      proxy con autenticación del servidor.
    </Callout>

    <CodeGroup>
      ```bash npm  theme={null}
      npm install @auth0/universal-components-react react-hook-form
      ```

      ```bash pnpm theme={null}
      pnpm add @auth0/universal-components-react react-hook-form
      ```
    </CodeGroup>

    ## Configura tu aplicación

    1. Envuelve tu aplicación con `Auth0Provider` y `Auth0ComponentProvider`:

    En el layout `/root`, agrega `Auth0ComponentProvider` en modo proxy:

    ```tsx layout.tsx theme={null}
    import { Auth0ComponentProvider } from "@auth0/universal-components-react/rwa";
    import "@auth0/universal-components-react/styles";

    export default function RootLayout({ children }) {
      return (
        <html lang="en">
          <body>
            <Auth0ComponentProvider
              mode="proxy"
              domain={process.env.NEXT_PUBLIC_AUTH0_DOMAIN}
              proxyConfig={{ baseUrl: "/api/auth" }}
            >
              {children}
            </Auth0ComponentProvider>
          </body>
        </html>
      );
    }
    ```

    2. Importe los componentes universales:

    ```tsx page.tsx theme={null}
    import { OrganizationDetailsEdit } from "@auth0/universal-components-react";

    export default function OrganizationManagementPage() {
      return (
        <div>
          <OrganizationDetailsEdit />
        </div>
      );
    }
    ```

    ## Configura Universal Components

    `Auth0ComponentProvider` gestiona la autenticación, el almacenamiento en caché, la internacionalización y las notificaciones emergentes de todos los componentes. En Next.js, usa el modo proxy para la autenticación del lado del servidor.

    ```tsx layout.tsx theme={null}
    <Auth0ComponentProvider
      mode="proxy"
      domain="your-tenant.auth0.com"
      proxyConfig={{ baseUrl: "/api/auth" }}
      i18n={{ currentLanguage: "en" }}
      themeSettings={{ mode: "light", theme: "default" }}
    >
      {/* Los componentes de tu aplicación */}
    </Auth0ComponentProvider>
    ```

    ## Componentes de estilo

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      La hoja de estilos que importaste (`@auth0/universal-components-react/styles`)
      habilita los estilos de todos los componentes. Si usas Tailwind v4, agrega `@import
                                              "@auth0/universal-components-react/tailwind"` a tu archivo CSS.
    </Callout>

    Usa variables CSS para personalizar tu marca:

    ```css theme={null}
    :root {
      --primary: #4f46e5; /* el color de tu marca */
      --primary-foreground: #ffffff; /* texto en los botones */
    }
    ```

    Para obtener más información, consulte [Style Universal Components](/es/docs/get-started/universal-components/universal-components-style).
  </Tab>

  <Tab title="shadcn">
    ## Instalar Universal Components

    Universal Components utilizan importaciones `@/...`. Empiece por configurar el alias de ruta y las dependencias del proyecto:

    ```bash theme={null}
    npx shadcn@latest init
    ```

    A continuación, instala los Universal Components de forma individual mediante la CLI de Shadcn. Por ejemplo:

    ```bash theme={null}
    npx shadcn@latest add @auth0/organization-details-edit
    ```

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      Shadcn CLI instala el código fuente del componente y la
      dependencia `@auth0/universal-components-core` para utilidades compartidas y la
      integración con Auth0.
    </Callout>

    ## Configure la aplicación

    1. Envuelva la aplicación con `Auth0Provider` y `Auth0ComponentProvider`:

    ```tsx App.tsx theme={null}
    import { Auth0Provider } from "@auth0/auth0-react";
    import { Auth0ComponentProvider } from "@auth0/universal-components-react/spa";

    const domain = import.meta.env.VITE_AUTH0_DOMAIN;

    function App() {
      return (
        <Auth0Provider
          domain={domain}
          clientId={import.meta.env.VITE_AUTH0_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={domain}>
            {/* Los componentes de tu aplicación */}
          </Auth0ComponentProvider>
        </Auth0Provider>
      );
    }
    ```

    2. Importe los componentes universales:

    ```tsx OrganizationManagementPage.tsx theme={null}
    import { OrganizationDetailsEdit } from "@/components/auth0/my-organization/organization-details-edit";

    function OrganizationManagementPage() {
      return (
        <div>
          <OrganizationDetailsEdit />
        </div>
      );
    }
    ```

    ## Configurar Universal Components

    `Auth0ComponentProvider` gestiona la autenticación, el almacenamiento en caché, la internacionalización y las notificaciones toast de todos los componentes.

    ```tsx App.tsx theme={null}
    <Auth0ComponentProvider
      domain="your-tenant.auth0.com"
      i18n={{ currentLanguage: "en" }}
      themeSettings={{ mode: "light", theme: "default" }}
    >
      {/* Los componentes de tu aplicación */}
    </Auth0ComponentProvider>
    ```

    ## Componentes de estilo

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      Los estilos de Shadcn ya están incluidos en la compilación de Tailwind. No es
      necesario importar estilos adicionales.
    </Callout>

    Usa variables CSS para personalizar tu marca:

    ```css theme={null}
    :root {
      --primary: #4f46e5; /* el color de tu marca */
      --primary-foreground: #ffffff; /* texto en los botones */
    }
    ```

    Para obtener más información, consulte [Personaliza estilos y temas con Universal Components](/es/docs/get-started/universal-components/universal-components-style).
  </Tab>
</Tabs>

<div id="example-implementations">
  ## Implementaciones de ejemplo
</div>

Consulta ejemplos completos y funcionales en las aplicaciones de muestra.

<Card title="Ejemplos de código" icon="github" href="https://github.com/auth0/auth0-ui-components/tree/main/examples">
  Aplicaciones de ejemplo de React SPA (npm), React SPA (shadcn) y Next.js con
  patrones de implementación completos
</Card>

<CardGroup cols={2}>
  <Card title="Demo en vivo de SaaStart" icon="play" href="https://universal-components-saastart.vercel.app/">
    Vea My Organization Components en acción en la aplicación SaaS B2B de referencia disponible en vivo
  </Card>

  <Card title="Repositorio de SaaS Starter" icon="github" href="https://github.com/auth0-ui-components/saas-starter-uicomponents">
    Un punto de partida seguro y de alto rendimiento para crear aplicaciones web SaaS B2B modernas.
  </Card>
</CardGroup>

<div id="learn-more">
  ## Más información
</div>

* [Configura Auth0ComponentProvider](/es/docs/get-started/universal-components/auth0-component-provider)
* [Personaliza estilos y temas con Universal Components](/es/docs/get-started/universal-components/universal-components-style)