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

Avant de commencer

Vous avez besoin de :

Un tenant de développement Auth0 configuré avec la Connexion universelle et un domaine personnalisé.
Une Application First Party Auth0.
L’Authentification Identifier First activée dans votre tenant Auth0.
Node.js V22+
L’outil Auth0 CLI authentifié auprès de votre tenant existant.
D’examiner le guide de démarrage rapide ACUL

Avec ACUL, vous pouvez utiliser la bibliothèque de composants de votre choix pour personnaliser les écrans d’invite de votre Connexion universelle. L’exemple suivant utilise Shadcn, une bibliothèque de composants réutilisables et l’écran login-passwordless-email-code d’Auth0. Dans cet exemple, remplacez le champ de saisie OTP par défaut par le composant InputOTP de Shadcn.

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

Exécutez le serveur de développement local 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 afin de contenir la configuration de votre projet et un fichier src/lib/utils.ts.
Ajoutez les fichiers de composants à src/components/ui/input-otp.tsx :

npx shadcn-ui@latest add input-otp

Intégrez le composant : a. Naviguez jusqu’à 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 également gérer l’état du code OTP et utiliser le hook SDK correct.

// 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 }); // Call the submit method with the 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’Inspecteur de Contexte ACUL pour voir votre nouveau composant :

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

onnectez votre environnement de développement local à votre tenant de test pour essayer le nouvel écran dans un flux d’authentification en direct :

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

Suivez les invites pour construire vos assets locaux, 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 la marque

Personnalisation du code

Personnalisation tierce

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

Avant de commencer