Cas d’utilisation : configurer « Rester connecté » à l’aide des sessions

Avant de commencer

Assurez-vous d’avoir :

Un locataire Auth0 avec un domaine personnalisé configuré pour votre application
Auth0 CLI installé et authentifié.
Une Action post-login
Une session Auth0 utilisant la stratégie de sessions non persistantes
(Facultatif) Configurez les valeurs du délai d’inactivité et du délai d’expiration absolu de la session

L’expérience Rester connecté permet aux utilisateurs de choisir de rester connectés sur un appareil de confiance.

Si la case Rester connecté est cochée, une session persistante est créée et persiste même après le redémarrage du navigateur.
Si la case Rester connecté 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) avec Actions, le serveur gère cette logique de façon sécurisée sans exposer de jetons d’actualisation au frontend. À l’aide des invites personnalisées, d’Auth0 CLI et de sessions éphémères via Actions, vous pouvez mettre en œuvre un flux « Rester connecté » sécurisé et moderne, sans jetons d’actualisation, sans contournements de session côté client et avec un contrôle complet du backend. Cette solution est idéale pour les clients qui accordent la priorité à :

Une gestion des sessions de navigateur de type Zero Trust
Une persistance minimale des sessions
Des dérogations pour les appareils de confiance

Pour recueillir la préférence Rester connecté de l’utilisateur, vous devez personnaliser Universal Login en configurant un modèle de page et en ajoutant une invite personnalisée à l’aide d’Auth0 CLI.

Cette étape est requise uniquement si aucun modèle Universal Login n’est configuré pour votre locataire.

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

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 adaptée à votre image de marque. Voici un exemple minimal de modèle avec un arrière-plan et un widget dans un conteneur :

<!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, puis la CLI Auth0 vous demande de confirmer :

Do you want to save the template? Yes

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

2. Ajouter une case à cocher « Rester connecté » avec Auth0 CLI

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

Ouvrez l’éditeur de personnalisation

Ouvrez l’éditeur de personnalisation pour l’invite login-id ou login, selon la configuration de votre locataire :

auth0 universal-login customize -p login-id

Sélectionnez le mode de rendu standard

Rendering Mode: standard

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

http://localhost:52649

Si vous ne savez pas si votre locataire utilise login ou login-id, consultez la documentation d’Auth0 sur la personnalisation de l’invite.

Configurer la case à cocher

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

Définissez Prompt sur : login-id (ou login)
Définissez Screen sur : login-id (ou login)
Définissez Partial sur : form-content-end

Ajoutez l’extrait de code HTML suivant :

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

Déployez vos modifications

Sélectionnez Déployer les modifications dans le coin supérieur droit pour enregistrer et appliquer la personnalisation.

Point de contrôle

Connectez-vous au moyen de Universal Login. L’écran de connexion comprend une case à cocher Rester connecté.

Créez un fichier nommé set-session-persistence.js à utiliser avec l’interface de ligne de commande Auth0, puis ajoutez le code suivant :

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 fait en sorte que le témoin de session soit conservé après le redémarrage du navigateur lorsque l’utilisateur coche la case. Pour prolonger également la durée de vie de la session sur les appareils de confiance, consultez Définir la durée de session pour les appareils de confiance ci-dessous. Utilisez Auth0 CLI pour créer ou mettre à jour votre Action post-login à l’aide du fichier set-session-persistence.js :

auth0 actions create --name kmsi --trigger post-login --code "$(cat set-session-persistence.js)"

Auth0 CLI renvoie l’id de l’Action :

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");
                   }
                 };

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

auth0 actions deploy <id>

Accédez à Auth0 Dashboard > Actions > Triggers > Post-Login pour ajouter la nouvelle Action au flux en cours, puis sélectionnez Apply.

Définir la durée de session pour les appareils de confiance

setCookieMode() contrôle uniquement la façon dont le témoin de session est transmis au navigateur. Un témoin persistant survit aux redémarrages du navigateur, tandis qu’un témoin non persistant (de session) est supprimé à la fermeture du navigateur. Cela ne modifie pas la date d’expiration de la session côté serveur. Si vous voulez que les appareils de confiance aient une durée de session plus longue, vous devez définir explicitement l’expiration à l’aide de api.session.setExpiresAt() ou api.session.setIdleExpiresAt().

Pour accorder aux appareils de confiance une durée de session plus longue, utilisez api.session.setExpiresAt() ou api.session.setIdleExpiresAt() en plus de setCookieMode() :

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");
  }
};

4. Tester l’implémentation

Pour vérifier le comportement de la session, vous pouvez : Connectez-vous avec Universal Login, puis cochez la case Rester connecté.

Dans les journaux du locataire, recherchez les types d’événements s ou ssa
- cookie: { mode: "non-persistent" }
- cookie: { mode: "persistent" }
Recherchez event.session.cookie.mode dans vos Actions

Gérer les utilisateurs

Gérer l’accès

Cas d’utilisation : configurer « Rester connecté » à l’aide des sessions

Avant de commencer

2. Ajouter une case à cocher « Rester connecté » avec Auth0 CLI

Ouvrez l’éditeur de personnalisation

Configurer la case à cocher

Déployez vos modifications

Point de contrôle

Définir la durée de session pour les appareils de confiance

4. Tester l’implémentation

Avant de commencer

​1. Configurer une page Universal Login et ajouter une invite personnalisée

​Facultatif : activer le modèle de page Universal Login

​2. Ajouter une case à cocher « Rester connecté » avec Auth0 CLI

​Ouvrez l’éditeur de personnalisation

​Configurer la case à cocher

​Déployez vos modifications

​Point de contrôle

​3. Créez une Action Post-Login à l’aide de l’interface de ligne de commande Auth0

​Définir la durée de session pour les appareils de confiance

​4. Tester l’implémentation

1. Configurer une page Universal Login et ajouter une invite personnalisée

Facultatif : activer le modèle de page Universal Login

2. Ajouter une case à cocher « Rester connecté » avec Auth0 CLI

Ouvrez l’éditeur de personnalisation

Configurer la case à cocher

Déployez vos modifications

Point de contrôle

3. Créez une Action Post-Login à l’aide de l’interface de ligne de commande Auth0

Définir la durée de session pour les appareils de confiance

4. Tester l’implémentation