Service timeout
This pattern warns the user before we time them out of a service and tells them what has happened when we do time them out.
When to use
We time the user out when they do not do anything for 15 minutes. Warn them after 13 minutes, which gives them 2 minutes to decide to keep using the service.
How it works
You need HMRC Frontend to use this pattern — find out how to install HMRC Frontend. If you use the HMRC Nunjucks macro, you must copy and paste the entire macro into your code.
Use an accessible dialog box that appears on top of the page. This stops them using the screen with a mouse or keyboard until they select an option or press the escape key.
The user can:
- select a button to stay in the service and not time out
- select a link to sign out or have their answers deleted
- press the escape key to close the warning, stay in the service and not time out
- do nothing
When the user is signed in
The warning should:
- first say ‘For your security, we will sign you out in 2 minutes.’
- countdown the seconds remaining when there is less than 1 minute to go (check an example of this (opens in new tab))
- say what will happen to their answers, if needed
- have a ‘Stay signed in’ button
- have a ‘Sign out’ link that signs them out as normal
<meta name="hmrc-timeout-dialog" content="hmrc-timeout-dialog" data-language="en" data-timeout="70" data-countdown="68" data-keep-alive-url="?continue=true" data-sign-out-url="?lang=English" data-timeout-url="" data-title="" data-message="" data-message-suffix="" data-keep-alive-button-text="" data-sign-out-button-text="" data-synchronise-tabs="" data-hide-sign-out-button="" />
<meta name="hmrc-timeout-dialog" content="hmrc-timeout-dialog" data-language="cy" data-timeout="70" data-countdown="68" data-keep-alive-url="?abc=def" data-sign-out-url="?ghi=jkl" data-timeout-url="" data-title="" data-message="" data-message-suffix="" data-keep-alive-button-text="" data-sign-out-button-text="" data-synchronise-tabs="" data-hide-sign-out-button="" />
{%- from "hmrc/components/timeout-dialog/macro.njk" import hmrcTimeoutDialog -%}
{{ hmrcTimeoutDialog ({
timeout: 70,
countdown: 68,
keepAliveUrl: "?continue=true",
signOutUrl: "?lang=English",
language: "en"
}) }}
{%- from "hmrc/components/timeout-dialog/macro.njk" import hmrcTimeoutDialog -%}
{{ hmrcTimeoutDialog ({
timeout: 70,
countdown: 68,
keepAliveUrl: "?abc=def",
signOutUrl: "?ghi=jkl",
language: "cy"
}) }}
If they do nothing, take them to a ‘We signed you out’ page that uses similar content as the warning box.
<div class="govuk-grid">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-xl">
For your security, we signed you out
</h1>
<div class="govuk-form-group">
<button id="timeout-keep-signin-btn1" class="govuk-button govuk-!-margin-bottom-0">
Sign in
</button>
</div>
</div>
</div>
<div class="govuk-grid">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-xl">
Er eich diogelwch, gwnaethom eich allgofnodi
</h1>
<div class="govuk-form-group">
<button id="timeout-keep-signin-btn2" class="govuk-button govuk-!-margin-bottom-0">
Mewngofnodi
</button>
</div>
</div>
</div>
{%- from "hmrc/components/timeout-dialog/macro.njk" import hmrcTimeoutDialog -%}
<div class="govuk-grid">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-xl">
For your security, we signed you out
</h1>
<div class="govuk-form-group">
<button id="timeout-keep-signin-btn1" class="govuk-button govuk-!-margin-bottom-0">
Sign in
</button>
</div>
</div>
</div>
<div class="govuk-grid">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-xl">
Er eich diogelwch, gwnaethom eich allgofnodi
</h1>
<div class="govuk-form-group">
<button id="timeout-keep-signin-btn2" class="govuk-button govuk-!-margin-bottom-0">
Mewngofnodi
</button>
</div>
</div>
</div>
<div class="govuk-grid">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-xl">
For your security, we signed you out
</h1>
<p class="govuk-body">
We saved your answers.
</p>
<div class="govuk-form-group">
<button id="timeout-keep-signin-btn5" class="govuk-button govuk-!-margin-bottom-0">
Sign in
</button>
</div>
</div>
</div>
<div class="govuk-grid">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-xl">
Er eich diogelwch, gwnaethom eich allgofnodi
</h1>
<p class="govuk-body">
Gwnaethom gadw’ch atebion.
</p>
<div class="govuk-form-group">
<button id="timeout-keep-signin-btn6" class="govuk-button govuk-!-margin-bottom-0">
Mewngofnodi
</button>
</div>
</div>
</div>
<div class="govuk-grid">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-xl">
For your security, we signed you out
</h1>
<p class="govuk-body">
We saved your answers.
</p>
<div class="govuk-form-group">
<button id="timeout-keep-signin-btn5" class="govuk-button govuk-!-margin-bottom-0">
Sign in
</button>
</div>
</div>
</div>
<div class="govuk-grid">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-xl">
Er eich diogelwch, gwnaethom eich allgofnodi
</h1>
<p class="govuk-body">
Gwnaethom gadw’ch atebion.
</p>
<div class="govuk-form-group">
<button id="timeout-keep-signin-btn6" class="govuk-button govuk-!-margin-bottom-0">
Mewngofnodi
</button>
</div>
</div>
</div>
<div class="govuk-grid">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-xl">
For your security, we signed you out
</h1>
<p class="govuk-body">
We did not save your answers.
</p>
<div class="govuk-form-group">
<button id="timeout-keep-signin-btn3" class="govuk-button govuk-!-margin-bottom-0">
Sign in
</button>
</div>
</div>
</div>
<div class="govuk-grid">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-xl">
Er eich diogelwch, gwnaethom eich allgofnodi
</h1>
<p class="govuk-body">
Ni wnaethom gadw’ch atebion.
</p>
<div class="govuk-form-group">
<button id="timeout-keep-signin-btn4" class="govuk-button govuk-!-margin-bottom-0">
Mewngofnodi
</button>
</div>
</div>
</div>
{%- from "hmrc/components/timeout-dialog/macro.njk" import hmrcTimeoutDialog -%}
<div class="govuk-grid">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-xl">
For your security, we signed you out
</h1>
<p class="govuk-body">
We did not save your answers.
</p>
<div class="govuk-form-group">
<button id="timeout-keep-signin-btn3" class="govuk-button govuk-!-margin-bottom-0">
Sign in
</button>
</div>
</div>
</div>
<div class="govuk-grid">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-xl">
Er eich diogelwch, gwnaethom eich allgofnodi
</h1>
<p class="govuk-body">
Ni wnaethom gadw’ch atebion.
</p>
<div class="govuk-form-group">
<button id="timeout-keep-signin-btn4" class="govuk-button govuk-!-margin-bottom-0">
Mewngofnodi
</button>
</div>
</div>
</div>
When the user is not signed in
The warning should:
- first say ‘We will delete your answers in 2 minutes.’
- countdown the seconds remaining when there is less than 1 minute to go (check an example of this (opens in new tab))
- have a button to stay in the service
- have a ‘Delete your answers’ link that takes them to the ‘You deleted your answers’ page
<meta name="hmrc-timeout-dialog" content="hmrc-timeout-dialog" data-language="en" data-timeout="70" data-countdown="68" data-keep-alive-url="?continue=true" data-sign-out-url="?lang=English" data-timeout-url="" data-title="For your security" data-message="We will delete your answers in" data-message-suffix="" data-keep-alive-button-text="Continue checking what help you can get with childcare costs" data-sign-out-button-text="Delete your answers" data-synchronise-tabs="" data-hide-sign-out-button="" />
<meta name="hmrc-timeout-dialog" content="hmrc-timeout-dialog" data-language="cy" data-timeout="70" data-countdown="68" data-keep-alive-url="?continue=true" data-sign-out-url="?lang=Welsh" data-timeout-url="" data-title="" data-message="Er eich diogelwch, byddwn yn eich allgofnodi cyn pen" data-message-suffix="" data-keep-alive-button-text="Parhewch i wirio pa help y gallwch ei gael gyda chostau gofal plant" data-sign-out-button-text="Dileu’ch atebion" data-synchronise-tabs="" data-hide-sign-out-button="" />
{%- from "hmrc/components/timeout-dialog/macro.njk" import hmrcTimeoutDialog -%}
{{ hmrcTimeoutDialog ({
timeout: 70,
countdown: 68,
keepAliveUrl: "?continue=true",
signOutUrl: "?lang=English",
title: "For your security",
message: "We will delete your answers in",
keepAliveButtonText: "Continue checking what help you can get with childcare costs",
signOutButtonText: "Delete your answers",
language: "en"
}) }}
{%- from "hmrc/components/timeout-dialog/macro.njk" import hmrcTimeoutDialog -%}
{{ hmrcTimeoutDialog ({
timeout: 70,
countdown: 68,
keepAliveUrl: "?continue=true",
signOutUrl: "?lang=Welsh",
message: "Er eich diogelwch, byddwn yn eich allgofnodi cyn pen",
keepAliveButtonText: "Parhewch i wirio pa help y gallwch ei gael gyda chostau gofal plant",
signOutButtonText: "Dileu’ch atebion",
language: "cy"
}) }}
<div class="govuk-grid">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-xl">
You deleted your answers
</h1>
<div class="govuk-form-group">
<button id="timeout-keep-signin-btn9" class="govuk-button govuk-!-margin-bottom-0">
Start again
</button>
</div>
</div>
</div>
<div class="govuk-grid">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-xl">
Rydych wedi dileu’ch atebion
</h1>
<div class="govuk-form-group">
<button id="timeout-keep-signin-btn10" class="govuk-button govuk-!-margin-bottom-0">
Dechrau eto
</button>
</div>
</div>
</div>
<div class="govuk-grid">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-xl">
You deleted your answers
</h1>
<div class="govuk-form-group">
<button id="timeout-keep-signin-btn9" class="govuk-button govuk-!-margin-bottom-0">
Start again
</button>
</div>
</div>
</div>
<div class="govuk-grid">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-xl">
Rydych wedi dileu’ch atebion
</h1>
<div class="govuk-form-group">
<button id="timeout-keep-signin-btn10" class="govuk-button govuk-!-margin-bottom-0">
Dechrau eto
</button>
</div>
</div>
</div>
If they do nothing, delete their answers and take them to the ‘For your security, we deleted your answers’ page.
<div class="govuk-grid">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-xl">
For your security, we deleted your answers
</h1>
<div class="govuk-form-group">
<button id="timeout-keep-signin-btn7" class="govuk-button govuk-!-margin-bottom-0">
Start again
</button>
</div>
</div>
</div>
<div class="govuk-grid">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-xl">
Er eich diogelwch, gwnaethom ddileu’ch atebion
</h1>
<div class="govuk-form-group">
<button id="timeout-keep-signin-btn8" class="govuk-button govuk-!-margin-bottom-0">
Dechrau eto
</button>
</div>
</div>
</div>
<div class="govuk-grid">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-xl">
For your security, we deleted your answers
</h1>
<div class="govuk-form-group">
<button id="timeout-keep-signin-btn7" class="govuk-button govuk-!-margin-bottom-0">
Start again
</button>
</div>
</div>
</div>
<div class="govuk-grid">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-xl">
Er eich diogelwch, gwnaethom ddileu’ch atebion
</h1>
<div class="govuk-form-group">
<button id="timeout-keep-signin-btn8" class="govuk-button govuk-!-margin-bottom-0">
Dechrau eto
</button>
</div>
</div>
</div>
Technical details
Add the hmrc-timeout-dialog meta tag, and when including the hmrc-frontend js a new timeout dialog will be initialized on page load automatically.
<meta
name="hmrc-timeout-dialog"
content="hmrc-timeout-dialog"
data-timeout=""
data-countdown=""
data-keep-alive-url=""
data-sign-out-url=""
data-title=""
data-message=""
data-message-suffix=""
data-keep-alive-button-text=""
data-sign-out-button-text=""
data-synchronise-tabs=""
/>- data-timeout is the number of seconds before the user times out and 900 is the platform default
- data-countdown is the number of seconds before the service displays the warning
- data-keep-alive-url is a call to the server that keeps them in the service without refreshing the page
- data-sign-out-url is the same URL as your service’s sign out page
- data-title is the text to use as a title for the dialog
- data-message is the message displayed to the user
- data-message-suffix is any additional text to be displayed after the timer
- data-keep-alive-button-text is the text on the button that keeps the user signed in
- data-sign-out-button-text is the text for the link which takes the user to a sign out page
- data-synchronise-tabs is a boolean that enables synchronising timeout warnings across pages under the same domain via a BrowserBroadcastChannel named "session-activity". It's disabled by default, and when enabled if you open a second page, it will reset the timeout countdown on background tabs so that a background tab can't trigger a timeout warning earlier than needed.
- timeout is the number of seconds before the user times out and 900 is the platform default
- countdown is the number of seconds before the service displays the warning
- keep_alive_url is a call to the server that keeps them in the service without refreshing the page
- logout_url is the same URL as your service’s sign out page
When the warning loads:
- set focus to the box
- read the paragraph of content
- set focus to the button
- read the button label
This lets the user hear what they need to and stay in the service with a single click.
Research
The warning was tested with 5 users for a service they signed in to. One person had dyslexia and another was 70 years old. All 5 users understood the warning and managed to stay signed in.
We want to do more usability testing, especially with users who use assistive technology and with services you do not sign in to.
We want to know if users:
- understand what has happened
- understand the content and if there is anything missing
- can do what they need to do — stay signed in, continue with the service, sign out, start again, or get timed out
The warning has been tested with all recommended browsers. It has been lab tested with most assistive technology including:
- JAWS
- ZoomText
- NVDA
- VoiceOver on MacOS and iOS
It has not been tested with Dragon NaturallySpeaking.
We need more research. If you have used service timeout, get in touch to share your research findings.