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
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.
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.
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> );}
Importe los componentes universales:
OrganizationManagementPage.tsx
import { useAuth0 } from "@auth0/auth0-react";import { OrganizationDetailsEdit } from "@auth0/universal-components-react/spa";function OrganizationManagementPage() { const { isAuthenticated, isLoading } = useAuth0(); if (isLoading) return <div>Loading...</div>; if (!isAuthenticated) return <div>Please log in</div>; return ( <div> <OrganizationDetailsEdit /> </div> );}
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>
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 */}
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>
La hoja de estilos que importaste (@auth0/universal-components-react/styles)
habilita todos los estilos de los componentes. Si usas Tailwind v4, añade @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 */}
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.
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> );}
El 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>
Autenticar
Administrar usuarios
Personalizar
Auth0 AI
Plataforma