AuthSessionExpired - Session expirée

Spécification design de l’écran login-page-expired.ftl Keycloak.

Contexte d’usage

Affiché quand l’usager tente une action après expiration de sa session Keycloak (timeout d’inactivité, jeton invalidé côté serveur, etc.). Pas de formulaire - juste une information et deux options : se reconnecter ou poursuivre avec un nouveau token.

Rendu visuel

Polynésie françaiseDémarches en ligne

Session expirée

Votre session a expiré pour des raisons de sécurité. Veuillez vous reconnecter pour continuer.

Se reconnecter Reprendre où je m’étais arrêté

Code HTML pour `login-page-expired.ftl`

<div class="pf-auth-page">
  <div class="ori-card ori-card--elevated pf-auth-card">
    <div class="ori-card__body pf-auth-body">
      <div class="pf-auth-brand">
        <span class="ori-logo">
          <img src="${url.resourcesPath}/img/logo-pf.svg" alt="" class="ori-logo__crest" />
          <span class="ori-logo__text">
            <span class="ori-logo__title">Polynésie française</span>
            <span class="ori-logo__subtitle">${realm.displayName!''}</span>
          </span>
        </span>
      </div>

      <div class="pf-auth-intro">
        <h1 class="pf-auth-title">${msg("pageExpiredTitle")}</h1>
        <p class="pf-auth-description">${msg("pageExpiredMsg")}</p>
      </div>

      <div class="pf-auth-actions">
        <a href="${url.loginRestartFlowUrl}" class="ori-btn ori-btn--primary ori-btn--block">${msg("doClickHere")}</a>
        <a href="${url.loginAction}" class="ori-btn ori-btn--secondary ori-btn--block">${msg("doContinue")}</a>
      </div>
    </div>
  </div>
</div>

CSS d’accompagnement

.pf-auth-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

Spécification fonctionnelle

Libellés

pageExpiredTitle=Session expirée
pageExpiredMsg=Votre session a expiré pour des raisons de sécurité. Veuillez vous reconnecter pour continuer.
doClickHere=Se reconnecter
doContinue=Reprendre où je m'étais arrêté

Comportement des boutons

Se reconnecter (url.loginRestartFlowUrl) : redémarre le flow d’auth complet. À utiliser dans la majorité des cas - notamment si l’usager a perdu son contexte applicatif.
Reprendre où je m’étais arrêté (url.loginAction) : tente de poursuivre le flow là où il était. Utile si Keycloak a juste besoin d’un nouveau token sans renvoyer l’usager au début.

Le second bouton n’est pas toujours pertinent (selon le flow_id Keycloak). Si l’app n’a jamais besoin de ce cas, le retirer du template et garder uniquement le bouton “Se reconnecter”.

Accessibilité

<a class="ori-btn"> (pas <button>) car ce sont des liens de navigation vers d’autres URL, pas des actions de formulaire
Le titre <h1> permet aux lecteurs d’écran d’annoncer la nature de la page lors de la navigation