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

# Auth0 Universal Login

> Universal Login vous permet de prouver l’identité de vos utilisateurs à l’aide de notre serveur d’autorisation.

export const ReleaseStageNotice = ({feature, stage, plans, contact, terms}) => {
  const stageTextMap = {
    "beta": "bêta",
    "ea": "Accès anticipé"
  };
  const stageText = stageTextMap[stage] || "une phase de lancement du produit";
  const prsLink = "/docs/troubleshoot/product-lifecycle/product-release-stages";
  const linkify = (text, url) => {
    return <a href={url} target="_blank" rel="noreferrer" class="link">{text}</a>;
  };
  const includeDetails = (plans, contact, terms) => {
    const hasDetails = terms || plans || contact;
    if (!hasDetails) return null;
    return <span data-as="p">
            {plans && <>Cette fonctionnalité est offerte avec les forfaits {linkify(`${plans}`, "https://auth0.com/pricing")}. </>}
            {contact && "Pour y participer, communiquez avec " + contact + ". "}
            {terms && <>En utilisant cette fonctionnalité, vous acceptez les conditions applicables de l’essai gratuit énoncées dans le {linkify("Master Subscription Agreement", "https://www.okta.com/legal")} d’Okta.</>}
        </span>;
  };
  return <Warning>
            <span data-as="p">
                <strong>La fonctionnalité {feature} est en {linkify(stageText, prsLink)}.</strong>
            </span>

            {includeDetails(plans, contact, terms)}
        </Warning>;
};

export const AuthCodeBlock = ({filename, icon, language, highlight, children}) => {
  const [displayText, setDisplayText] = useState(children);
  const [copyText, setCopyText] = useState(children);
  const wrapperRef = React.useRef(null);
  useEffect(() => {
    let unsubscribe = null;
    function init() {
      if (!window.autorun || !window.rootStore) {
        return;
      }
      unsubscribe = window.autorun(() => {
        let processedChildrenForDisplay = children;
        let processedChildrenForCopy = children;
        for (const [key, value] of window.rootStore.variableStore.values.entries()) {
          const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
          let displayValue = value;
          if (key === "{yourClientSecret}" && value !== "{yourClientSecret}") {
            displayValue = value.substring(0, 3) + "*****MASQUÉ*****";
          }
          processedChildrenForDisplay = processedChildrenForDisplay.replaceAll(new RegExp(escapedKey, "g"), displayValue);
          processedChildrenForCopy = processedChildrenForCopy.replaceAll(new RegExp(escapedKey, "g"), value);
        }
        setDisplayText(processedChildrenForDisplay);
        setCopyText(processedChildrenForCopy);
      });
    }
    if (window.rootStore) {
      init();
    } else {
      window.addEventListener("adu:storeReady", init);
    }
    return () => {
      window.removeEventListener("adu:storeReady", init);
      unsubscribe?.();
    };
  }, [children]);
  useEffect(() => {
    if (!wrapperRef.current) return;
    const originalWriteText = navigator.clipboard.writeText.bind(navigator.clipboard);
    let isOverriding = false;
    const handleClick = e => {
      const button = e.target.closest('[data-testid="copy-code-button"]');
      if (!button || !wrapperRef.current.contains(button)) return;
      isOverriding = true;
      navigator.clipboard.writeText = text => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
          return originalWriteText(copyText);
        }
        return originalWriteText(text);
      };
      setTimeout(() => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
        }
      }, 100);
    };
    const wrapper = wrapperRef.current;
    wrapper.addEventListener('click', handleClick, true);
    return () => {
      wrapper.removeEventListener('click', handleClick, true);
      if (navigator.clipboard.writeText !== originalWriteText) {
        navigator.clipboard.writeText = originalWriteText;
      }
    };
  }, [copyText]);
  return <div ref={wrapperRef}>
      <CodeBlock filename={filename} icon={icon} language={language} lines highlight={highlight}>
        {displayText}
      </CodeBlock>
    </div>;
};

Auth0 <Tooltip tip="Universal Login : votre application redirige vers Universal Login, hébergé sur le serveur d’autorisation d’Auth0, afin de vérifier l’identité d’un utilisateur." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=Universal+Login">Universal Login</Tooltip> offre la fonctionnalité essentielle d’un <Tooltip tip="Universal Login : votre application redirige vers Universal Login, hébergé sur le serveur d’autorisation d’Auth0, afin de vérifier l’identité d’un utilisateur." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=authorization+server">serveur d’autorisation</Tooltip> : le flux de connexion. Lorsqu’un utilisateur doit prouver son identité pour accéder à votre application, vous pouvez le rediriger vers Universal Login et laisser Auth0 prendre en charge le processus d’authentification.

Avec Universal Login, vous n’avez pas à effectuer de travail d’intégration pour prendre en charge différentes méthodes d’authentification. Vous pouvez commencer par un flux d’authentification simple, puis ajouter des fonctionnalités supplémentaires, comme la connexion sans mot de passe, la connexion sociale ou l’<Tooltip tip="Authentification multifacteur (MFA) : processus d’authentification de l’utilisateur qui utilise un facteur en plus du nom d’utilisateur et du mot de passe, comme un code envoyé par SMS." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=multi-factor+authentication">authentification multifacteur</Tooltip> (MFA), afin de créer une expérience de connexion sécurisée et conviviale.

La configuration d’Universal Login est dynamique et ne nécessite aucune modification au niveau de l’application, puisque les pages Web hébergées sur le <Tooltip tip="Serveur d’authentification : serveur qui confirme ou refuse l’identité d’un utilisateur." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=authentication+server">serveur d’authentification</Tooltip> centralisé d’Auth0 pilotent entièrement le flux de connexion. De plus, vous n’avez pas à mettre votre code à jour manuellement pour que les applications profitent des améliorations qu’Auth0 apporte à Universal Login.

Dans le <Tooltip tip="Auth0 Dashboard : le principal produit d’Auth0 pour configurer vos services." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=Auth0+Dashboard">Auth0 Dashboard</Tooltip>, vous pouvez personnaliser l’apparence et le comportement des pages de connexion afin de créer une expérience cohérente et conforme à votre image de marque. Pour les cas d’usage avancés, vous pouvez aussi modifier le code de chaque page individuellement.

Pour en savoir plus sur les différences entre Universal Login et la connexion intégrée, consultez [Centralized Universal Login vs. Embedded Login](/docs/fr-ca/authenticate/login/universal-vs-embedded-login).

<div id="configure-universal-login">
  ## Configurer Universal Login
</div>

Dans votre Auth0 Dashboard, vous pouvez choisir l’expérience à utiliser pour les pages de connexion par défaut sous [Image de marque > Universal Login > Options avancées](https://manage.auth0.com/#/universal-login/customizations-new).

Auth0 offre deux expériences de connexion hébergées :

* **Universal Login** offre une expérience simplifiée aux utilisateurs et ne nécessite pas l’utilisation de JavaScript pour la personnalisation.
* **Classic Login** utilise des contrôles JavaScript pour chaque page du flux de connexion.

À l’heure actuelle, les efforts de développement d’Auth0 sont axés sur Universal Login, et Classic Login ne reçoit plus de mises à jour. À moins que votre cas d’utilisation n’exige l’expérience Classic, nous vous recommandons d’utiliser Universal Login.

Pour en savoir plus sur les différences entre ces deux expériences, consultez [Universal Login vs. Classic Login](/docs/fr-ca/authenticate/login/auth0-universal-login/universal-login-vs-classic-login).

<div id="accessibility">
  ### Accessibilité
</div>

Auth0 applique les normes suivantes pour améliorer l’accessibilité des flux Universal Login pour les personnes qui utilisent des technologies d’assistance :

* [Règles pour l’accessibilité des contenus Web (WCAG), version 2.2 AA](https://www.w3.org/WAI/standards-guidelines/wcag/)
* [EN 301 549](https://www.etsi.org/human-factors-accessibility/en-301-549-v3-the-harmonized-european-standard-for-ict-accessibility)

Auth0 Universal Login prend en charge ces normes par défaut. Voici les aspects qui pourraient avoir une incidence sur les personnalisations des clients :

* Les erreurs de validation s’affichent dans le formulaire plutôt que sous forme d’infobulles afin d’être accessibles aux lecteurs d’écran.
* Les couleurs par défaut des composants de l’interface respectent les directives WCAG en matière de contraste.
* Les formulaires utilisent l’autocorrection.
* Les attributs [ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) et les autres attributs des composants de l’interface facilitent la navigation avec les lecteurs d’écran.
* Les adresses courriel sont validées côté client et suivent les mêmes règles de formatage que la validation côté serveur.
* Les libellés HTML sont accessibles et associés à leurs champs de saisie respectifs.
* Les exigences de complexité des mots de passe et les messages d’erreur affichés dans le formulaire sont annoncés par les lecteurs d’écran.
* Tous les écrans du <Tooltip tip="Flux d’autorisation : mécanisme d’autorisation (ou workflow) défini dans le framework OAuth 2.0." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=authorization+flow">flux d’autorisation</Tooltip> ont un titre de page clair et distinct.
* Les champs obligatoires comportent un indicateur visuel sur leur libellé.

<div id="customize-login-page">
  ### Personnaliser la page de connexion
</div>

Après avoir activé Universal Login, vous pouvez personnaliser votre page de connexion directement depuis le Auth0 Dashboard. Plus précisément, vous pouvez personnaliser les modèles de page et les thèmes, les écrans d’inscription et de connexion, ainsi que d’autres éléments textuels. Pour en savoir plus, consultez Personnaliser Universal Login.

Si vous décidez d’implanter Classic Login, vous pouvez personnaliser les options de base liées à l’image de marque depuis le Auth0 Dashboard. Vous pouvez ensuite configurer des personnalisations avancées à l’aide du SDK utilisé pour créer votre flux de connexion. Pour en savoir plus, consultez [Personnaliser Classic Login](/docs/fr-ca/customize/login-pages/classic-login).

<div id="implement-universal-login">
  ## Mettre en œuvre Universal Login
</div>

Après avoir activé Universal Login ou Classic Login dans votre tenant, suivez les étapes ci-dessous pour mettre en œuvre cette expérience :

1. [Enregistrez votre application](/docs/fr-ca/get-started/auth0-overview/create-applications) auprès d’Auth0.
2. Configurez votre application pour effectuer une requête vers le [point de terminaison Login](https://auth0.com/docs/api/authentication#login) de l’Authentication API afin de déclencher le flux de connexion et de gérer la réponse. Vous pouvez le configurer directement ou utiliser l’un des [SDKs](/docs/fr-ca/libraries) d’Auth0.
3. Créez une connexion [Database](/docs/fr-ca/get-started/applications/set-up-database-connections), [Enterprise](/docs/fr-ca/authenticate/enterprise-connections) ou [Social](/docs/fr-ca/authenticate/identity-providers/social-identity-providers), puis activez-la pour votre application.

<div id="navigate-to-the-login-page">
  ### Accéder à la page de connexion
</div>

Vous pouvez envoyer une requête directement au [point de terminaison Login](https://auth0.com/docs/api/authentication#login) depuis n’importe quel navigateur :

export const codeExample = `https://{yourDomain}/authorize?
  response_type=code|token&
  client_id={yourClientId}&
  connection={connectionName}&
  redirect_uri=https://{yourApp}/callback&
  state={yourState}`;

<AuthCodeBlock children={codeExample} language="bash" filename="cURL" />

La requête doit inclure les valeurs suivantes :

* `response_type` (soit `code`, soit `token`)
* `client_id`
* `redirect_uri`
* `state`

  * Pour mieux comprendre pourquoi cette valeur est requise, consultez [Prévenir les attaques et rediriger les utilisateurs à l’aide des paramètres d’état OAuth 2.0](/docs/fr-ca/secure/attack-protection/state-parameters).

Au besoin, vous pouvez inclure le paramètre `connection` pour demander aux utilisateurs de s’authentifier avec la connexion spécifiée.

<div id="correlation-id">
  ### ID de corrélation
</div>

<ReleaseStageNotice feature="ID de corrélation" stage="ea" terms="true" contact="Auth0 Support ou votre gestionnaire de compte technique" />

Universal Login prend en charge les événements corrélés dans tous les flux d’authentification. Après avoir implémenté Universal Login, votre application génère un ID unique que vous transmettez comme `correlation_id` au point de terminaison `/authorize`. Cet ID unique est conservé pendant les événements d’authentification suivants :

* Inscription
* Connexion
* Inscription à l’authentification multifacteur (MFA) et demandes de vérification
* Réinitialisation du mot de passe

Une fois `correlation_id` transmis, vous pouvez suivre les événements d’authentification dans les [journaux Auth0](/docs/fr-ca/deploy-monitor/logs).

Pour en savoir plus, consultez [ID de corrélation](/docs/fr-ca/authenticate/login/configure-correlation-id).

<div id="use-the-quickstart-guides">
  ### Utilisez les guides Quickstart
</div>

Pour en savoir plus sur la façon de configurer Universal Login pour votre application, consultez les [guides Quickstart](/docs/fr-ca/quickstarts). Choisissez l’approche qui convient le mieux à vos technologies et suivez le Quickstart pour obtenir un guide pas à pas de la mise en œuvre.