Auth0 Universal Components

What does “BETA” mean? Our BETA components are stable and have been through rigorous testing. However, the component APIs (props, theming variables, etc.) may be subject to changes as we gather feedback. We do not recommend using BETA components in production applications.

Ready to Use

Pre-built, fully functional components that integrate seamlessly with Auth0’s authentication platform. Simply install, configure, and start building secure applications with multi-factor authentication support.

What’s Included

My Account Components

Multi-factor authentication and user security management components.

My Organization Components

Organization management and administration components.

Installation

Option 1: NPM Package

Install the React package:

npm install @auth0/universal-components-react

This method installs pre-built components from npm and is the recommended approach for most applications.

Option 2: Shadcn CLI

If you’re using Shadcn, you can add individual blocks directly to your project. You’ll still need to install the core package separately:

Install Core Package

npm install @auth0/universal-components-core

Add Shadcn Block

For example, to add the OrganizationDetailsEdit component:

npx shadcn@latest add https://auth0-universal-components.vercel.app/r/my-organization/organization-details-edit.json

Import Global Styles

When using Shadcn components, you must import the global styles in your root file:

// In your App.tsx or main entry file
import 'src/auth0-ui-components/styles/globals.css';

Shadcn installs the React component source code in your src/auth0-ui-components/ directory along with all UI dependencies, but you must install the core package separately via npm.

Prerequisites

Auth0 Account: Sign up at auth0.com - React 16.11+: This package supports React 16.11.0 and above, including React 17, 18, and 19 - Tailwind CSS Configured: Follow the Tailwind CSS installation guide

Peer Dependencies

The following packages must be installed in your application:

react ^16.11.0 || ^17 || ^18 || ^19
react-dom ^16.11.0 || ^17 || ^18 || ^19
react-hook-form ^7.0.0
tailwindcss ^3.0.0 || ^4.0.0
@auth0/auth0-react ^2.0.0

Install Peer Dependencies

npm install react react-dom react-hook-form tailwindcss @auth0/auth0-react

Component Configuration

Each component may require specific configuration in your Auth0 application. Before using any component, make sure to check its dedicated page for component-specific prerequisites and Auth0 setup requirements.

Quick Start

React SPA

1. Wrap Your App 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';

function App() {
  return (
    <Auth0Provider
      domain={import.meta.env.VITE_AUTH0_DOMAIN}
      clientId={import.meta.env.VITE_AUTH0_CLIENT_ID}
      authorizationParams={{
        redirect_uri: window.location.origin
      }}
    >
      <Auth0ComponentProvider>
        {/* Your app components */}
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

2. Use an Auth0 Universal Component

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 Configuration

The Auth0ComponentProvider accepts the following properties to configure the behavior and appearance of Auth0 UI Components:

Property	Type	Required	Description
`authDetails`	`AuthDetails`	No	Authentication configuration including optional domain and authProxyUrl
`i18n`	`I18nOptions`	No	Internationalization settings including currentLanguage and fallbackLanguage
`themeSettings`	`ThemeSettings`	No	Theme configuration including mode (light/dark), theme variant (default/minimal/rounded), and CSS variables
`toastSettings`	`ToastSettings`	No	Toast notification configuration including provider selection (sonner/custom), positioning, duration, and custom toast methods
`loader`	`React.ReactNode`	No	Custom loading component to display during authentication initialization

authDetails

Property	Type	Required	Description
`domain`	`string`	No	Your Auth0 domain (e.g., “your-tenant.auth0.com”)
`authProxyUrl`	`string`	Conditional	URL to your authentication proxy server for server-side authentication. Required for RWA/Next.js mode (enables Proxy Mode).
`contextInterface`	`BasicAuth0ContextInterface`	No	Custom authentication context interface for frameworks other than @auth0/auth0-react

i18n

Property	Type	Default	Description
`currentLanguage`	`string`	`"en"`	Current language code (e.g., “en”, “es”, “fr”)
`fallbackLanguage`	`string`	`"en"`	Fallback language code when translations are missing

themeSettings

Property	Type	Default	Description
`mode`	`"light" \| "dark"`	`"light"`	Theme color mode
`theme`	`"default" \| "minimal" \| "rounded"`	`"default"`	Theme variant with different styling approaches
`variables`	`ThemeVariables`	`{}`	CSS custom properties for common, light, and dark themes

Available CSS Variables

Typography

--font-size-page-header - --font-size-page-description - --font-size-heading - --font-size-title - --font-size-subtitle - --font-size-body - --font-size-paragraph - --font-size-label

Border Radius

--radius-xs through --radius-9xl

Colors (Light & Dark)

--background, --foreground - --card, --card-foreground - --primary, --primary-foreground - --secondary, --secondary-foreground - --accent, --accent-foreground - --muted, --muted-foreground - --destructive, --destructive-foreground - --popover, --popover-foreground - --input, --border, --ring - --color-page - --color-info, --color-info-foreground - --color-success, --color-success-foreground - --color-warning, --color-warning-foreground - --color-destructive-border - --color-popover-border - --color-input-foreground - --color-input-muted

Shadows

--shadow-bevel-* (xs, sm, md, lg, xl, 2xl) - --shadow-button-* (resting, hover, focus) - --shadow-button-destructive-* - --shadow-button-outlined-* - --shadow-input-* (resting, hover, focus)
--shadow-input-destructive-* - --shadow-checkbox-* (resting, hover)
--shadow-switch-* (resting, hover, focus, thumb, thumb-dark)

toastSettings

Toast settings support two provider types: Sonner (default) or custom. Each provider has its own configuration structure for better type safety.

Sonner Provider (Default)
Custom Provider

Property	Type	Default	Description
`provider`	`"sonner"`	`"sonner"`	Uses the built-in Sonner toast library
`settings.position`	`ToastPosition`	`"top-right"`	Position where toasts appear
`settings.duration`	`number`	`4000`	Duration in milliseconds before toast auto-dismisses
`settings.maxToasts`	`number`	`3`	Maximum number of toasts visible at once
`settings.dismissible`	`boolean`	`true`	Whether toasts can be manually dismissed
`settings.closeButton`	`boolean`	`true`	Whether to show an explicit close button

Example

const toastSettings = {
  provider: 'sonner', // Optional, this is the default
  settings: {
    position: 'top-center',
    duration: 6000,
    maxToasts: 5,
    dismissible: true,
    closeButton: true // Enabled by default for better UX
  }
};

Property	Type	Required	Description
`provider`	`"custom"`	Yes	Uses your custom toast implementation
`methods`	`CustomToastMethods`	Yes	Custom toast methods for success, error, warning, info, and dismiss actions

Example

const toastSettings = {
  provider: 'custom',
  methods: {
    success: (message: string) => {
      // Your custom success toast implementation
      myToastLibrary.success(message);
    },
    error: (message: string) => {
      // Your custom error toast implementation
      myToastLibrary.error(message);
    },
    warning: (message: string) => {
      // Your custom warning toast implementation
      myToastLibrary.warning(message);
    },
    info: (message: string) => {
      // Your custom info toast implementation
      myToastLibrary.info(message);
    },
    dismiss: (toastId?: string) => {
      // Your custom dismiss implementation
      myToastLibrary.dismiss(toastId);
    }
  }
};

Custom methods only receive the message text. Your custom implementation handles all styling, positioning, and timing.

Start Building

Ready to add Auth0 components to your application? Choose your path:

My Account Components

Multi-factor authentication and user security management components.

My Organization Components

Organization management and administration components.

Example Implementation

See complete working examples in the “react-spa-npm”, “react-spa-shadcn”, “next-rwa” sample applications.

View on GitHub

Explore sample applications and implementation patterns

My Organization

Ready to Use

​What’s Included

My Account Components

My Organization Components

​Installation

​Option 1: NPM Package

​Option 2: Shadcn CLI

​Prerequisites

​Peer Dependencies

​Install Peer Dependencies

​Component Configuration

​Quick Start

​1. Wrap Your App with Auth0Provider and Auth0ComponentProvider.

​2. Use an Auth0 Universal Component

​Auth0ComponentProvider Configuration

​authDetails

​i18n

​themeSettings

​toastSettings

​Start Building

My Account Components

My Organization Components

​Example Implementation

View on GitHub

What’s Included

Installation

Option 1: NPM Package

Option 2: Shadcn CLI

Prerequisites

Peer Dependencies

Install Peer Dependencies

Component Configuration

Quick Start

1. Wrap Your App with Auth0Provider and Auth0ComponentProvider.

2. Use an Auth0 Universal Component

Auth0ComponentProvider Configuration

authDetails

i18n

themeSettings

toastSettings

Start Building

Example Implementation