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

> Detalles sobre los modos de autenticación de Lock.

# Modos de autenticación 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) + "*****ENMASCARADO*****";
          }
          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 puede funcionar en dos modos diferentes. El modo predeterminado es el **modo de redirección**. En este modo, el **usuario** es redirigido para autenticarse y luego vuelve a la aplicación. En el segundo modo, el **modo emergente**, una ventana emergente permite al usuario autenticarse con el <Tooltip tip="Proveedor de identidad (IdP): Servicio que almacena y administra identidades digitales." cta="Ver glosario" href="/es/docs/glossary?term=identity+provider">proveedor de identidad</Tooltip> sin salir de la aplicación.

<div id="redirect-mode">
  ## Modo de redirección
</div>

Cuando haces clic en el botón del IdP (por ejemplo, Facebook) en el modo de redirección, se te redirige momentáneamente a Facebook. El modo de redirección es el predeterminado en Lock y se recomienda para casi todos los casos de uso. Una vez que inicies sesión correctamente (en Facebook, en este ejemplo), Facebook te redirigirá de vuelta a tu aplicación (a través de Auth0). La mayoría de los ejemplos de la documentación de referencia utilizan el modo de redirección.

<div id="popup-mode">
  ## Modo emergente
</div>

Si, después de hacer clic en el botón del IdP (por ejemplo, Facebook), se abre una ventana emergente (una pestaña o ventana nueva), significa que está usando el modo emergente. En esa ventana emergente, verá que se muestra la página de Facebook. Una vez que inicie sesión correctamente en Facebook, la ventana emergente se cerrará y su aplicación web reconocerá que el usuario se ha autenticado. La aplicación web **nunca se redirige a ninguna otra página**.

Implementar Lock con el modo emergente vuelve a ser un cambio sencillo en la opción `redirect` con respecto a su valor predeterminado.

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

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

<Tooltip tip="Autenticación multifactor (MFA): proceso de autenticación de usuarios que utiliza un factor adicional además del nombre de usuario y la contraseña, como un code por SMS." cta="Ver glosario" href="/es/docs/glossary?term=Multi-factor+authentication">Autenticación multifactor</Tooltip> (MFA) no se admite cuando Lock está en modo emergente e integrado en su aplicación. Además, el modo emergente no funciona con <Tooltip tip="Universal Login: su aplicación redirige a Universal Login, alojado en el Servidor de autorización de Auth0, para verificar la identidad de un usuario." cta="Ver glosario" href="/es/docs/glossary?term=Universal+Login">Universal Login</Tooltip>.

Algunas funcionalidades de Auth0, como el [inicio de sesión único (SSO)](/es/docs/authenticate/single-sign-on) entre varias aplicaciones, dependen de que los usuarios sean redirigidos a Auth0 para establecer una cookie en `'{yourDomain}'`.

Al usar el modo emergente, se mostrará una ventana emergente para establecer esta cookie. Si no hace falta mostrar ninguna pantalla, esta ventana emergente estará en blanco y se cargará en un iframe oculto para minimizar las interrupciones. Esto se debe a que las solicitudes de origen cruzado enviadas desde su aplicación a Auth0 no pueden establecer cookies.

Si no desea mostrar una ventana emergente y no necesita <Tooltip tip="Inicio de sesión único (SSO): servicio que, después de que un usuario inicia sesión en una aplicación, inicia automáticamente la sesión de ese usuario en otras aplicaciones." cta="Ver glosario" href="/es/docs/glossary?term=SSO">SSO</Tooltip> entre varias aplicaciones, puede establecer `sso: false` al usar Lock o auth0.js.

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