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

Avant de commencer

Vous avez besoin de :

D’un tenant de développement Auth0 configuré avec Universal Login et un domaine personnalisé.
D’une Application Auth0 First Party.
D’activer l’authentification Identifier First dans votre tenant Auth0.
De Node.js v22+.
De l’outil Auth0 CLI authentifié auprès de votre tenant existant.
De consulter le guide de démarrage rapide ACUL.

Avec ACUL, vous pouvez utiliser la bibliothèque de composants de votre choix pour personnaliser vos écrans d’invite de connexion Universal Login. L’exemple suivant utilise Shadcn, une bibliothèque de composants réutilisables, ainsi que l’écran Auth0 login-passwordless-email-code. Dans cet exemple, remplacez le champ de saisie du code OTP (One-Time Password, mot de passe à usage unique) par le composant InputOTP de Shadcn.

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

auth0 acul init <Nom-de-votre-application>

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

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

auth0 acul dev

Initialisez Shadcn à la racine de votre projet :

npx shadcn-ui@latest init

Suivez les invites de la CLI pour créer le fichier components.json, qui stockera la configuration de votre projet, ainsi qu’un fichier src/lib/utils.ts.
Ajoutez les fichiers de composants dans src/components/ui/input-otp.tsx :

npx shadcn-ui@latest add input-otp

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 existant. Vous devez aussi gérer l’état du code One‑Time Password (OTP) et utiliser le hook approprié de la Trousse de développement logiciel (SDK).

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

// ... inside your component
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}>
    {/* ... other UI elements ... */}
    <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>
);

Exécutez l’écran localement avec l’outil ACUL Context Inspector pour voir votre nouveau composant :

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

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

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

Suivez les instructions pour générer vos ressources locales, démarrer le serveur de développement local et mettre à jour la configuration ACUL sur votre tenant.
Testez le flux d’authentification sans mot de passe :

auth0 test login

Personnalisation de l’image de marque

Personnalisation du code

Personnalisation par des tiers

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

Avant de commencer