> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> Aprende a integrar una biblioteca de componentes personalizada con ACUL

# Integrar una biblioteca de componentes personalizada

<Card title="Antes de comenzar">
  Necesitas:

  * Un inquilino de desarrollo de Auth0 configurado con [Universal Login](/es/docs/authenticate/login/auth0-universal-login) y un [dominio personalizado](/es/docs/customize/custom-domains).
  * Una [aplicación propia](/es/docs/get-started/auth0-overview/create-applications#create-applications) de Auth0.
  * Tener habilitada [Identifier First Authentication](/es/docs/authenticate/login/auth0-universal-login/identifier-first) en tu inquilino de Auth0.
  * [Node.js](http://Node.js) V22+
  * La [herramienta Auth0 CLI](https://github.com/auth0/auth0-cli) [autenticada en tu inquilino existente](https://github.com/auth0/auth0-cli?tab=readme-ov-file#authenticating-to-your-tenant).
  * Haber revisado la [guía de inicio rápido de ACUL](/es/docs/customize/login-pages/advanced-customizations/quickstart)
</Card>

Con ACUL, puedes usar la biblioteca de componentes que prefieras para personalizar las pantallas de Universal Login. En el siguiente ejemplo se usan [Shadcn](https://ui.shadcn.com/docs), 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](https://ui.shadcn.com/docs/components/input-otp) de Shadcn.

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

```bash theme={null}
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.

```bash theme={null}
auth0 acul dev
```

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

```bash theme={null}
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`:

```bash theme={null}
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.

```bash theme={null}
// 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:

```bash theme={null}
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:

```bash theme={null}
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:

```bash theme={null}
auth0 test login
```