> ## 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.

> Découvrez comment intégrer une bibliothèque de composants personnalisée à ACUL

# Intégrer une bibliothèque de composants personnalisée

<Card title="Avant de commencer">
  Vous aurez besoin de :

  * Un tenant de développement Auth0 configuré avec [Universal Login](/fr-CA/docs/authenticate/login/auth0-universal-login) et un [domaine personnalisé](/fr-CA/docs/customize/custom-domains).
  * Une [application propriétaire](/fr-CA/docs/get-started/auth0-overview/create-applications#create-applications) Auth0.
  * L’activation de [Identifier First Authentication](/fr-CA/docs/authenticate/login/auth0-universal-login/identifier-first) dans votre tenant Auth0.
  * [Node.js](http://Node.js) V22+
  * L’[outil de ligne de commande Auth0](https://github.com/auth0/auth0-cli) [authentifié auprès de votre tenant existant](https://github.com/auth0/auth0-cli?tab=readme-ov-file#authenticating-to-your-tenant).
  * La consultation du [guide de démarrage rapide d’ACUL](/fr-CA/docs/customize/login-pages/advanced-customizations/quickstart)
</Card>

Avec ACUL, vous pouvez utiliser la bibliothèque de composants de votre choix pour personnaliser les écrans d’invite de votre expérience Universal Login. Les exemples suivants utilisent [Shadcn](https://ui.shadcn.com/docs), une bibliothèque de composants réutilisables, ainsi que l’écran Auth0 `login-passwordless-email-code`. Dans cet exemple, remplacez le champ OTP par défaut par le composant [InputOTP](https://ui.shadcn.com/docs/components/input-otp) de Shadcn.

1. Utilisez l’outil de ligne de commande Auth0 pour créer un projet ACUL.

```bash theme={null}
auth0 acul init <Your-App-Name>
```

Sélectionnez l’écran `login-passwordless-email-code`

2. Lancez le serveur de développement local d’ACUL pour modifier l’écran et prévisualiser vos mises à jour.

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

3. Initialisez Shadcn à la racine de votre projet :

```bash theme={null}
npx shadcn-ui@latest init
```

4. Suivez les instructions de la CLI pour créer le fichier `components.json`, qui contiendra la configuration de votre projet, ainsi que le fichier `src/lib/utils.ts`.

5. Ajoutez les fichiers du composant à `src/components/ui/input-otp.tsx` :

```bash theme={null}
npx shadcn-ui@latest add input-otp
```

6. Intégrez le composant :
   a. Accédez à `src/screens/login-passwordless-email-code/components/IdentifierForm.tsx` et ouvrez le fichier.
   b. Importez les composants InputOTP et remplacez le champ de saisie actuel. Vous devez également gérer l’état du code OTP et utiliser le hook approprié du SDK.

```bash theme={null}
// Dans IdentifierForm.tsx
import { useState } from 'react';
import { useEmailOtpChallenge } from '@auth0/auth0-acul-react'; 
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
} from '@/components/ui/input-otp'; // Importation depuis ShadCN

// ... à l'intérieur de votre composant
const { submit } = useEmailOtpChallenge(); 
const [otp, setOtp] = useState('');

const handleSubmit = (e) => {
  e.preventDefault();
  submit({ code: otp }); // Appeler la méthode submit avec le code
};

return (
  <form onSubmit={handleSubmit}>
    {/* ... autres éléments d'interface ... */}
    <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. Exécutez l’écran en local avec ACUL Context Inspector pour voir votre nouveau composant :

```bash theme={null}
auth0 acul dev -s  login-passwordless-email-code
```

8. Connectez votre environnement de développement local à votre instance de test pour essayer le nouvel écran dans un flux d’authentification réel :

```bash theme={null}
auth0 acul dev --connected --screen login-passwordless-email-code
```

9. Suivez les instructions pour compiler vos ressources locales, démarrer le serveur de développement local et mettre à jour la configuration ACUL sur votre tenant.

10. Testez le processus d’authentification sans mot de passe :

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