Skip to content

README.md

Latest commit

 

History

History
152 lines (113 loc) · 5.68 KB

README.md

File metadata and controls

152 lines (113 loc) · 5.68 KB

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.

npm version license downloads

📚 Documentation - 🚀 Getting Started - 💬 Feedback

Documentation

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:

  1. Create an Auth0 Account - Sign up for free
  2. Create an Application - In your Auth0 Dashboard, create a new application
  3. 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

Feedback

Contributing

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

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.

Auth0 Logo

Auth0 is an easy to implement, adaptable authentication and authorization platform. To learn more checkout Why Auth0?

This project is licensed under the Apache 2.0 license. See the LICENSE file for more info.