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

> Premiers pas avec les personnalisations avancées pour Universal Login d’Auth0 en initialisant un exemple de projet, en le déployant dans votre tenant et en affichant votre premier écran de connexion personnalisé.

# Quickstart ACUL

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

  * d’un tenant de développement Auth0 configuré avec [Universal Login](/docs/fr-ca/authenticate/login/auth0-universal-login) et un [domaine personnalisé](/docs/fr-ca/customize/custom-domains).
  * d’une [application Auth0 de première partie](/docs/fr-ca/get-started/auth0-overview/create-applications#create-applications).
  * de l’option [Identifier First Authentication](/docs/fr-ca/authenticate/login/auth0-universal-login/identifier-first) activée dans votre tenant Auth0.
  * de [Node.js](http://Node.js) V22
  * d’[Auth0 CLI](https://auth0.github.io/auth0-cli/) installé et configuré avec votre tenant de développement.
</Card>

Auth0 CLI vous permet de mettre en œuvre et de tester les écrans de personnalisation avancée pour Universal Login (ACUL). Il simplifie la personnalisation des écrans d’authentification (comme Login, Signup, Passwordless et l’enregistrement de Passkey) pour qu’ils correspondent parfaitement à 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 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>

Accédez à l’emplacement 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 (avec Auth0 ACUL React SDK)**.
2. Sélectionnez l’écran **login-id**.
3. À la question **Souhaitez-vous poursuivre l’installation des dépendances requises à l’aide de 'npm install' ?**, saisissez **y**.

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

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Si vous n’avez pas sélectionné **y** pour installer les dépendances requises, 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) Ajoutez 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. Ouvrez l’écran Login Id avec Universal Login Context Inspector
</div>

Utilisez l’inspecteur de contexte UL pour ouvrir 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 diffuser les ressources statiques locales, par défaut le port `55444`

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

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

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  La commande auth0 acul dev génère les écrans ACUL, héberge vos ressources statiques localement et surveille en continu les mises à jour dans le répertoire des ressources statiques, ce qui vous permet de tester vos écrans en local. 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 du 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 s’actualise automatiquement avec la dernière modification.

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

À l’aide de l’Universal Login Context Inspector, vous pouvez personnaliser les données de contexte par défaut afin de tester vos écrans d’authentification selon des configurations propres au tenant.

1. Créez une version locale des données de contexte simulées pour un écran de 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/translations/mMSz-RNYLuOm2GmQ/docs/images/cdy7uua7fh8z/ACUL/ULContextInspectorDownload.png?fit=max&auto=format&n=mMSz-RNYLuOm2GmQ&q=85&s=b4b206e8dc882316712860b31b556db3" alt="Page ACUL de l’Auth0 Dashboard" width="547" height="239" data-path="docs/images/cdy7uua7fh8z/ACUL/ULContextInspectorDownload.png" />
</Frame>

2. Renommez le fichier téléchargé, déplacez-le vers `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 déplacé vers `/public/screens/login-id/login-id.json`.

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

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