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

> Aprenda a configurar sesiones efímeras en Auth0.

# Casos de uso: configurar Keep Me Signed In con sesiones

<Card title="Antes de comenzar">
  Asegúrese de tener:

  * Un inquilino de Auth0 con un [dominio personalizado](/es/docs/customize/custom-domains) configurado para su aplicación

  * [Auth0 CLI](https://auth0.github.io/auth0-cli/auth0_actions.html) instalado y autenticado.

  * Una [Action de post-login](/es/docs/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger)

  * Una sesión del inquilino de Auth0 con la política de sesiones [no persistentes](/es/docs/manage-users/sessions/session-lifecycle)

  * (Opcional) Configure los tiempos de espera por inactividad y absoluto de la sesión
</Card>

La experiencia **Keep Me Signed In** ofrece a los usuarios la opción de permanecer conectados en un dispositivo de confianza.

<Frame>
  <img src="https://mintcdn.com/translations/xwVvTWJUElMm5YAK/docs/images/cdy7uua7fh8z/sessions-use-case/keep-me-signed-in-login.png?fit=max&auto=format&n=xwVvTWJUElMm5YAK&q=85&s=3d01d2b77165323484a4b85ac295a24f" alt="Imagen de inicio de sesión" width="395" height="724" data-path="docs/images/cdy7uua7fh8z/sessions-use-case/keep-me-signed-in-login.png" />
</Frame>

* Si la casilla **Keep Me Signed In** está seleccionada, se establece una sesión persistente que se mantiene aunque se reinicie el navegador.

* Si la casilla **Keep Me Signed In** no está seleccionada, se establece una sesión no persistente que caduca cuando se cierra el navegador.

Con [sesiones no persistentes (efímeras)](/es/docs/manage-users/sessions/session-lifecycle) y [Actions](/es/docs/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger), el servidor gestiona esta lógica de forma segura sin exponer tokens de actualización al frontend.

Con Custom Prompts, Auth0 CLI y sesiones efímeras mediante Actions, puede implementar un flujo de "Keep Me Signed In" moderno y seguro, sin tokens de actualización, sin soluciones alternativas de sesión del lado del cliente y con control total desde el backend.

Esta solución es ideal para clientes que priorizan:

* Gestión de sesiones del navegador con enfoque de confianza cero

* Persistencia mínima de la sesión

* Excepciones para dispositivos de confianza

<div id="1-configure-a-universal-login-page-and-add-a-custom-prompt">
  ## 1. Configure una página de Universal Login y añada una pantalla personalizada
</div>

Para recopilar la preferencia **Keep Me Signed In** del usuario, debe personalizar [Universal Login](/es/docs/customize/login-pages/universal-login/customize-signup-and-login-prompts) configurando una plantilla de página y agregando una pantalla personalizada mediante Auth0 CLI.

<div id="optional-enable-the-universal-login-page-template">
  ### Opcional: habilite la plantilla de página de Universal Login
</div>

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Este paso solo es necesario si su inquilino no tiene configurada una plantilla de Universal Login.
</Callout>

Use el siguiente comando para crear o actualizar la plantilla de la página:

```bash lines theme={null}
auth0 universal-login templates update
```

El editor de personalización abre la plantilla de la página de inicio de sesión. Puede usar cualquier estructura HTML que se adapte a su marca.

Aquí tiene una plantilla de ejemplo mínima con un fondo y un widget integrado:

```html lines theme={null}
<!DOCTYPE html>
<html lang="{{locale}}">
  <head>
    {%- auth0:head -%}
    <style>
      body {
        background-image: url("https://images.unsplash.com/photo-1643916861364-02e63ce3e52f");
        background-size: cover;
        background-position: center;
      }
      .prompt-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
      }
    </style>
    <title>{{ prompt.screen.texts.pageTitle }}</title>
  </head>
  <body class="_widget-auto-layout">
    {% if prompt.name == "login" or prompt.name == "signup" %}
      <div class="prompt-wrapper">
        {%- auth0:widget -%}
      </div>
    {% else %}
      {%- auth0:widget -%}
    {% endif %}
  </body>
</html>
```

Guarde y cierre el editor; la CLI de Auth0 le pedirá que confirme:

```bash lines theme={null}
Do you want to save the template? Yes

▸ Successfully updated the template for the New Universal Login Experience!
```

<div id="2-add-a-keep-me-signed-in-checkbox-using-auth0-cli">
  ## 2. Agrega una casilla «Keep Me Signed In» con Auth0 CLI
</div>

Para agregar una casilla de verificación a la pantalla de Universal Login, sigue estos pasos:

<div id="launch-the-customization-editor">
  ### Abra el editor de personalización
</div>

1. Abra el editor de personalización para la pantalla `login-id` o `login`, según la configuración de su inquilino:

```bash lines theme={null}
auth0 universal-login customize -p login-id
```

2. Selecciona **standard** como modo de renderizado

```bash lines theme={null}
Rendering Mode: standard
```

El editor de personalización se abre en una dirección local:

```bash lines theme={null}
http://localhost:52649
```

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Si no sabe con certeza si su inquilino usa `login` o `login-id`, consulte la [personalización de pantallas](/es/docs/customize/login-pages/universal-login/customize-signup-and-login-prompts) de Auth0.
</Callout>

<div id="configure-the-checkbox">
  ### Configura la casilla de verificación
</div>

Abre la opción **Partials** en el editor de personalización:

1. Establece **Prompt** en: `login-id` (o `login`)

2. Establece **Screen** en: `login-id` (o `login`)

3. Establece **Partial** en: `form-content-end`

<Frame>
  <img src="https://mintcdn.com/translations/xwVvTWJUElMm5YAK/docs/images/cdy7uua7fh8z/sessions-use-case/partials.png?fit=max&auto=format&n=xwVvTWJUElMm5YAK&q=85&s=c8e9f0450643ce9e75a8c2954d0eb01e" alt="Partials de Auth0 CLI" width="1404" height="683" data-path="docs/images/cdy7uua7fh8z/sessions-use-case/partials.png" />
</Frame>

Agrega el siguiente fragmento de HTML:

```html lines theme={null}
<div class="ulp-field">
  <input type="checkbox" name="ulp-remember-me" id="remember-me">
  <label for="remember-me">Stay signed in on this device?</label>
</div>
```

Esto muestra la casilla de verificación debajo del formulario de inicio de sesión.

<div id="deploy-your-changes">
  ### Implementa los cambios
</div>

Selecciona **Deploy Changes** en la esquina superior derecha para guardar y aplicar la personalización.

<div id="checkpoint">
  ## Punto de control
</div>

Inicia sesión con Universal Login.
La pantalla de inicio de sesión incluye una casilla **Keep Me Signed In**.

<Frame>
  <img src="https://mintcdn.com/translations/xwVvTWJUElMm5YAK/docs/images/cdy7uua7fh8z/sessions-use-case/keep-me-signed-in-login.png?fit=max&auto=format&n=xwVvTWJUElMm5YAK&q=85&s=3d01d2b77165323484a4b85ac295a24f" alt="Imagen de inicio de sesión" width="395" height="724" data-path="docs/images/cdy7uua7fh8z/sessions-use-case/keep-me-signed-in-login.png" />
</Frame>

<div id="3-create-a-post-login-action-using-auth0-cli">
  ## 3. Crear una Action de post-login con Auth0 CLI
</div>

Cree un archivo llamado `set-session-persistence.js` para usarlo con Auth0 CLI y agregue el siguiente código:

```javascript lines theme={null}
exports.onExecutePostLogin = async (event, api) => {

  // Aplicar el cambio solo cuando el parámetro esté disponible
  if (event.request.body['ulp-remember-me']) {
    api.session.setCookieMode('persistent');
  }
};
```

Esta Action hace que la cookie de sesión se mantenga entre reinicios del navegador cuando el usuario marca la casilla. Para ampliar también la duración de la sesión en dispositivos de confianza, consulte [Establecer la duración de la sesión para dispositivos de confianza](#set-session-duration-for-trusted-devices) más abajo.

Use Auth0 CLI para crear o actualizar su Action de post-login con el archivo `set-session-persistence.js`:

```bash lines theme={null}
auth0 actions create --name kmsi --trigger post-login --code "$(cat set-session-persistence.js)"
```

La CLI de Auth0 devuelve el id de la Action:

```bash lines theme={null}
ID             f54c4aae-431f-4290-a7e0-cfc6a3f28386
NAME           kmsi
TYPE           post-login
STATUS         pending
DEPLOYED       ✗
LAST DEPLOYED
LAST UPDATED   0 seconds ago
CREATED        0 seconds ago
CODE           exports.onExecutePostLogin = async (event, api) => {
                   if (event.request.body['ulp-remember-me']) {
                     api.session.setCookieMode("persistent");
                   } else {
                     api.session.setCookieMode("non-persistent");
                   }
                 };
```

Implementa tu Action usando su `id`:

```bash lines theme={null}
auth0 actions deploy <id>
```

Navegue hasta [Auth0 Dashboard > Actions > Triggers > Post-Login](https://manage.auth0.com/#/actions/triggers/post-login) para añadir la nueva Action al flujo actual y seleccione **Apply**.

<Frame>
  <img src="https://mintcdn.com/translations/xwVvTWJUElMm5YAK/docs/images/cdy7uua7fh8z/sessions-use-case/post-login.png?fit=max&auto=format&n=xwVvTWJUElMm5YAK&q=85&s=0e66804969ae440d05200ade1b45c56a" alt="Dashboard Actions Triggers Post Login" width="2808" height="1452" data-path="docs/images/cdy7uua7fh8z/sessions-use-case/post-login.png" />
</Frame>

<div id="set-session-duration-for-trusted-devices">
  ### Establezca la duración de la sesión para dispositivos de confianza
</div>

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  [`setCookieMode()`](/es/docs/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger/post-login-api-object#api-session-setcookiemode-mode) solo controla cómo se envía la cookie de sesión al navegador. Una cookie persistente se mantiene incluso si se reinicia el navegador, mientras que una cookie no persistente (de sesión) se elimina al cerrar el navegador. No cambia el tiempo de expiración de la sesión en el backend. Si quiere que los dispositivos de confianza tengan una sesión de mayor duración, debe establecer explícitamente la expiración con `api.session.setExpiresAt()` o `api.session.setIdleExpiresAt()`.
</Callout>

Para que los dispositivos de confianza tengan una sesión de mayor duración, use `api.session.setExpiresAt()` o `api.session.setIdleExpiresAt()` junto con `setCookieMode()`:

```javascript lines theme={null}
exports.onExecutePostLogin = async (event, api) => {
  if (event.request.body['ulp-remember-me']) {
    api.session.setCookieMode("persistent");

    const now = Date.now();
    api.session.setExpiresAt(now + 7 * 24 * 60 * 60 * 1000); // 7 días
  } else {
    api.session.setCookieMode("nonpersistent");
  }
};
```

<div id="4-test-implementation">
  ## 4. Pruebe la implementación
</div>

Para verificar el comportamiento de la sesión, puede:

Inicie sesión con Universal Login y seleccione la casilla **Keep Me Signed In**.

* En los registros del inquilino, busque (tipos de evento `s` o `ssa`)

  * `cookie: { mode: "non-persistent" }`

  * `cookie: { mode: "persistent" }`

* Busque `event.session.cookie.mode` en sus Actions
