> ## 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étails sur les modes d’authentification avec Lock.

# Modes d’authentification de Lock

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) + "*****MASKED*****";
          }
          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>;
};

Lock peut fonctionner dans deux modes différents. Le mode par défaut est le **mode de redirection**. Dans ce mode, votre utilisateur est redirigé pour s’authentifier, puis revient dans l’application. Dans le second mode, le **mode popup**, une fenêtre contextuelle permet à l’utilisateur de s’authentifier auprès du <Tooltip tip="Fournisseur d’identité (IdP) : service qui stocke et gère les identités numériques." cta="Voir le glossaire" href="/fr-CA/docs/glossary?term=identity+provider">fournisseur d’identité</Tooltip> sans quitter l’application.

<div id="redirect-mode">
  ## Mode de redirection
</div>

Lorsque vous cliquez sur le bouton IdP (par exemple Facebook) en mode de redirection, vous êtes brièvement redirigé vers Facebook. Le mode de redirection est le mode par défaut de Lock et il est recommandé dans presque tous les cas d’utilisation. Une fois l’authentification réussie (auprès de Facebook, dans cet exemple), Facebook vous redirige vers votre application (par l’intermédiaire d’Auth0). La plupart des exemples de la documentation de référence utilisent le mode de redirection.

<div id="popup-mode">
  ## Mode popup
</div>

Si, après avoir cliqué sur le bouton IdP (Facebook, par exemple), une fenêtre contextuelle (nouvel onglet ou nouvelle fenêtre) s’ouvre, cela signifie que vous utilisez le mode popup. Dans cette fenêtre contextuelle, vous verrez la page Facebook s’afficher. Une fois la connexion à Facebook réussie, la fenêtre contextuelle se fermera et votre application web reconnaîtra que l’utilisateur a été authentifié. L’application web n’aura **jamais été redirigée vers une autre page**.

L’implémentation de Lock avec le mode popup consiste simplement à modifier l’option `redirect` par rapport à sa valeur par défaut.

export const codeExample = `var lock = new Auth0Lock(
  '{yourClientId}',
  '{yourDomain}',
  {
    auth: {
      redirect: false
    }
  }
);`;

<AuthCodeBlock children={codeExample} language="js" />

<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="/fr-CA/docs/glossary?term=Multi-factor+authentication">Authentification multifacteur</Tooltip> (MFA) n’est pas prise en charge lorsque Lock est en mode popup et intégré à votre application. De plus, le mode popup ne fonctionne pas avec <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="/fr-CA/docs/glossary?term=Universal+Login">Universal Login</Tooltip>.

Certaines fonctionnalités d’Auth0, comme l’[authentification unique (SSO)](/fr-CA/docs/authenticate/single-sign-on) entre plusieurs applications, exigent que les utilisateurs soient redirigés vers Auth0 pour définir un cookie sur `'{yourDomain}'`.

Lorsque vous utilisez le mode popup, une fenêtre popup s’affiche pour définir ce cookie. Si aucune invite n’est requise, cette fenêtre popup sera vide et affichée dans un iframe masqué afin de réduire les perturbations au minimum. Cela s’explique par le fait que les requêtes inter-origine envoyées de votre application vers Auth0 ne peuvent pas définir de cookies.

Si vous ne voulez pas afficher de fenêtre popup et n’avez pas besoin de <Tooltip tip="Authentification unique (SSO) : service qui, après qu’un utilisateur s’est connecté à une application, connecte automatiquement cet utilisateur à d’autres applications." cta="Voir le glossaire" href="/fr-CA/docs/glossary?term=SSO">SSO</Tooltip> entre plusieurs applications, vous pouvez définir `sso: false` lorsque vous utilisez Lock ou auth0.js.

```js lines theme={null}
var options = {
  auth: {
    sso: false
  }
}
```