> ## Documentation Index
> Fetch the complete documentation index at: https://docs-dev-docs-event-stream-action-templates.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> Démarrer avec le guide de démarrage rapide ACUL

# Démarrage rapide ACUL

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

  * Un tenant de développement Auth0 configuré avec la [Connexion universelle](/docs/fr-ca/authenticate/login/auth0-universal-login) et un [domaine personnalisé](/docs/fr-ca/customize/custom-domains).
  * Une [Application First Party](/docs/fr-ca/get-started/auth0-overview/create-applications#create-applications) Auth0.
  * [L'Authentification Identifier First](/docs/fr-ca/authenticate/login/auth0-universal-login/identifier-first) activée dans votre tenant Auth0.
  * [Node.js](http://Node.js) V22
  * [Auth0 CLI](https://auth0.github.io/auth0-cli/) installé et configuré avec votre tenant de développement.
</Card>

Auth0 CLI vous permet d'implémenter et de tester les écrans de personnalisation avancée pour la connexion universelle (ACUL). Il simplifie la personnalisation des écrans d'authentification (tels que Login, Signup, Passwordless, et Passkey enrollment) pour qu'ils correspondent exactement à vos applications web.

Suivez ces étapes pour créer un projet ACUL et un écran `login_id` personnalisé à l'aide d'Auth0 CLI:

## 1. Initialiser un exemple d'application ACUL

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Si vous n'avez pas configuré votre tenant de développement avec Auth0 CLI, utilisez la commande `auth0 login` pour configurer votre tenant.
</Callout>

Naviguez vers un emplacement pour construire votre projet et exécutez la commande suivante :

```bash theme={null}
auth0 acul init "Your_App_Name"
```

1. Sélectionnez **React (with ACUL React SDK)**.
2. Sélectionnez l'écran **login-id**.
3. À **Would you like to proceed with installing the required dependencies using 'npm install'?** Entrez **y**.

Auth0 CLI crée un nouveau répertoire de projet avec le nom d'application fourni.

\<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
Si vous n'avez pas sélectionné **y** pour installer les dépendances requises, naviguez vers votre répertoire de projet et exécutez la commande `npm install`.
\</Callout>

## 2. (Optionnel) Ajouter des écrans supplémentaires à votre projet

Sélectionnez des écrans supplémentaires pour votre projet en exécutant la commande suivante :

```bash theme={null}
auth0 acul screen add SCREEN_NAME 
```

## 3. Lancer l'écran Login Id avec l'Inspecteur de Contexte Connexion Universelle

Utilisez l'inspecteur de contexte UL pour lancer l'écran Login ID:

1. Naviguez vers votre répertoire de projet et exécutez la commande suivante :

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

2. Confirmez le répertoire du projet
3. Sélectionnez le port pour partager les assets locaux, par défaut le Port `55444`

L'Inspecteur de Contexte Connexion universelle ouvre une nouvelle fenêtre de navigateur avec l'écran Login Id.

## 4. Mettre à jour l'exemple d'écran Login Id

\<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
La commande auth0 acul dev construit les écrans ACUL, héberge vos assets localement, et surveille en permanence les mises à jour du répertoire des assets; vous permettant de tester vos écrans localement. Pour en savoir plus, lisez la documentation de la commande [Auth0 CLI acul](https://auth0.github.io/auth0-cli/auth0_acul_dev.html).
\</Callout>

1. Dans votre répertoire de projet, modifiez le répertoire `/src/index.css` et mettez à jour le widget de logo avec l'URL de votre logo :

`--ul-theme-widget-logo-url: "Your-Logo-URL";`

2. Enregistrez la modification.

Le serveur de développement local se rafraîchit automatiquement avec la dernière modification.

## 5. Personnaliser les données de contexte pour vos écrans d'authentification

En utilisant l'Inspecteur de Contexte Connexion universelle, vous pouvez personnaliser les données de contexte par défaut pour tester vos écrans d'authentification par rapport aux configurations spécifiques au tenant.

1. Créez une version locale des données de contexte factices pour un écran de votre projet :

Sélectionnez l'icône **Télécharger JSON** pour télécharger le fichier de données de contexte factices.

\<Frame>\<img src="/docs/images/cdy7uua7fh8z/ACUL/ULContextInspectorDownload.png" alt="Page ACUL du Dashboard Auth0" />\</Frame>

2. Renommez et déplacez le fichier téléchargé vers `public/screens/{prompt}/{screen}` et ajoutez-le au fichier `public/manifest.json file` dans le répertoire de votre projet.

   Par exemple, le fichier `login-id-login-id-context.json` téléchargé est renommé `login-id.json` et est déplacé vers `/public/screens/login-id/login-id.json`.

3. Sélectionnez **Développement Local** dans la **Source de données** de l'Inspecteur de Contexte Universal Login pour charger la version locale du contexte factice pour l'écran.

Pour en savoir plus, lisez la documentation [Auth0 CLI ACUL](https://auth0.github.io/auth0-cli/auth0_acul_dev.html) documentation.