Auth0 Universal Components

Aprende a instalar y configurar Auth0 Universal Components.

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. Para obtener más información, consulta Fases de lanzamiento del producto.

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 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 con Auth0 o tu Proveedor de identidad (IdP) social o empresarial
• 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.

​

Cómo funciona

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 y My Organization, 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 y hojas de estilo de Tailwind CSS para personalizar los componentes de modo que se adapten a su propia marca y temas.

​

Requisitos previos

Para usar Auth0 Universal Components:

• Debe tener una cuenta de Auth0 y configurar un inquilino de Auth0 con las API My Account y My Organization habilitadas
• Registre su aplicación de Auth0. Si no tiene una aplicación de Auth0, puede empezar con las guías de inicio rápido de Auth0 React o Next.js.
• Instale Shadcn UI para crear la biblioteca de componentes universales
• Instale Tailwinds CSS v.3 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+.

React

​

Instala Universal Components

npm

npm install @auth0/universal-components-react react-hook-form @auth0/auth0-react

pnpm add @auth0/universal-components-react react-hook-form @auth0/auth0-react

Instala el paquete junto con las dependencias de pares necesarias (react-hook-form y @auth0/auth0-react).

​

Configura tu aplicación

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

App.tsx

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:

OrganizationManagementPage.tsx

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.

App.tsx

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

​

Componentes de estilo

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.

Usa variables CSS para personalizar tu marca:

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

Para obtener más información, consulte Style Universal Components.

Next.js

​

Instala Universal Components

No necesitas @auth0/auth0-react. La implementación de Next.js usa el modo proxy con autenticación del servidor.

npm

npm install @auth0/universal-components-react react-hook-form

pnpm add @auth0/universal-components-react react-hook-form

​

Configura tu aplicación

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

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

layout.tsx

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:

page.tsx

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.

layout.tsx

<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

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.

Usa variables CSS para personalizar tu marca:

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

shadcn

​

Instalar Universal Components

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

npx shadcn@latest init

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

npx shadcn@latest add @auth0/organization-details-edit

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.

​

Configure la aplicación

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

App.tsx

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:

OrganizationManagementPage.tsx

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.

App.tsx

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

​

Componentes de estilo

Los estilos de Shadcn ya están incluidos en la compilación de Tailwind. No es necesario importar estilos adicionales.

Usa variables CSS para personalizar tu marca:

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

​

Implementaciones de ejemplo

Consulta ejemplos completos y funcionales en las aplicaciones de muestra.

Ejemplos de código

Aplicaciones de ejemplo de React SPA (npm), React SPA (shadcn) y Next.js con patrones de implementación completos

Demo en vivo de SaaStart

Vea My Organization Components en acción en la aplicación SaaS B2B de referencia disponible en vivo

Repositorio de SaaS Starter

Un punto de partida seguro y de alto rendimiento para crear aplicaciones web SaaS B2B modernas.

​

Más información

• Configura Auth0ComponentProvider
• Personaliza estilos y temas con Universal Components