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

> Décrit comment migrer de Classic Login vers Universal Login avec ACUL.

# Migrer de Classic Login vers Universal Login avec ACUL

<Warning>
  À l’heure actuelle, les efforts de développement d’Auth0 sont axés sur Universal Login, et Classic Login n’est plus mis à jour. Sauf si votre cas d’utilisation exige l’expérience Classic, nous recommandons de mettre en œuvre Universal Login.
  Pour comparer les fonctionnalités des expériences de connexion, consultez [Universal Login vs. Classic Login](/docs/fr-ca/authenticate/login/auth0-universal-login/universal-login-vs-classic-login).
</Warning>

Nous recommandons de migrer la mise en œuvre de votre écran [Classic Login](/docs/fr-ca/authenticate/login/auth0-universal-login/universal-login-vs-classic-login/classic-experience#classic-login-experience) vers [Universal Login](/docs/fr-ca/authenticate/login/auth0-universal-login/universal-login-vs-classic-login/universal-experience) à l’aide de [Advanced Customizations for Universal Login (ACUL)](/docs/fr-ca/customize/login-pages/advanced-customizations#advanced-customizations-for-universal-login-acul).

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

  * 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).
  * [Auth0 CLI](https://auth0.github.io/auth0-cli/) installé et configuré pour votre tenant de développement.
  * Un dépôt [GitHub](https://github.com/) pour héberger vos écrans de connexion ACUL personnalisés.
  * Un inventaire des ressources de votre expérience Classic Login :
    * Composants d’interface utilisateur.
    * Jetons de thème/CSS et ressources d’image de marque.
    * Règles de validation (format du courriel, champs obligatoires).
    * Comportement de gestion des erreurs.
</Card>

<div id="initialize-an-acul-project">
  ## Initialiser un projet 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](https://auth0.github.io/auth0-cli/auth0_login.html).
</Callout>

Accédez à l’emplacement où vous voulez créer votre projet ACUL, puis exécutez la commande suivante :

```bash theme={null}
auth0 acul init acul-login --screens login-id,login-password
```

Auth0 CLI initialise votre projet avec des écrans d’authentification prédéfinis `login-id` et `login-password`.

Pour en savoir plus, consultez [auth0 aclu sur GitHub](https://auth0.github.io/auth0-cli/auth0_acul_init.html).

<div id="customize-acul-screens">
  ## Personnaliser les écrans ACUL
</div>

Personnalisez les écrans `login-id` et `login-password` pour qu’ils correspondent aux normes de votre organisation.

Tenez compte des points suivants :

* Réutilisez le CSS/thème existant ainsi que les composants React.
  * Appliquez l’image de marque (ressources, typographie, mise en page).
  * Ajoutez une validation de base côté client (courriel requis/format ; mot de passe requis).
  * Uniformisez la présentation des erreurs (cohérente et accessible).

Vous pouvez développer vos écrans ACUL localement afin de les personnaliser à l’aide de la commande :

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

Pour en savoir plus, consultez le [processus de développement d’ACUL](/docs/fr-ca/customize/login-pages/advanced-customizations/development-workflow).

<div id="validate-the-acul-migration">
  ## Valider la migration ACUL
</div>

Pour valider l’expérience de connexion de bout en bout des utilisateurs, vous pouvez utiliser la commande [auth0 acul](https://auth0.github.io/auth0-cli/auth0_acul_dev.html) :

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

Vous devez tester les éléments suivants et vous assurer que :

* Le flux d’authentification utilise votre interface utilisateur personnalisée pour les écrans `login-id` et `login-password`, et que ceux-ci s’affichent correctement.
  * Les messages d’erreur pour mot de passe incorrect et les autres messages d’erreur côté serveur s’affichent clairement.
  * Les utilisateurs sont bien redirigés vers votre application.
  * La validation de l’adresse courriel, si elle est activée, fonctionne comme prévu.

Pour en savoir plus, consultez [les tests d’intégration d’ACUL avec un tenant réel](/docs/fr-ca/customize/login-pages/advanced-customizations/development-workflow#live-tenant-integration-testing).

<div id="deploy-acul-screens-to-production-tenant">
  ## Déployer des écrans ACUL dans le tenant de production
</div>

Le projet d’écrans ACUL comprend une configuration de déploiement que vous pouvez utiliser comme point de départ pour déployer vos écrans en production.

Les étapes de déploiement d’ACUL comprennent :

* La création des bundles de ressources de vos écrans.
  * Leur publication sur votre CDN.
  * L’activation d’ACUL dans votre tenant de production Auth0.

Pour en savoir plus, consultez le [workflow de déploiement ACUL](/docs/fr-ca/customize/login-pages/advanced-customizations/deployment-workflow).

<div id="learn-more">
  ## En savoir plus
</div>

* [Advanced Customizations for Universal Login (ACUL)](/docs/fr-ca/customize/login-pages/advanced-customizations)
* [Documentation de référence pour l’Auth0 ACUL React SDK](docs/libraries/acul/react-sdk)
* [Documentation de référence pour l’Auth0 CLI](https://auth0.github.io/auth0-cli/auth0_acul.html)
* [Exemple d’application ACUL](https://github.com/auth0-samples/auth0-acul-samples)