> ## Documentation Index
> Fetch the complete documentation index at: https://docs-dev-actions-triggers-prototype.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Auth0 Universal Components

> Learn how to install and configure Auth0 Universal Components.

<Warning>
  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](https://www.okta.com/agreements/). To learn more, read [Product
  Release Stages](/docs/troubleshoot/product-lifecycle/product-release-stages).
</Warning>

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](/docs/libraries) 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](/docs/authenticate/single-sign-on) with Auth0 or your [Social or Enterprise Identity Provider (IdP)](/docs/authenticate/single-sign-on/outbound-single-sign-on)
* 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](/docs/manage-users/my-account-api) and [My Organization](/docs/api/myorganization) 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](https://ui.shadcn.com/docs/components) components and [Tailwind CSS](https://tailwindcss.com/docs/installation/using-vite) stylesheets to customize components to fit your own branding and themes.

## Prerequisites

To use Auth0 Universal Components:

* You must [have an Auth0 account](https://auth0.com) and configure an Auth0 tenant with the My Account and My Organization APIs enabled
* [Register your Auth0 application](/docs/get-started/auth0-overview/create-applications). If you do not have an Auth0 application, you can get started with the Auth0 React or Next.js [Quickstarts](https://auth0.com/docs/quickstart/spa/react).
* Install [Shadcn UI](https://ui.shadcn.com/docs/installation) to build the Universal Component library
* Install [Tailwinds CSS v.3](https://tailwindcss.com/docs/installation) to style components for your brand
* For client-side authentication, install **React v.16.11+**.
* For server-side authentication, install **Next.js v.13+**.

<Tabs>
  <Tab title="React">
    ## Install Universal Components

    <CodeGroup>
      ```bash npm  theme={null}
      npm install @auth0/universal-components-react react-hook-form @auth0/auth0-react
      ```

      ```bash pnpm theme={null}
      pnpm add @auth0/universal-components-react react-hook-form @auth0/auth0-react
      ```

      <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
        Installs the package with required peer dependencies (`react-hook-form` and `@auth0/auth0-react`).
      </Callout>
    </CodeGroup>

    ## Configure your application

    1. Wrap your application with `Auth0Provider` and `Auth0ComponentProvider`:

    ```tsx App.tsx theme={null}
    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:

    ```tsx OrganizationManagementPage.tsx theme={null}
    import { useAuth0 } from "@auth0/auth0-react";
    import { OrganizationDetailsEdit } from "@auth0/universal-components-react";

    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.

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

    ## Style components

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      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.
    </Callout>

    Use CSS variables to customize your branding:

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

    To learn more, read [Style Universal Components](/docs/get-started/universal-components/universal-components-style).
  </Tab>

  <Tab title="Next.js">
    ## Install Universal Components

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      You do not need `@auth0/auth0-react`. The Next.js implementation uses proxy
      mode with server-side authentication.
    </Callout>

    <CodeGroup>
      ```bash npm  theme={null}
      npm install @auth0/universal-components-react react-hook-form
      ```

      ```bash pnpm theme={null}
      pnpm add @auth0/universal-components-react react-hook-form
      ```
    </CodeGroup>

    ## Configure your application

    1. Wrap your application with `Auth0Provider` and `Auth0ComponentProvider`:

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

    ```tsx layout.tsx theme={null}
    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:

    ```tsx page.tsx theme={null}
    import { OrganizationDetailsEdit } from "@auth0/universal-components-react";

    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.

    ```tsx layout.tsx theme={null}
    <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

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      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.
    </Callout>

    Use CSS variables to customize your branding:

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

    To learn more, read [Style Universal Components](/docs/get-started/universal-components/universal-components-style).
  </Tab>

  <Tab title="shadcn">
    ## Install Universal Components

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

    ```bash theme={null}
    npx shadcn@latest init
    ```

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

    ```bash theme={null}
    npx shadcn@latest add @auth0/organization-details-edit
    ```

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      Shadcn CLI installs the component source code and the
      `@auth0/universal-components-core` dependency for shared utilities and Auth0
      integration.
    </Callout>

    ## Configure your application

    1. Wrap your application with `Auth0Provider` and `Auth0ComponentProvider`:

    ```tsx App.tsx theme={null}
    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:

    ```tsx OrganizationManagementPage.tsx theme={null}
    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.

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

    ## Style components

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      Styles for Shadcn are already included in your Tailwind build. No additional
      style imports are needed.
    </Callout>

    Use CSS variables to customize your branding:

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

    To learn more, read [Customize Style and Themes with Universal Components](/docs/get-started/universal-components/universal-components-style).
  </Tab>
</Tabs>

## Example implementations

See complete working examples in the sample applications.

<Card title="Code Examples" icon="github" href="https://github.com/auth0/auth0-ui-components/tree/main/examples">
  React SPA (npm), React SPA (shadcn), and Next.js sample applications with full
  implementation patterns
</Card>

<CardGroup cols={2}>
  <Card title="SaaStart Live Demo" icon="play" href="https://universal-components-saastart.vercel.app/">
    See My Organization Components in action in the live reference B2B SaaS app
  </Card>

  <Card title="SaaS Starter Repository" icon="github" href="https://github.com/auth0-ui-components/saas-starter-uicomponents">
    A secure and high-performance starting point for building modern B2B SaaS web applications.
  </Card>
</CardGroup>

## Learn more

* [Configure Auth0ComponentProvider](/docs/get-started/universal-components/auth0-component-provider)
* [Customize Style and Themes with Universal Components](/docs/get-started/universal-components/universal-components-style)