@auth0/auth0-acul-react

@auth0/auth0-acul-react

Developers using Auth0’s Universal Login can use this React SDK to customize screens like login, signup, or reset password. It provides hooks, context, and utilities to build flexible, type-safe experiences that match your brand and deliver a seamless user experience.

📚 Documentation | 🚀 Getting Started | 💻 API Reference | 💬 Feedback

Table of Contents

• Installation
• Importing the SDK
  • Partial Imports
  • Root Imports
  • Types / Interfaces
• Examples

Installation

npm install @auth0/auth0-acul-react

Peer dependency:

npm install react

Importing the SDK

The SDK supports partial imports for each screen, allowing you to include only the code you need for your specific use case. This helps keep your bundle size small and improves performance. Also, you can use a root import to load all screens from a single bundle if your app requires it.

Partial Imports

Each screen has its own set of hooks and methods. You can import only what you need for the screen you're building.

The following example shows how to import and use SDK to build login-id screen.

import { 
  // Context hooks
  useUser,
  useTenant,
  useBranding,
  useClient,
  useOrganization,
  usePrompt,
  useScreen,
  useTenant,
  useTransaction,
  useUser,
  useUntrustedData,
  // Common hooks
  useErrors,
  useTexts,
  // Utility hooks
  useUsernameValidation,
  usePasswordValidation,
  useLoginIdentifiers,
  // Submit methods
  login,
  passkeyLogin,
  federatedLogin,
} from '@auth0/auth0-acul-react/login-id';

Root Imports

The SDK also supports a root import, which lets you load all screens from a single bundle. This is useful if your app dynamically renders different screens at runtime based on the current Auth0 flow, for example, when you want one unified build that can handle all possible screens.

However, root imports aren’t ideal for most projects since they can increase bundle size. If you only need specific screens, use partial imports instead for better performance.

import {
  // Common hooks
  useCurrentScreen,
  useAuth0Themes,
  useErrors,

  // Screen-specific hooks for multiple screens
  useLoginId,
  useSignupId,
  useResetPassword
} from '@auth0/auth0-acul-react';

Types / Interfaces

Typescript types and interfaces can be imported from @auth0/auth0-acul-react/types for type safety and better DX.

import type {
  Connection,
  CustomOptions,
  IdentifierType,
  Organizations,
  EnrolledDevice
  // ...other types
} from '@auth0/auth0-acul-react/types';

Refer to our API Reference for the full list of available types and interfaces.

Examples

Check out the examples/ directory for complete, working examples of how to use this SDK to build custom Universal Login screens.

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

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