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

Ajoutez les bibliothèques de composants de votre choix pour personnaliser les écrans d’invite de votre Universal Login à l’aide d’ACUL.

Avant de commencer

Vous aurez besoin de :

• Un tenant Auth0 de développement configuré avec Universal Login et un domaine personnalisé.
• Une application propriétaire Auth0.
• Activer Identifier First Authentication dans votre tenant Auth0.
• Node.js V22+
• L’outil Auth0 CLI authentifié auprès de votre tenant existant.
• Consulter le guide Quickstart

Avec ACUL, vous pouvez utiliser la bibliothèque de composants de votre choix pour personnaliser les écrans d’invite de votre Universal Login. Les exemples suivants utilisent Shadcn, 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 de Shadcn.

1. Utilisez l’outil Auth0 CLI pour créer un projet ACUL.

auth0 acul init <Your-App-Name>

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

2. Exécutez le serveur de développement local d’ACUL pour modifier votre écran et prévisualiser les mises à jour.

auth0 acul dev

3. Initialisez Shadcn dans le répertoire racine de votre projet :

npx shadcn-ui@latest init

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

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

npx shadcn-ui@latest add input-otp

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

// 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 l’ACUL Context Inspector pour voir votre nouveau composant :

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

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

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

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

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

auth0 test login