> ## 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 de la API de Lock v11.

# Referencia de la API 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 tiene muchos métodos, características y opciones configurables. Esta referencia está diseñada para ayudarle a encontrar los que necesita y explicar cómo usarlos. Haga clic a continuación para ir directamente al método que busca, o simplemente navegue. Si busca información sobre los eventos emitidos por Lock, se enumeran en la sección del método [on()](#on-)!

* [new Auth0Lock](#auth0lock) - Instanciar Lock
* [getUserInfo()](#getuserinfo-) - Obtener el perfil de un usuario que ha iniciado sesión
* [show()](#show-) - Mostrar el widget de Lock
* [on()](#on-) - Escuchar eventos
* [resumeAuth()](#resumeauth-) - Se usa para completar el flujo de autenticación cuando `autoParseHash` es false
* [checkSession()](#checksession-) - Obtener un nuevo token de Auth0 para un usuario autenticado
* [logout()](#logout-) - Cerrar la sesión del usuario

<div id="auth0lock">
  ## Auth0Lock
</div>

`new Auth0Lock(clientID, domain, options)`

Inicializa una nueva instancia de `Auth0Lock` configurada con el `clientID` de su aplicación y el `domain` de su cuenta, obtenidos del panel de administración de [Auth0](https://manage.auth0.com/#/). El tercer parámetro, opcional, es un objeto `options` que se utiliza para configurar Lock según las necesidades de su aplicación. Puede encontrar esta información en la [configuración de la aplicación](https://manage.auth0.com/#/applications).

* **clientId `{String}`**: Parámetro obligatorio. El clientId de su aplicación en Auth0.
* **domain `{String}`**: Parámetro obligatorio. Su dominio de Auth0. Normalmente, your-account.auth0.com.
* **options `{Object}`**: Parámetro opcional. Permite configurar la apariencia y el comportamiento de Lock. Consulte la [página de opciones de configuración](/es/docs/libraries/lock/lock-configuration) para obtener más detalles.

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

  var privateStore = {};

  function Auth() {
    // Inicializa Lock, sin opciones personalizadas
    this.lock = new Auth0Lock(
      '<{yourClientId}>',
      '<{yourDomain}>'
    );
  }

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

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

        // Guarda el Token de acceso solo si es necesario
        privateStore.accessToken = accessToken;
        privateStore.profile = profile;

        // Actualiza el DOM
      });
    });
  };
  return Auth;
}());`;

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

<div id="getuserinfo">
  ## getUserInfo()
</div>

`getUserInfo(accessToken, callback)`

Una vez que el usuario haya iniciado sesión y tengas un token, puedes usarlo para obtener el perfil del usuario con `getUserInfo`. Este método sustituye al método `getProfile()`, que está obsoleto.

* **accessToken \{String}**: Token del usuario.
* **callback \{Function}**: Se invocará después de recuperar el perfil del usuario.

```js lines theme={null}
lock.getUserInfo(accessToken, function(error, profile) {
  if (!error) {
    alert("hello " + profile.name);
  }
});
```

<div id="show">
  ## show()
</div>

`show(options)`

El método `show` muestra el widget. A partir de la versión 10.2.0 de Lock, el método `show` puede aceptar un objeto `options` como parámetro. Tenga en cuenta que este parámetro está pensado para usarse como una forma de sobrescribir las `options` de su Lock para esta visualización concreta del widget. Las opciones deben establecerse al instanciar Lock y sobrescribirse solo si es necesario para su caso de uso específico.

Se puede sobrescribir el siguiente subconjunto de `options` con respecto a los valores asignados (o sus valores predeterminados) cuando se instanció Lock:

* allowedConnections
* auth.params
* allowLogin
* allowSignUp
* allowForgotPassword
* initialScreen
* rememberLastLogin

Para obtener más información sobre la lista completa de opciones configurables que pueden elegirse al instanciar Lock, en lugar del subconjunto limitado anterior que puede sobrescribirse en el método `show`, consulte la [página de opciones configurables por el usuario](/es/docs/libraries/lock/lock-configuration).

Ejemplos de sobrescritura de opciones:

```js lines theme={null}
// Mostrar el widget Lock sin sobrescribir ninguna opción
lock.show();

// Mostrar el widget Lock sobrescribiendo algunas opciones
lock.show({
  allowedConnections: ["twitter", "facebook"],
  allowSignUp: false
});
```

Las opciones deben establecerse al crear una instancia de Lock por primera vez: `var lock = new Auth0Lock(clientId, domain, options);`. Las opciones solo deben pasarse a `show` para sobrescribir las opciones configuradas previamente al mostrar el widget en ese momento y contexto concretos.

Hay una opción adicional que se puede establecer en el método `show`, llamada `flashMessage`.

<div id="flashmessage">
  ### flashMessage
</div>

Este objeto solo está disponible como opción para el método `show`, no para usarse en el objeto `options` estándar al instanciar Lock. El objeto `flashMessage` muestra un mensaje flash de error o de éxito cuando se muestra Lock. Tiene los siguientes parámetros:

* **type** \{String}: El tipo de mensaje; debe ser `error` o `success`.
* **text** \{String}: El texto que se mostrará.

```js lines theme={null}
lock.show({
  flashMessage:{
    type: 'success',
    text: 'Amazing Success!!'
  }
});
```

Una aplicación práctica de la opción `flashMessage` es gestionar errores de autorización. `flashMessage` puede contener el texto descriptivo del error.

```js lines theme={null}
lock.on('authorization_error', function(error) {
  lock.show({
    flashMessage: {
      type: 'error',
      text: error.errorDescription
    }
  });
});
```

Por lo tanto, si `tester@example.com` intentara ahora iniciar sesión, al ser un usuario bloqueado, se le volverá a mostrar Lock, con una barra superior en la que se muestra el mensaje de error, en lugar de que simplemente falle el inicio de sesión y Lock se cierre.

<div id="hide">
  ## hide()
</div>

`hide()`

El método `hide` cierra el widget si está abierto en ese momento. El widget se cierra automáticamente en la mayoría de los casos, por lo que este método suele invocarse solo en casos de uso específicos. Por ejemplo, es posible que quiera escuchar el evento `unrecoverable_error` y luego aplicar `hide` a Lock para redirigir al usuario a una página de error personalizada. Otro ejemplo es el de quienes implementan el [modo emergente](/es/docs/libraries/lock/lock-authentication-modes) y podrían necesitar ejecutar `hide` manualmente en el widget después de que se dispare el evento `authenticated`.

Ejemplo de uso para ocultar (cerrar) el widget Lock en modo emergente:

```js lines theme={null}
// Escuchar el evento authenticated y ocultar Lock
lock.on("authenticated", function() {
  lock.hide();

  // Cualquier otra acción que desees realizar en el evento authenticated

});
```

<div id="on">
  ## on()
</div>

Lock emite eventos durante su ciclo de vida. El método `on` puede usarse para escuchar eventos concretos y reaccionar ante ellos.

* `show`: se emite cuando se muestra Lock. No tiene argumentos.
* `hide`: se emite cuando se oculta Lock. No tiene argumentos.
* `unrecoverable_error`: se emite cuando se produce un error irrecuperable; por ejemplo, cuando no hay ninguna conexión disponible. Tiene el error como único argumento.
* `authenticated`: se emite después de una autenticación correcta. Tiene el resultado de la autenticación como único argumento. El resultado de la autenticación contiene el token, que puede usarse para obtener el perfil del usuario o almacenarse para iniciar sesión en comprobaciones posteriores.
* `authorization_error`: se emite cuando falla la autorización. Tiene el error como único argumento.
* `hash_parsed`: cada vez que se inicializa un nuevo objeto Auth0Lock en modo de redirección (el predeterminado), intenta analizar la parte hash de la URL en busca del resultado de un intento de inicio de sesión. Este es un evento de bajo nivel para casos de uso avanzados y, cuando sea posible, deben preferirse `authenticated` y `authorization_error`. Después, este evento se emitirá con `null` si no pudo encontrar nada en el hash. Se emitirá con el mismo argumento que el evento `authenticated` después de un inicio de sesión correcto, o con el mismo argumento que `authorization_error` si algo salió mal. Este evento no se emitirá en [modo emergente](/es/docs/libraries/lock/lock-authentication-modes), porque no es necesario analizar la parte hash de la URL.
* `forgot_password ready`: se emite cuando se muestra la pantalla "Olvidé mi contraseña". (Solo en la versión >`10.18`)
* `forgot_password submit`: se emite cuando el usuario hace clic en el botón de envío de la pantalla "Olvidé mi contraseña". (Solo en la versión >`10.14`)
* `signin ready`: se emite cuando se muestra la pantalla "Iniciar sesión".
* `signup ready`: se emite cuando se muestra la pantalla "Registrarse".
* `signin submit`: se emite cuando el usuario hace clic en el botón de envío de la pantalla "Iniciar sesión". (Solo en la versión >`10.18`)
* `signup submit`: se emite cuando el usuario hace clic en el botón de envío de la pantalla "Registrarse". (Solo en la versión >`10.18`)
* `federated login`: se emite cuando el usuario hace clic en un botón de conexión social. Tiene como argumentos el nombre de la conexión y la estrategia. (Solo en la versión >`10.18`)
* `socialOrPhoneNumber ready`: se emite cuando se muestra la pantalla de <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> con Social + Número de teléfono
* `socialOrPhoneNumber submit`: se emite cuando se envía la pantalla sin contraseña con Social + Número de teléfono
* `socialOrEmail ready`: se emite cuando se muestra la pantalla sin contraseña con Social + Correo electrónico
* `socialOrEmail submit`: se emite cuando se envía la pantalla sin contraseña con Social + Correo electrónico
* `vcode ready`: se emite cuando se muestra la pantalla sin contraseña con la contraseña de un solo uso
* `vcode submit`: se emite cuando se envía la pantalla sin contraseña con la contraseña de un solo uso

El listener del evento `authenticated` tiene un único argumento: un objeto `authResult`. Este objeto contiene las siguientes propiedades: `accessToken`, `idToken`, `state`, `refreshToken` e `idTokenPayload`.

Un ejemplo de uso del evento `authenticated`:

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

  var privateStore = {};

  function Auth() {
    this.lock = new Auth0Lock(
      '<{yourClientId}>',
      '<{yourDomain}>'
    );
  }

  Auth.prototype.getProfile = function() {
    return 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;
        }

        privateStore.profile = profile;

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

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

<div id="resumeauth">
  ## resumeAuth()
</div>

Este método solo se puede usar cuando configuras la opción [auth.autoParseHash](/es/docs/libraries/lock/lock-configuration) en `false`. Debes llamar a `resumeAuth` para completar el flujo de autenticación. Este método resulta útil cuando usas un enrutador del lado del cliente que utiliza `#` para gestionar las URL (angular2 con `useHash` o react-router con `hashHistory`).

* **hash** \{String}: El fragmento hash recibido de la redirección.
* **callback** \{Function}: Se invoca una vez finalizado el análisis. Recibe un error (si lo hay) como primer argumento y el resultado de la autenticación como segundo. Si no hay ningún hash disponible, ambos argumentos serán `null`.

```js lines theme={null}
lock.resumeAuth(hash, function(error, authResult) {
  if (error) {
    alert("Could not parse hash");
  }
  //Este es solo un ejemplo; no debes registrar tokens de acceso en producción.
  console.log(authResult.accessToken);
});
```

<div id="checksession">
  ## checkSession()
</div>

El método `checkSession` le permite obtener un token nuevo de Auth0 para un usuario que ya está autenticado en Auth0 para su dominio. Acepta los siguientes parámetros:

* **options** \{Object}: Opcional. Acepta cualquier parámetro de OAuth2 válido que normalmente se enviaría a `/authorize`. Si los omite, usará los proporcionados al inicializar Auth0.
* **callback** \{Function}: Se invocará con el resultado de la renovación del token. Recibe un error (si lo hay) como primer argumento y el resultado de la autenticación como segundo.

```js lines theme={null}
lock.checkSession({}, function(err, authResult) {
  // manejar el error o los nuevos tokens
});
```

<div id="logout">
  ## logout()
</div>

Cierra la sesión del usuario.

* **options** \{Object}: Es opcional y sigue las mismas reglas que `logout()` de auth0.js.

```js lines theme={null}
lock.logout({
  returnTo: 'https://myapp.com/bye-bye'
});
```