Integrate a Custom Component Library

Learn how to integrate a custom component library with ACUL

Before you start

You need:

• An Auth0 development tenant configured with Universal Login and a custom domain.
• An Auth0 First Party Application.
• Enable Identifier First Authentication in your Auth0 tenant.
• Node.js V22+
• The Auth0 CLI Tool authenticated to your existing tenant.
• To review the ACUL Quickstart guide

With ACUL, you can use your choice of component libraries to customize your Universal Login prompt screens. The following examples uses Shadcn, a library of reusable components and the Auth0 login-passwordless-email-code screen. In this example, replace the default OTP input with Shadcn’s InputOTP component.

1. Use the Auth0 CLI tool to create an ACUL project.

auth0 acul init <Your-App-Name>

Select the login-passwordless-email-code screen

2. Run the ACUL local development server to edit and view your screen updates.

auth0 acul dev

3. Initialize Shadcn in the root of your project:

npx shadcn-ui@latest init

4. Follow the CLI prompts to create the components.json file to hold the configuration for your project and a src/lib/utils.ts file.

5. Add the component files to src/components/ui/input-otp.tsx:

npx shadcn-ui@latest add input-otp

6. Integrate the component: a. Navigate to src/screens/login-passwordless-email-code/components/IdentifierForm.tsx and open the file. b. Import the InputOTP components and replace the existing input field. You also need to manage the state of the OTP code and use the correct SDK hook.

// In IdentifierForm.tsx
import { useState } from 'react';
import { useEmailOtpChallenge } from '@auth0/auth0-acul-react'; 
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
} from '@/components/ui/input-otp'; // Import from ShadCN

// ... inside your component
const { submit } = useEmailOtpChallenge(); 
const [otp, setOtp] = useState('');

const handleSubmit = (e) => {
  e.preventDefault();
  submit({ code: otp }); // Call the submit method with the code
};

return (
  <form onSubmit={handleSubmit}>
    {/* ... other UI elements ... */}
    <InputOTP maxLength={6} value={otp} onChange={setOtp}>
      <InputOTPGroup>
        <InputOTPSlot index={0} />
        <InputOTPSlot index={1} />
        <InputOTPSlot index={2} />
        <InputOTPSlot index={3} />
        <InputOTPSlot index={4} />
        <InputOTPSlot index={5} />
      </InputOTPGroup>
    </InputOTP>
    <Button type="submit">Verify Code</Button>
  </form>
);

7. Run the screen locally with the ACUL Context Inspector to see your new component:

auth0 acul dev -s  login-passwordless-email-code

8. Connect your local dev environment to your test tenant to try the new screen in a live authentication flow:

auth0 acul dev --connected --screen login-passwordless-email-code

9. Follow the prompts to build your local assets, start the local dev server, and update the ACUL configuration on your tenant.

10. Test the passwordless authentication flow:

auth0 test login