Help users to Manage a session timeout

Experimental

This is currently experimental because more research is needed.

Use this pattern to warn users that their session is about to end and explain what has happened after the session has timed out.

A timeout warning helps services meet WCAG 2.1 success criterion 2.2.1 ‘Timing Adjustable’. This means a service must warn users before a session timeout occurs and allow them to extend the session.

Open the manage a session timeout example in a new window.

When to use this pattern

If your service has sessions, it will time the user out when they do not do anything for a set amount of time. This is for security reasons.

You should warn a user at least 2 minutes before the end of this time. This will give them time to decide if they want to keep using the service.

How it works

Show the user the timeout warning at least 2 minutes before the time runs out. This should be shown to the user in a modal dialog, also known as a pop-up. The modal dialog is based on the information in the GOV.UK Design System community backlog.

The user can:

  • select a button to stay in the service and not time out
  • press the escape key to close the warning, stay in the service and not time out
  • do nothing

If the user does nothing within the time limit, redirect them to a timeout page. This page explains what has happened and gives them options for how to continue.

When the user is signed in to a service

If a user signs in to your service, tell them they will be signed out if the time runs out. You should tell the user if any information they have entered will be deleted or not. You should include a countdown of the remaining time.

Open the signed in to a service example in a new window.

If the user does not continue the session they are redirected to a page that tells them the time has run out. You should tell the user if any information they have entered has been deleted or not.

You have been signed out

You have been signed out and any information you have not saved has been deleted because you did not do anything for 20 minutes. This is to protect your information.

<h1 id="dialog-title" class="govuk-heading-l">
You have been signed out
</h1>
<div class="govuk-body">
<p>You have been signed out and any information you have not saved has been deleted because you did not do anything for 20 minutes. This is to protect your information.</p>
</div>
<button class="govuk-button dialog-button js-dialog-close" data-module="govuk-button">Sign back in</button> 
  <h1 id="dialog-title" class="govuk-heading-l">
You have been signed out
</h1>
<div class="govuk-body">
<p>You have been signed out and any information you have not saved has been deleted because you did not do anything for 20 minutes. This is to protect your information.</p>
</div>
<button class="govuk-button dialog-button js-dialog-close" data-module="govuk-button">Sign back in</button> 

When the user is not signed in to a service

If a user is not signed in to your service, tell them their answers will be deleted if the time runs out. You should include a countdown of the remaining time.

Open the not signed in to a service example in a new window.

If the user does not continue the session they are redirected to a page that tells them the the time has run out.

Your answers have been deleted

We have deleted your answers because you did not do anything for 20 minutes. This is to protect your information.

You will need to start again.

<h1 id="dialog-title-notsignedin" class="govuk-heading-l">
Your answers have been deleted
</h1>
<div class="govuk-body">
<p>We have deleted your answers because you did not do anything for 20 minutes. This is to protect your information.</p>
<p>You will need to start again.</p>
</div>
<button class="govuk-button dialog-button js-dialog-close" data-module="govuk-button">Start again</button> 
  <h1 id="dialog-title-notsignedin" class="govuk-heading-l">
Your answers have been deleted
</h1>
<div class="govuk-body">
<p>We have deleted your answers because you did not do anything for 20 minutes. This is to protect your information.</p>
<p>You will need to start again.</p>
</div>
<button class="govuk-button dialog-button js-dialog-close" data-module="govuk-button">Start again</button> 

If the user’s device is not running JavaScript

If the user’s device is not running JavaScript, display a banner which warns them about the timeout. The banner should include the content specified above for if a user is signed in or not signed into a service.

Important

We will delete your answers if you do not do anything for 20 minutes and you will have to start again. This is to protect your information.

<div class="govuk-notification-banner govuk-notification-banner--blue" role="region" aria-labelledby="govuk-notification-banner-title" data-module="govuk-notification-banner">
<div class="govuk-notification-banner__header">
<h2 class="govuk-notification-banner__title" id="govuk-notification-banner-title">
    Important
</h2>
</div>
<div class="govuk-notification-banner__content">
<div class="govuk-body">
    <p>We will delete your answers if you do not do anything for <strong>20 minutes</strong> and you will have to start again. This is to protect your information.</p>
</div>
</div>
</div> 
{% from "notification-banner/macro.njk" import govukNotificationBanner %}

{% set html %}
<div class="govuk-body">
<p>We will delete your answers if you do not do anything for <strong>20 minutes</strong> and you will have to start again. This is to protect your information.</p>
</div>

{% endset %}

{{ govukNotificationBanner({
html: html,
classes: "govuk-notification-banner--blue"
}) }} 

Technical details

The service team should work with security teams to agree the length of inactivity before the user is timed out of a session. The modal dialogue example is based on code from the GOV.UK Design System community backlog. We recommend at least 20 minutes. Services should not limit the number of times users can extend their session.

Research on this pattern

More research is needed on the pattern. If you have used the session timeout pattern, get in touch to share your research findings.

You can help to improve this pattern by:

Get in touch

If you’ve got a question, idea or suggestion email the Design System team on dwp-design-system@engineering.digital.dwp.gov.uk