Auth0 Universal Components

Learn how to install and configure Auth0 Universal Components.

Auth0 Universal Components is currently in Early Access. By using it, you agree to the applicable Free Trial terms in Okta’s Master Subscription Agreement. To learn more, read Product Release Stages.

Auth0 Universal Components is a library of pre-built UI components you can leverage to build your identity pipeline and experience inside your application. Built on Auth0 SDKs with an API-first approach, Universal Components allows you to embed Auth0’s services, such as authentication flows, Organization management, and MFA enrollment, without building the UI manually or managing high-privilege backend proxies.

With Universal Components, you can:

• Create and manage your Auth0 Organization(s)
• Manage user roles and accounts within your Organization
• Manage Single-Sign On with Auth0 or your Social or Enterprise Identity Provider (IdP)
• Customize the login experience with your own branding and themes
• Enable users to review and update their account information. This includes allowing users to choose their authentication and account recovery methods.

How it works

Universal Components acts as the presentation layer between your application and Auth0, coordinating communication between your application, the My Account and My Organization APIs, and Auth0 SDKs.

Auth0 SDKs function as the logic, handling authentication flows, token exchange, and session managment. The My Account API provides self-service capabilities for authenticated users to manage their authentication experience. For example, authenticated users can choose their own authentication methods, such as MFA or passkeys. The My Organization API provides a secure, Organization-scoped interface that allows your business customers to manage their own Organizations within your Auth0 tenant. This API serves as the technical backbone for embedded delegated administration and API-first integrations.

Universal Components leverages Shadcn components and Tailwind CSS stylesheets to customize components to fit your own branding and themes.

Prerequisites

To use Auth0 Universal Components:

• You must have an Auth0 account and configure an Auth0 tenant with the My Account and My Organization APIs enabled
• Register your Auth0 application. If you do not have an Auth0 application, you can get started with the Auth0 React or Next.js Quickstarts.
• Install Shadcn UI to build the Universal Component library
• Install Tailwinds CSS v.3 to style components for your brand
• For client-side authentication, install React v.16.11+.
• For server-side authentication, install Next.js v.13+.

React

Install Universal Components

npm

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

Configure your application

1. Wrap your application with Auth0Provider and 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' // Required to handle step-up auth challenges via Universal Login popup
    >
      <Auth0ComponentProvider domain={domain}>
        {/* Your app components */}
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

2. Import Universal Components:

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>
  );
}

Configure Universal Components

The Auth0ComponentProvider manages authentication, caching, internationalization, and toast notifications for all components.

App.tsx

<Auth0ComponentProvider
  domain="your-tenant.auth0.com"
  i18n={{ currentLanguage: "en" }}
  themeSettings={{ mode: "light", theme: "default" }}
>
  {/* Your app components */}
</Auth0ComponentProvider>

Style components

The stylesheet you imported (@auth0/universal-components-react/styles) enables all component styles. If you’re using Tailwind v4, add @import "@auth0/universal-components-react/tailwind" to your CSS file.

Use CSS variables to customize your branding:

:root {
  --primary: #4f46e5; /* your brand color */
  --primary-foreground: #ffffff; /* text on buttons */
}

To learn more, read Style Universal Components.

Next.js

Install Universal Components

You do not need @auth0/auth0-react. The Next.js implementation uses proxy mode with server-side authentication.

npm

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

Configure your application

1. Wrap your application with Auth0Provider and Auth0ComponentProvider:

In your /root layout, add the Auth0ComponentProvider in proxy mode:

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. Import Universal Components:

page.tsx

import { OrganizationDetailsEdit } from "@auth0/universal-components-react/rwa";

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

Configure Universal Components

The Auth0ComponentProvider manages authentication, caching, internationalization, and toast notifications for all components. In Next.js, use proxy mode for server-side authentication.

layout.tsx

<Auth0ComponentProvider
  mode="proxy"
  domain="your-tenant.auth0.com"
  proxyConfig={{ baseUrl: "/api/auth" }}
  i18n={{ currentLanguage: "en" }}
  themeSettings={{ mode: "light", theme: "default" }}
>
  {/* Your app components */}
</Auth0ComponentProvider>

Style components

The stylesheet you imported (@auth0/universal-components-react/styles) enables all component styles. If you’re using Tailwind v4, add @import "@auth0/universal-components-react/tailwind" to your CSS file.

Use CSS variables to customize your branding:

:root {
  --primary: #4f46e5; /* your brand color */
  --primary-foreground: #ffffff; /* text on buttons */
}

To learn more, read Style Universal Components.

shadcn

Install Universal Components

Universal Components use @/... imports. Start by configuring the path alias and project dependencies:

npx shadcn@latest init

Next, install Universal Components individually via the Shadcn CLI. For example:

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

Shadcn CLI installs the component source code and the @auth0/universal-components-core dependency for shared utilities and Auth0 integration.

Configure your application

1. Wrap your application with Auth0Provider and 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' // Required to handle step-up auth challenges via Universal Login popup
    >
      <Auth0ComponentProvider domain={domain}>
        {/* Your app components */}
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

2. Import Universal Components:

OrganizationManagementPage.tsx

import { OrganizationDetailsEdit } from "@/components/auth0/my-organization/organization-details-edit";

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

Configure Universal Components

The Auth0ComponentProvider manages authentication, caching, internationalization, and toast notifications for all components.

App.tsx

<Auth0ComponentProvider
  domain="your-tenant.auth0.com"
  i18n={{ currentLanguage: "en" }}
  themeSettings={{ mode: "light", theme: "default" }}
>
  {/* Your app components */}
</Auth0ComponentProvider>

Style components

Styles for Shadcn are already included in your Tailwind build. No additional style imports are needed.

Use CSS variables to customize your branding:

:root {
  --primary: #4f46e5; /* your brand color */
  --primary-foreground: #ffffff; /* text on buttons */
}

To learn more, read Customize Style and Themes with Universal Components.

Example implementations

See complete working examples in the sample applications.

Code Examples

React SPA (npm), React SPA (shadcn), and Next.js sample applications with full implementation patterns

SaaStart Live Demo

See My Organization Components in action in the live reference B2B SaaS app

SaaS Starter Repository

A secure and high-performance starting point for building modern B2B SaaS web applications.

Learn more

• Configure Auth0ComponentProvider
• Customize Style and Themes with Universal Components