Universal Components for Web Applications

The Auth0 Universal Components for Web library provides pre-built, embeddable UI for Auth0 identity flows using React and Next.js. Universal Components for Web are built on top of the Auth0 SDKs and integrate with the My Organization API to power embedded delegated administration, such as managing Organizations, domains, and SSO providers.

Prerequisites

To use Auth0 Universal Components for Web:

You must have an Auth0 account and configure an Auth0 tenant with the My Organization API 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.
For client-side authentication, install React v.16.11+.
For server-side authentication, install Next.js v.13+.

React
Next.js
shadcn

Install Universal Components

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

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

Installs the package alongside react-hook-form (a peer dependency) and @auth0/auth0-react (required for client-side SPA authentication). The Next.js tab uses proxy mode and does not need @auth0/auth0-react.

Configure your application

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

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.

Install Universal Components

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

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

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

Configure your application

Wrap your application with Auth0Provider and Auth0ComponentProvider: In your root layout, add the Auth0ComponentProvider in proxy mode. Auth0Provider is configured separately in your Next.js setup (typically in layout.tsx via @auth0/nextjs-auth0).

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

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

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.

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

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

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

Next steps

Configure Auth0ComponentProvider

Synchronize authentication, internationalization, theming, toast notifications, and caching across all components.

Customize style and themes

Customize the design system using Tailwind CSS, CSS variables, and built-in theme presets.

Build a Delegated Admin Interface

Use the My Organization API to let your customers manage their own Organizations, domains, and SSO providers.

​Prerequisites

​Install Universal Components

​Configure your application

​Configure Universal Components

​Style components

​Install Universal Components

​Configure your application

​Configure Universal Components

​Style components

​Install Universal Components

​Configure your application

​Configure Universal Components

​Style components

​Example implementations

Code Examples

SaaStart Live Demo

SaaS Starter Repository

​Next steps

Configure Auth0ComponentProvider

Customize style and themes

Build a Delegated Admin Interface

Prerequisites

Install Universal Components

Configure your application

Configure Universal Components

Style components

Install Universal Components

Configure your application

Configure Universal Components

Style components

Install Universal Components

Configure your application

Configure Universal Components

Style components

Example implementations

Next steps