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

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

Avant de commencer

Vous aurez besoin de :

• Un tenant de développement Auth0 configuré avec Universal Login et un domaine personnalisé.
• Une application propriétaire Auth0.
• L’activation de Identifier First Authentication dans votre tenant Auth0.
• Node.js V22+
• L’outil de ligne de commande Auth0 authentifié auprès de votre tenant existant.
• La consultation du guide de démarrage rapide d’ACUL

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, 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 de ligne de commande Auth0 pour créer un projet ACUL.

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.

auth0 acul dev

3. Initialisez Shadcn à la racine de votre projet :

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 :

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.

// 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 :

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 :

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 :

auth0 test login