> ## Documentation Index
> Fetch the complete documentation index at: https://auth0.generaltranslation.app/llms.txt
> Use this file to discover all available pages before exploring further.

> Mise en route avec le Démarrage rapide ACUL

# Démarrage rapide ACUL

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

  * Un tenant Auth0 de développement configuré avec [Universal Login](/docs/fr-CA/authenticate/login/auth0-universal-login) et un [domaine personnalisé](/docs/fr-CA/customize/custom-domains).
  * Une [Application](/docs/fr-CA/get-started/auth0-overview/create-applications#create-applications) Auth0 First Party.
  * [Identifier First Authentication](/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ée et configurée avec votre tenant de développement.
</Card>

Auth0 CLI vous permet d’implémenter et de tester les écrans ACUL (Advanced Customization for Universal Login). Elle simplifie la personnalisation des écrans d’authentification (comme la connexion, l’inscription, l’authentification sans mot de passe et l’inscription de passkeys) 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 :

<div id="1-initialize-an-acul-sample-application">
  ## 1. Initialiser une application d’exemple ACUL
</div>

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

Placez-vous dans le répertoire où vous souhaitez créer votre projet, puis 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. À la question **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 choisi **y** pour installer les dépendances nécessaires, accédez au répertoire de votre projet et exécutez la commande `npm install`.
</Callout>

<div id="2-optional-add-additional-screens-to-your-project">
  ## 2. (Facultatif) Ajouter d'autres écrans à votre projet
</div>

Sélectionnez d'autres écrans pour votre projet en exécutant la commande suivante :

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

<div id="3-launch-the-login-id-screen-with-universal-login-context-inspector">
  ## 3. Lancer l’écran Login Id avec Universal Login Context Inspector
</div>

Utilisez l’inspecteur de contexte UL pour lancer l’écran Login Id :

1. Accédez au répertoire de votre 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 ressources locales, par défaut le port `55444`

L’outil Universal Login Context Inspector ouvre une nouvelle fenêtre de navigateur avec l’écran Login Id.

<div id="4-update-the-sample-login-id-screen">
  ## 4. Mettre à jour l'écran Login Id de l'exemple
</div>

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  La commande auth0 acul dev génère les écrans ACUL, héberge vos ressources en local et surveille en continu les mises à jour du répertoire des ressources, ce qui vous permet de tester vos écrans localement. Pour en savoir plus, consultez la documentation de la commande [Auth0 CLI acul](https://auth0.github.io/auth0-cli/auth0_acul_dev.html).
</Callout>

1. Dans le répertoire de votre projet, modifiez le fichier `/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 met automatiquement à jour avec la dernière modification.

<div id="5-customize-the-context-data-for-your-authentication-screens">
  ## 5. Personnaliser les données de contexte pour vos écrans d'authentification
</div>

À l'aide de l'outil Universal Login Context Inspector, vous pouvez personnaliser les données de contexte par défaut pour tester vos écrans d'authentification en fonction des configurations propres à un tenant donné.

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

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

<Frame>
  <img src="https://mintcdn.com/generaltranslationinc/IhLUvTv5J5eZ1VeH/docs/images/cdy7uua7fh8z/ACUL/ULContextInspectorDownload.png?fit=max&auto=format&n=IhLUvTv5J5eZ1VeH&q=85&s=1be3faea5d2abebf1ce74ffec22981cd" alt="Page ACUL dans Auth0 Dashboard" width="547" height="239" data-path="docs/images/cdy7uua7fh8z/ACUL/ULContextInspectorDownload.png" />
</Frame>

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

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

3. Sélectionnez **Local Development** dans **Data source** d’Universal Login Context Inspector pour charger la version locale des données de contexte simulées pour l'écran.

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