> ## Documentation Index
> Fetch the complete documentation index at: https://auth0.generaltranslation.app/llms.txt
> Use this file to discover all available pages before exploring further.

> Apprenez à configurer des sessions éphémères dans Auth0.

# Cas d’utilisation : configurer Keep Me Signed In à l’aide de sessions

<Card title="Avant de commencer">
  Assurez-vous d’avoir :

  * Un tenant Auth0 avec un [Domaine personnalisé](/docs/fr-CA/customize/custom-domains) configuré pour votre application

  * [Auth0 CLI](https://auth0.github.io/auth0-cli/auth0_actions.html) installé et authentifié.

  * Une [Action post-login](/docs/fr-CA/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger)

  * Un tenant Auth0 utilisant la stratégie de sessions [non persistantes](/docs/fr-CA/manage-users/sessions/session-lifecycle)

  * (Facultatif) Configurez les valeurs de temporisation d’inactivité et de temporisation absolue de la session
</Card>

L’expérience **Keep Me Signed In** offre aux utilisateurs l’option de rester connectés sur un appareil de confiance.

<Frame>
  <img src="https://mintcdn.com/generaltranslationinc/md6b8ua1hdYa2pM7/docs/images/cdy7uua7fh8z/sessions-use-case/keep-me-signed-in-login.png?fit=max&auto=format&n=md6b8ua1hdYa2pM7&q=85&s=9102a17f86e402dd2f17ab788e17b579" alt="Image de connexion" width="395" height="724" data-path="docs/images/cdy7uua7fh8z/sessions-use-case/keep-me-signed-in-login.png" />
</Frame>

* Si la case **Keep Me Signed In** est cochée, elle définit une session persistante qui survit aux redémarrages du navigateur.

* Si la case **Keep Me Signed In** n’est pas cochée, elle définit une session non persistante qui expire lorsque le navigateur est fermé.

En utilisant des [sessions non persistantes (éphémères)](/docs/fr-CA/manage-users/sessions/session-lifecycle) avec des [Actions](/docs/fr-CA/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger), le serveur gère cette logique de façon sécurisée sans exposer de jetons d’actualisation au front-end.

En utilisant des Custom Prompts, Auth0 CLI et des sessions éphémères via Actions, vous pouvez implémenter un flux « Keep Me Signed In » moderne et sécurisé, sans jetons d’actualisation, sans solutions de contournement pour les sessions côté client et avec un contrôle complet côté serveur.

Cette solution est idéale pour les clients qui privilégient :

* Une gestion des sessions navigateur conforme au modèle Zero Trust

* Une persistance de session minimale

* Des dérogations pour appareils de confiance

<div id="1-configure-a-universal-login-page-and-add-a-custom-prompt">
  ## 1. Configurer une page Universal Login et ajouter une invite personnalisée
</div>

Pour recueillir la préférence **Rester connecté** de l’utilisateur, vous devez personnaliser [Universal Login](/docs/fr-CA/customize/login-pages/universal-login/customize-signup-and-login-prompts) en configurant un modèle de page et en ajoutant une invite personnalisée à l’aide de la CLI Auth0.

<div id="optional-enable-the-universal-login-page-template">
  ### Facultatif : activer le modèle de page Universal Login
</div>

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Cette étape est requise uniquement si votre tenant n’a pas de modèle de page Universal Login configuré.
</Callout>

Utilisez la commande suivante pour créer ou mettre à jour le modèle de page :

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

L’éditeur de personnalisation ouvre le modèle de page de connexion. Vous pouvez utiliser n’importe quelle structure HTML qui s’adapte à votre marque.

Voici un exemple minimal de modèle avec un arrière-plan et un widget encapsulé :

```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>
```

Enregistrez et fermez l’éditeur; la CLI Auth0 vous demande de confirmer :

```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. Ajouter une case à cocher Rester connecté à l'aide d'Auth0 CLI
</div>

Pour ajouter une case à cocher à l'écran d'Universal Login, suivez ces étapes :

<div id="launch-the-customization-editor">
  ### Ouvrir l’éditeur de personnalisation
</div>

1. Ouvrez l’éditeur de personnalisation pour l’invite `login-id` ou `login`, selon la configuration de votre tenant :

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

2. Sélectionnez **standard** comme mode de rendu

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

L’éditeur de personnalisation s’ouvre à l’adresse locale suivante :

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

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Si vous ne savez pas si votre tenant utilise `login` ou `login-id`, consultez la page Auth0 sur la [personnalisation des invites d’inscription et de connexion](/docs/fr-CA/customize/login-pages/universal-login/customize-signup-and-login-prompts).
</Callout>

<div id="configure-the-checkbox">
  ### Configurer la case à cocher
</div>

Ouvrez l’option **Partials** dans l’éditeur de personnalisation :

1. Définissez **Prompt** sur : `login-id` (ou `login`)

2. Définissez **Screen** sur : `login-id` (ou `login`)

3. Définissez **Partial** sur : `form-footer-end`

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

Ajoutez l’extrait de code HTML suivant :

```html lines theme={null}
<div class="ulp-field">
  <input type="checkbox" name="ulp-remember-me" id="remember-me">
  <label for="remember-me">Rester connecté sur cet appareil?</label>
</div>
```

Cela affiche la case à cocher sous le formulaire de connexion.

<div id="deploy-your-changes">
  ### Déployez vos modifications
</div>

Sélectionnez **Deploy Changes** en haut à droite pour enregistrer et appliquer la personnalisation.

<div id="checkpoint">
  ## Point de contrôle
</div>

Connectez-vous à l’aide de Universal Login.
L’écran de connexion comprend une case à cocher **Rester connecté**.

<Frame>
  <img src="https://mintcdn.com/generaltranslationinc/md6b8ua1hdYa2pM7/docs/images/cdy7uua7fh8z/sessions-use-case/keep-me-signed-in-login.png?fit=max&auto=format&n=md6b8ua1hdYa2pM7&q=85&s=9102a17f86e402dd2f17ab788e17b579" alt="Image de connexion" 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. Créer une Action Post-Login avec Auth0 CLI
</div>

Créez un nouveau fichier appelé `set-session-persistence.js` à utiliser avec Auth0 CLI et ajoutez le code suivant :

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

  // Appliquer la modification uniquement lorsque le paramètre est disponible
  if (event.request.body['ulp-remember-me']) {
    api.session.setCookieMode('persistent');
  } 
};
```

Utilisez Auth0 CLI pour créer ou mettre à jour votre Action de post-connexion à l’aide du fichier `set-session-persistence.js` :

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

Auth0 CLI renvoie l’id de l’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        il y a 0 seconde
CODE           exports.onExecutePostLogin = async (event, api) => {
                   if (event.request.body['ulp-remember-me']) {
                     api.session.setCookieMode("persistent");
                   } else {
                     api.session.setCookieMode("non-persistent");
                   }
                 };
```

Déployez votre Action à l’aide de son `id` :

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

Accédez au [Auth0 Dashboard > Actions > Triggers > Post-Login](https://manage.auth0.com/#/actions/triggers/post-login) pour ajouter la nouvelle Action au flux en cours, puis sélectionnez **Apply**.

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

<div id="optional-set-session-duration-for-trusted-devices">
  ### Facultatif : définir la durée des sessions pour les appareils de confiance
</div>

Vous pouvez utiliser les méthodes `api.session.setExpiresAt()` ou `api.session.setIdleExpiresAt()` pour affiner davantage la durée de vie des sessions.

```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 jours
  } else {
    api.session.setCookieMode("nonpersistent");
  }
};
```

<div id="4-test-implementation">
  ## 4. Tester l’implémentation
</div>

Pour vérifier le comportement de la session, vous pouvez :

Vous connecter à l’aide d’Universal Login et sélectionner la case à cocher **Rester connecté**.

* Dans les journaux du tenant, recherchez (types d’événement `s` ou `ssa`)

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

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

* Recherchez `event.session.cookie.mode` dans vos Actions
