Skip to main content
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+.

​
Install Universal Components

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,
      }}
    >
      <Auth0ComponentProvider domain={domain}>
        {/* Your app components */}
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}
  1. 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.

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