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

> Un widget que ofrece una experiencia fluida y sin complicaciones de inicio de sesión y registro para tus aplicaciones web.

# Lock para Web

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 es un formulario de inicio de sesión integrable que puede [configurarse según sus necesidades](/es/docs/libraries/lock/lock-configuration). Lock le permite agregar fácilmente <Tooltip tip="Proveedor de identidad (IdP): Servicio que almacena y gestiona identidades digitales." cta="Ver glosario" href="/es/docs/glossary?term=identity+providers">proveedores de identidad</Tooltip> sociales, para que sus usuarios puedan iniciar sesión sin problemas con el proveedor que prefieran.

<Warning>
  El inicio de sesión integrado para aplicaciones web utiliza [autenticación entre orígenes](/es/docs/authenticate/login/cross-origin-authentication) a menos que [configure un dominio personalizado](/es/docs/customize/custom-domains) para su inquilino. La autenticación entre orígenes utiliza cookies de terceros para permitir transacciones de autenticación seguras entre distintos orígenes.
</Warning>

<div id="lock-installation">
  ## Instalación de Lock
</div>

Puede instalar Lock de varias formas. Seleccione cualquiera de las siguientes opciones de instalación que mejor se adapten a su entorno y aplicación.

<div id="installation-sources">
  ### Fuentes de instalación
</div>

Instale con [npm](https://npmjs.org):
`npm install auth0-lock`

Instale con [bower](http://bower.io):

`bower install auth0-lock`

Inclúyalo a través de nuestro CDN (reemplace `.x` y `.y` por los números de la versión minor y patch más recientes del [repositorio de GitHub de Lock](https://github.com/auth0/lock/releases):

Última versión minor:`<script src="https://cdn.auth0.com/js/lock/11.x/lock.min.js"></script>`Última versión patch:
`<script src="https://cdn.auth0.com/js/lock/11.x.y/lock.min.js"></script>`

Se recomienda que las aplicaciones de producción usen una versión patch específica o, como mínimo, una versión minor específica. Independientemente del método que use para incluir Lock, se recomienda fijar la versión y actualizarla solo manualmente, para garantizar que esas actualizaciones no afecten negativamente a su implementación. Consulte el [repositorio de GitHub](https://github.com/auth0/lock/releases) para ver la lista actual de versiones.

<div id="mobile">
  ### Móvil
</div>

Si su aplicación está orientada a usuarios de dispositivos móviles, Auth0 recomienda añadir la siguiente metaetiqueta al `head` de la aplicación:

`<meta name="viewport" content="width=device-width, initial-scale=1"/>`

<div id="bundling-dependencies">
  ### Empaquetar dependencias
</div>

Si usas browserify o webpack para compilar tu proyecto y empaquetar sus dependencias, después de instalar el módulo `auth0-lock`, tendrás que incluirlo en el paquete junto con todas sus dependencias. Hay ejemplos disponibles para [Browserify](https://github.com/auth0/lock/tree/master/examples/bundling/browserify) y [webpack](https://github.com/auth0/lock/tree/master/examples/bundling/webpack).

<div id="cross-origin-authentication">
  ### Autenticación entre orígenes
</div>

<Warning>
  El inicio de sesión integrado para aplicaciones web usa [autenticación entre orígenes](/es/docs/authenticate/login/cross-origin-authentication), a menos que [configure un dominio personalizado](/es/docs/customize/custom-domains) para su inquilino. La autenticación entre orígenes usa cookies de terceros para permitir transacciones de autenticación seguras entre distintos orígenes.
</Warning>

La integración de Lock en su aplicación requiere que la [autenticación entre orígenes](/es/docs/authenticate/login/cross-origin-authentication) esté configurada correctamente. En concreto, debe establecer la propiedad **Allowed Web Origins** en el dominio que realiza la solicitud. Puede encontrar este campo en [Application Settings](https://manage.auth0.com/#/applications/\{yourClientId}/settings).

<div id="usage">
  ## Uso
</div>

<div id="step-1-initializing-lock">
  ### Paso 1. Inicializar Lock
</div>

Primero, deberás inicializar un nuevo objeto `Auth0Lock` y proporcionarle tu <Tooltip tip="ID de cliente: valor de identificación asignado por Auth0 a tu recurso registrado." cta="Ver glosario" href="/es/docs/glossary?term=client+ID">ID de cliente</Tooltip> de Auth0 (el ID de cliente único de cada aplicación de Auth0, que puedes obtener en el [Dashboard de administración](https://manage.auth0.com/#)) y tu dominio de Auth0 (por ejemplo, `yourname.auth0.com`).

export const codeExample1 = `// Inicializamos Auth0Lock
var lock = new Auth0Lock(
  '{yourClientId}',
  '{yourDomain}'
);`;

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

<div id="step-2-authenticating-and-getting-user-info">
  ### Paso 2. Autenticación y obtención de información del usuario
</div>

A continuación, escuche el evento `authenticated` con el método `on`. Cuando se produzca, use el `accessToken` recibido para llamar al método `getUserInfo` y obtener la información del perfil del usuario, según sea necesario.

export const codeExample2 = `var Auth = (function() {

  var wm = new WeakMap();
  var privateStore = {};
  var lock;

  function Auth() {
    this.lock = new Auth0Lock(
      '<{yourClientId}>',
      '<{yourDomain}>'
    );
    wm.set(privateStore, {
      appName: "example"
    });
  }

  Auth.prototype.getProfile = function() {
    return wm.get(privateStore).profile;
  };

  Auth.prototype.authn = function() {
    // Escucha el evento authenticated
    this.lock.on("authenticated", function(authResult) {
      // Usa el token de authResult para llamar a getUserInfo() y guárdalo si es necesario
      this.getUserInfo(authResult.accessToken, function(error, profile) {
        if (error) {
          // Manejar el error
          return;
        }

        //recomendamos no almacenar tokens de acceso a menos que sea absolutamente necesario
        wm.set(privateStore, {
          accessToken: authResult.accessToken
        });

        wm.set(privateStore, {
          profile: profile
        });

      });
    });
  };
  return Auth;
}());`;

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

Luego, puede manipular el contenido de la página y mostrar información del perfil al usuario (por ejemplo, mostrar su nombre en un mensaje de bienvenida).

`<h2>Bienvenido <span id="nick" class="nickname"></span></h2>`

Tenga en cuenta que, si almacena el perfil del usuario, le convendrá aplicar `JSON.stringify` al objeto de perfil y, cuando vuelva a utilizarlo más adelante, `JSON.parse`, ya que deberá almacenarse en `localStorage` como una cadena en lugar de como un objeto JSON.

<div id="step-3-showing-lock">
  ### Paso 3. Mostrar Lock
</div>

Aquí muestras el widget Lock después de que el usuario haga clic en un botón de inicio de sesión; también puedes mostrar Lock automáticamente al llegar a una página con solo usar `lock.show();` al cargarla.

Esto mostrará el widget Lock y, junto con lo anterior, ya estás listo para gestionar los inicios de sesión.

```js lines theme={null}
document.getElementById('btn-login').addEventListener('click', function() {
  lock.show();
});
```

<div id="passwordless">
  ## Sin contraseña
</div>

El modo <Tooltip tip="Sin contraseña: forma de autenticación que no depende de una contraseña como primer factor." cta="Ver glosario" href="/es/docs/glossary?term=Passwordless">sin contraseña</Tooltip> de Lock solo está disponible en Lock v11.2.0 y versiones posteriores. Usa la [última versión de Lock](https://github.com/auth0/lock/releases) para esta funcionalidad.

Puedes usar el modo sin contraseña de Lock para permitir que los usuarios se autentiquen usando solo una dirección de correo electrónico o un número de teléfono móvil. Recibirán el code y luego volverán para introducirlo, o harán clic en el enlace, y podrán autenticarse sin necesidad de recordar una contraseña.

En Lock, para implementar el modo sin contraseña, debes inicializar Lock de una forma ligeramente distinta, con `Auth0LockPasswordless` en lugar de `Auth0Lock`:

export const codeExample3 = `var lockPasswordless = new Auth0LockPasswordless(
 '{yourClientId}',
 '{yourDomain}'
);`;

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

<div id="passwordless-options">
  ### Opciones de inicio de sesión sin contraseña
</div>

Además, el modo sin contraseña de Lock tiene un par de opciones de configuración exclusivas.

Para indicar qué tipo de conexión desea usar, inicialice Lock con la opción `allowedConnections` y establezca `email` o `sms` como valor:

```js lines theme={null}
var passwordlessOptions = {
  allowedConnections: ['sms']
}
```

Recuerde habilitar la conexión sin contraseña que prefiera en el [Dashboard](https://manage.auth0.com/#), en **Connections -> sin contraseña**, y luego habilitarla para su aplicación; de ese modo, cuando Lock intente usarla, ya estará configurada y vinculada a la aplicación.

Si decide usar `email`, tiene una opción adicional para elegir: si desea que sus usuarios reciban un `code` para introducir o un "enlace mágico" para usar. Esto se configura mediante la opción `passwordlessMethod`, que acepta los valores `code` o `link`.

```js lines theme={null}
var passwordlessOptions = {
  allowedConnections: ['email'],
  passwordlessMethod: 'code'
}
```

<div id="passwordless-example">
  ### Ejemplo de autenticación sin contraseña
</div>

export const codeExample4 = `var passwordlessOptions = {
  allowedConnections: ['email'],
  passwordlessMethod: 'code',
  auth: {
    redirectUrl: 'http://localhost:3000/callback',   
    responseType: 'token id_token',
    params: {
      scope: 'openid email'               
    }          
  }
}

var lockPasswordless = new Auth0LockPasswordless(
 '{yourClientId}',
 '{yourDomain}',
 passwordlessOptions
);`;

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

<div id="single-sign-on-with-embedded-authentication">
  ### Inicio de sesión único con autenticación embebida
</div>

Las aplicaciones con inicio de sesión integrado deben cumplir dos criterios para poder usar <Tooltip tip="Single Sign-On (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=Single+Sign-on">inicio de sesión único</Tooltip> (SSO).

1. Ambas aplicaciones que intentan usar SSO deben ser aplicaciones de primera parte. El SSO con aplicaciones de terceros no funcionará.
2. Deben usar dominios personalizados, y tanto las aplicaciones que quieran usar SSO como el inquilino de Auth0 deben estar en el mismo dominio. Tradicionalmente, los dominios de Auth0 tienen el formato `foo.auth0.com`, pero los dominios personalizados le permiten usar el mismo dominio para cada una de las aplicaciones en cuestión, así como para su inquilino de Auth0, lo que evita el riesgo de ataques CSRF.

Nuestra recomendación es usar <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> en lugar de configurar SSO en escenarios de inicio de sesión integrado. Universal Login es la forma más fiable y estable de realizar SSO, y es la única manera de hacerlo si debe usar varios dominios para sus aplicaciones o usar [aplicaciones de terceros](/es/docs/get-started/applications/third-party-applications/configure-third-party-applications).

<div id="error-codes-and-descriptions">
  ## Códigos de error y descripciones
</div>

Cuando Lock se usa para el inicio de sesión integrado, emplea el endpoint `/co/authenticate`, que puede devolver los siguientes errores.

La descripción del error es legible para humanos. **No debe ser procesada por código alguno** y puede cambiar en cualquier momento.

| **Estado** | **Código**                    | **Descripción**                                                                                                                                                                                      |
| ---------- | ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 400        | invalid\_request              | Cuerpo de la solicitud no válido. Se requieren todos y solo client\_id, credential\_type, username, otp y realm.                                                                                     |
| 401        | unauthorized\_client          | No se permite el inicio de sesión entre orígenes.                                                                                                                                                    |
| 400        | unsupported\_credential\_type | Parámetro de tipo de credencial desconocido.                                                                                                                                                         |
| 400        | invalid\_request              | Realm desconocido: non-existent-connection.                                                                                                                                                          |
| 403        | access\_denied                | Correo electrónico o contraseña incorrectos.                                                                                                                                                         |
| 403        | access\_denied                | Error de autenticación                                                                                                                                                                               |
| 403        | blocked\_user                 | Usuario bloqueado                                                                                                                                                                                    |
| 401        | password\_leaked              | Este intento de inicio de sesión se ha bloqueado porque la contraseña que estás usando ya se había visto comprometida en una filtración de datos (no en esta aplicación).                            |
| 429        | too\_many\_attempts           | Tu cuenta se ha bloqueado tras varios intentos consecutivos de inicio de sesión. Te hemos enviado una notificación a través de tu método de contacto preferido con instrucciones para desbloquearla. |
| 429        | too\_many\_attempts           | Hemos detectado un comportamiento de inicio de sesión sospechoso y se bloquearán más intentos. Ponte en contacto con el administrador.                                                               |

<div id="browser-compatibility">
  ## Compatibilidad de navegadores
</div>

La compatibilidad con **Chrome**, **Safari**, **Firefox** e **IE >= 10** está garantizada. Actualmente, Auth0 utiliza [zuul](https://github.com/defunctzombie/zuul) junto con [Saucelabs](https://saucelabs.com) para ejecutar pruebas de integración con cada envío.

<div id="learn-more">
  ## Más información
</div>

* [Referencia de la API de Lock](/es/docs/libraries/lock/lock-api-reference)
* [Opciones de configuración de Lock](/es/docs/libraries/lock/lock-configuration)