@auth0/universal-components-react

v2.1.1

Published

13 hours ago

Auth0 Universal Components for React - pre-built UI components for organization management, SSO configuration, and MFA enrollment

Downloads

484

Auth0 React Web Universal Components SDK for JavaScript/TypeScript

Auth0 Universal Components for React - pre-built UI components for organization management, SSO configuration, and MFA enrollment.

📚 Documentation - 🚀 Getting Started - 💬 Feedback

Documentation

Auth0 Universal Components - installation, configuration, and component reference
Examples - sample applications for React SPA, React shadcn, and Next.js
Auth0 Docs - explore our docs site and learn more about Auth0

Getting Started

Installation

For SPA (Single Page Application):

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

For Next.js/Server-Side (RWA):

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

Step 1: Set up Auth0

Before using these components, you need an Auth0 account and application:

Create an Auth0 Account - Sign up for free
Create an Application - In your Auth0 Dashboard, create a new application
Configure Settings - Set up your application's allowed callback URLs, logout URLs, and web origins

For detailed setup instructions, follow the Auth0 React Quickstart.

Step 2: Wrap Your App with Providers

For SPA Applications:

import { Auth0Provider } from '@auth0/auth0-react';
import { Auth0ComponentProvider } from '@auth0/universal-components-react/spa';
import { OrganizationDetailsEdit } from '@auth0/universal-components-react';
import '@auth0/universal-components-react/styles';

function App() {
  return (
    <Auth0Provider
      domain="your-domain.auth0.com"
      clientId="your-client-id"
      authorizationParams={{
        redirect_uri: window.location.origin,
      }}
      interactiveErrorHandler="popup" // Required to handle step-up auth challenges via Universal Login popup
    >
      <Auth0ComponentProvider themeSettings={{ theme: 'default', mode: 'light' }}>
        <OrganizationDetailsEdit />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

For Next.js Applications:

// app/layout.tsx or pages/_app.tsx
import { Auth0ComponentProvider } from '@auth0/universal-components-react/rwa';
import '@auth0/universal-components-react/styles';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Auth0ComponentProvider
          domain="your-domain.auth0.com"
          mode="proxy"
          proxyConfig={{ baseUrl: '/api/auth' }}
          themeSettings={{ theme: 'default', mode: 'light' }}
        >
          {children}
        </Auth0ComponentProvider>
      </body>
    </html>
  );
}

Step 3: Use Components

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

function MyPage() {
  return (
    <div>
      <h1>Organization Settings</h1>
      <OrganizationDetailsEdit />
    </div>
  );
}

Requirements

React >= 16.11.0
React DOM >= 16.11.0
react-hook-form >= 7.0.0
Tailwind CSS >= 3.0.0 || >= 4.0.0 (recommended)
@auth0/auth0-react >= 2.0.0 (required for /spa entry point only)

Related Packages

@auth0/universal-components-core - Core utilities (auto-installed)
@auth0/auth0-react - Auth0 SDK for React (SPA mode)
@auth0/nextjs-auth0 - Auth0 SDK for Next.js (RWA mode)

Feedback

Contributing

We appreciate feedback and contribution to this repo! Before you get started, please read the following:

Contributing Guide

Raise an issue

To provide feedback or report a bug, please raise an issue on our issue tracker.

Vulnerability Reporting

Please do not report security vulnerabilities on the public GitHub issue tracker. The Responsible Disclosure Program details the procedure for disclosing security issues.