Integrar una biblioteca de componentes personalizada

Aprende a integrar una biblioteca de componentes personalizada con ACUL

Antes de comenzar

Necesitas:

• Un inquilino de desarrollo de Auth0 configurado con Universal Login y un dominio personalizado.
• Una aplicación propia de Auth0.
• Tener habilitada Identifier First Authentication en tu inquilino de Auth0.
• Node.js V22+
• La herramienta Auth0 CLI autenticada en tu inquilino existente.
• Haber revisado la guía de inicio rápido de ACUL

Con ACUL, puedes usar la biblioteca de componentes que prefieras para personalizar las pantallas de Universal Login. En el siguiente ejemplo se usan Shadcn, una biblioteca de componentes reutilizables, y la pantalla login-passwordless-email-code de Auth0. En este ejemplo, reemplaza el campo de entrada de OTP predeterminado por el componente InputOTP de Shadcn.

1. Usa la herramienta Auth0 CLI para crear un proyecto de ACUL.

auth0 acul init <Your-App-Name>

Selecciona la pantalla login-passwordless-email-code

2. Ejecuta el servidor de desarrollo local de ACUL para editar y ver los cambios en la pantalla.

auth0 acul dev

3. Inicializa Shadcn en la raíz de tu proyecto:

npx shadcn-ui@latest init

4. Sigue las indicaciones de la CLI para crear el archivo components.json, que contendrá la configuración de tu proyecto, y el archivo src/lib/utils.ts.

5. Agrega los archivos del componente a src/components/ui/input-otp.tsx:

npx shadcn-ui@latest add input-otp

6. Integre el componente: a. Vaya a src/screens/login-passwordless-email-code/components/IdentifierForm.tsx y abra el archivo. b. Importe los componentes InputOTP y reemplace el campo de entrada actual. También debe gestionar el estado del código OTP y usar el hook correcto del SDK.

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

// ... dentro de tu componente
const { submit } = useEmailOtpChallenge(); 
const [otp, setOtp] = useState('');

const handleSubmit = (e) => {
  e.preventDefault();
  submit({ code: otp }); // Llama al método submit con el code
};

return (
  <form onSubmit={handleSubmit}>
    {/* ... otros elementos de la interfaz ... */}
    <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. Ejecuta la pantalla en local con ACUL Context Inspector para ver tu nuevo componente:

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

8. Conecta tu entorno de desarrollo local a tu inquilino de prueba para probar la nueva pantalla en un flujo de autenticación real:

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

9. Sigue las instrucciones para compilar tus recursos locales, iniciar el servidor de desarrollo local y actualizar la configuración de ACUL en tu inquilino.

10. Prueba el flujo de autenticación sin contraseña:

auth0 test login