@auth0/web-ui-components-react

v1.0.0-beta.21

Published

2 hours ago

![Auth0 React Web Universal Components SDK for JavaScript/TypeScript](https://cdn.auth0.com/website/sdks/banners/web-ui-components-react.png)

Auth0 React Web Universal Components SDK for JavaScript/TypeScript

React component library for Auth0 integrations. Built with TypeScript, Radix UI, and Tailwind CSS.

What it provides:

⚛️ React Components: Pre-built UI components for Auth0 features (MFA management, org management etc.)
🎣 Custom Hooks: React hooks for component state management and API interactions
🎨 UI Elements: Beautiful, accessible components built with Radix UI and Tailwind CSS, following shadcn design patterns
🔄 Providers: React context providers for managing authentication, theme, and internationalization

📖 Documentation

For detailed information on how to use these components and get started with Auth0, please refer to the following resources:

Component Documentation: Live Storybook showcasing all available components, their props, and usage examples
Examples Folder: Practical, hands-on sample applications demonstrating how to integrate and use these components in a real project
Auth0 Quickstarts: Official guides for creating and configuring your application on the Auth0 platform
Auth0 APIs: Comprehensive documentation for Auth0's APIs

🚀 Getting Started

Installation

For SPA (Single Page Application):

npm install @auth0/web-ui-components-react @auth0/auth0-react

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

npm install @auth0/web-ui-components-react @auth0/nextjs-auth0

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, OrgDetailsEdit } from '@auth0/web-ui-components-react/spa';
import '@auth0/web-ui-components-react/styles';

function App() {
  return (
    <Auth0Provider
      domain="your-domain.auth0.com"
      clientId="your-client-id"
      authorizationParams={{
        redirect_uri: window.location.origin,
      }}
    >
      <Auth0ComponentProvider
        authDetails={{
          domain: 'your-domain.auth0.com',
        }}
        themeSettings={{ theme: 'default', mode: 'light' }}
      >
        <OrgDetailsEdit />
      </Auth0ComponentProvider>
    </Auth0Provider>
  );
}

For Next.js Applications:

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

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Auth0ComponentProvider
          authDetails={{
            authProxyUrl: '/api/auth',
          }}
          themeSettings={{ theme: 'default', mode: 'light' }}
        >
          {children}
        </Auth0ComponentProvider>
      </body>
    </html>
  );
}

Step 3: Use Components

import { OrgDetailsEdit } from '@auth0/web-ui-components-react/spa';
// or
import { OrgDetailsEdit } from '@auth0/web-ui-components-react/rwa';

function MyPage() {
  return (
    <div>
      <h1>Organization Settings</h1>
      <OrgDetailsEdit />
    </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/web-ui-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)

License

Distributed under the MIT License.

Authors
Okta Inc.