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

> Découvrez comment configurer Keep Me Signed avec des sessions Auth0 afin d’offrir aux utilisateurs des sessions persistantes ou éphémères.

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

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

  * Un [Custom Domain](/docs/fr-ca/customize/custom-domains) configuré pour votre application dans votre tenant Auth0

  * [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)

  * Une session de tenant Auth0 utilisant la politique de sessions [non persistantes](/docs/fr-ca/manage-users/sessions/session-lifecycle)

  * (Facultatif) Configurer les valeurs de délai d’inactivité et de délai d’expiration absolu de la session
</Card>

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

<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="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, une session persistante est créée et reste active même après la fermeture et la réouverture du navigateur.

* Si la case **Keep Me Signed In** n’est pas cochée, une session non persistante est créée et expire à la fermeture du navigateur.

En utilisant des [sessions non persistantes (éphémères)](/docs/fr-ca/manage-users/sessions/session-lifecycle) avec [Actions](/docs/fr-ca/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger), le serveur gère cette logique de façon sécuritaire sans exposer de jetons de rafraîchissement au frontend.

En utilisant des invites personnalisées, Auth0 CLI et des sessions éphémères via Actions, vous pouvez mettre en œuvre un flux « Keep Me Signed In » moderne et sécuritaire, sans jetons de rafraîchissement, sans contournements de session côté client et avec un contrôle complet du backend.

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

* Une gestion des sessions de navigateur de type zéro confiance

* Une persistance minimale des sessions

* Des exceptions pour les 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 **Keep Me Signed In** 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 d’Auth0 CLI.

<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 n’est requise que si aucun modèle Universal Login n’est configuré dans votre tenant.
</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 la page de connexion. Vous pouvez utiliser n’importe quelle structure HTML qui convient à votre image de marque.

Voici un exemple minimal de modèle avec un arrière-plan et un widget intégré dans un conteneur :

```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; l’Auth0 CLI vous demandera 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 Keep Me Signed In à l’aide d’Auth0 CLI
</div>

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

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

1. Ouvrez l’éditeur de personnalisation pour `login-id` ou l’écran de connexion, 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 [personnalisation des écrans d’invite d’Auth0](/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. Réglez **Prompt** sur : `login-id` (ou `login`)

2. Réglez **Screen** sur : `login-id` (ou `login`)

3. Réglez **Partial** sur : `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 Auth0 CLI" 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">
  ## Checkpoint
</div>

Connectez-vous avec Universal Login.
L’écran de connexion comporte une case à cocher **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="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 nommé `set-session-persistence.js` pour l’utiliser avec Auth0 CLI, puis ajoutez le code suivant :

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

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

Cette Action permet d’enregistrer le cookie de session même après le redémarrage du navigateur lorsque l’utilisateur coche la case. Pour prolonger également la durée de vie de la session pour les appareils de confiance, consultez [Définir la durée de la session pour les appareils de confiance](#set-session-duration-for-trusted-devices) ci-dessous.

Utilisez Auth0 CLI pour créer ou mettre à jour votre Action post-login à 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   il y a 0 seconde
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 à [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 **Appliquer**.

<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">
  ### Définir la durée de la session pour les appareils de confiance
</div>

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  [`setCookieMode()`](/docs/fr-ca/customize/actions/explore-triggers/signup-and-login-triggers/login-trigger/post-login-api-object#api-session-setcookiemode-mode) contrôle uniquement la façon dont le cookie de session est transmis au navigateur. Un cookie persistant reste en place après le redémarrage du navigateur, tandis qu’un cookie non persistant (de session) est supprimé à la fermeture du navigateur. Cela ne modifie pas l’expiration de la session côté serveur. Si vous voulez que les appareils de confiance aient une session plus longue, vous devez définir explicitement l’expiration à l’aide de `api.session.setExpiresAt()` ou de `api.session.setIdleExpiresAt()`.
</Callout>

Pour accorder une session plus longue aux appareils de confiance, utilisez `api.session.setExpiresAt()` ou `api.session.setIdleExpiresAt()` avec `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 jours
  } else {
    api.session.setCookieMode("nonpersistent");
  }
};
```

<div id="4-test-implementation">
  ## 4. Tester la mise en œuvre
</div>

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

Connectez-vous au moyen de Universal Login et cochez la case **Keep Me Signed** In.

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

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

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

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