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

# Modes d’authentification Lock

> Détails sur les modes d’authentification 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 selon deux modes différents. Le mode par défaut est le **mode de redirection**. Dans ce mode, votre utilisateur est redirigé pour être authentifié, puis il est renvoyé vers l’application. Dans le second mode, le **mode contextuel**, une fenêtre contextuelle permet à l’utilisateur de s’authentifier auprès du fournisseur d’identité sans quitter l’application.

## Mode de redirection

Lorsque vous cliquez sur le bouton <Tooltip href="/docs/fr-ca/glossary?term=idp" tip="Fournisseur d’identité (IdP)
Service de stockage et de gestion des identités numériques." cta="Voir le glossaire">IdP</Tooltip> (par exemple, Facebook) en mode redirection, vous êtes momentanément redirigé vers Facebook. Le mode de redirection est le mode par défaut avec Lock, et c’est le mode recommandé pour presque tous les cas d’utilisation. Une fois que vous vous êtes connecté avec succès (à Facebook, dans cet exemple), Facebook vous redirigera vers votre application (via Auth0). La majorité des exemples de la documentation de référence utilisent le mode de redirection.

## Mode contextuel

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 contextuel. Dans cette fenêtre, vous verrez que la page Facebook est affichée. Une fois que vous aurez réussi à vous connecter à Facebook, la fenêtre contextuelle sera fermée et votre application Web reconnaîtra que l’utilisateur a été authentifié. L’application Web n’a **jamais été redirigée vers une autre page**.

La mise en œuvre de Lock avec le mode contextuel est à nouveau une simple modification de l’option de `redirect` par rapport à sa valeur par défaut.

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

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

L’authentification multifacteur (<Tooltip href="/docs/fr-ca/glossary?term=multifactor-authentication" 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, tel qu’un code par SMS." cta="Voir le glossaire">MFA</Tooltip>) n’est pas prise en charge lorsque Lock est en mode contextuel et intégré à votre application. En outre, le mode contextuel ne fonctionne pas avec la connexion universelle.

Certaines fonctionnalités d’Auth0, telles que l’[authentification unique (SSO)](/docs/fr-ca/authenticate/single-sign-on) entre plusieurs applications, dépendent du fait que les utilisateurs soient redirigés vers Auth0 pour définir un témoin sur `'{yourDomain}'`.

Lorsque vous utilisez le mode contextuel, une fenêtre contextuelle s’affiche afin de définir ce témoin. Si les invites ne sont pas nécessaires, cette fenêtre contextuelle sera vide et se trouvera dans un iframe dissimulé pour minimiser les perturbations. La raison en est que les demandes interorigines envoyées par votre application à Auth0 ne sont pas en mesure de définir des témoins.

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

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