Pages

Problem logging in

Tell users what to do when there are problems logging in.

Open this example (Problem logging you in) in a new tab 
<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-two-thirds">
    <h1 class="nhsuk-u-margin-bottom-5">There was a problem logging you in</h1>

<p>Go back and try again.</p>


<button
class="nhsuk-button nhsapp-button--secondary nhsapp-button"
data-module="nhsuk-button"
type="submit"
>
Back to login
</button>
</div>
</div>


{% from 'button/macro.njk' import button %}

<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-two-thirds">

    <h1 class="nhsuk-u-margin-bottom-5">There was a problem logging you in</h1>

    <p>Go back and try again.</p>

    {{ button({
      text: "Back to login",
      classes: "nhsapp-button--secondary nhsapp-button"
    }) }}

  </div>
</div>

When to use

Use this pattern for any general, temporary login errors.

How to use

The page should have:

  • a logged-out header bar
  • ‘There was a problem logging you in – NHS App’ as the page title
  • ‘There was a problem logging you in’ as the H1
  • ‘Go back and try again.’ as a normal paragraph
  • ‘Go back to login’ as a secondary button.

Custom login error pages

If we know there’s a specific problem preventing the user from logging in, customise the page content accordingly.

Open this example (Touch ID) in a new tab 
<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-two-thirds">
    <h1 class="nhsuk-u-margin-bottom-5">Touch ID did not work</h1>

<p>Check you have:</p>


<ul>
<li>added a fingerprint scan on your device</li>
<li>turned on Touch ID in the account area of the NHS App</li>
</ul>


<p>
You can still log in to the NHS App using your email address and password.
</p>


<button
class="nhsuk-button nhsapp-button--secondary nhsapp-button"
data-module="nhsuk-button"
type="submit"
>
Go back to login
</button>
</div>
</div>


{% from 'button/macro.njk' import button %}

<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-two-thirds">

    <h1 class="nhsuk-u-margin-bottom-5">Touch ID did not work</h1>

    <p>Check you have:</p>

    <ul>
      <li>added a fingerprint scan on your device</li>
      <li>turned on Touch ID in the account area of the NHS App</li>
    </ul>

    <p>You can still log in to the NHS App using your email address and password.</p>

    {{ button({
      text: "Go back to login",
      classes: "nhsapp-button--secondary nhsapp-button"
    }) }}

  </div>
</div>

Error codes

For some login errors, you may need to include an error code and tell users how to contact the NHS App team.

Help improve this pattern

If you have used or researched this pattern, please let us know what you found so we can make it better for everyone.

Discuss 'Problem logging in' on GitHub where you can share anything you think might be useful.

You can also share feedback with us on Slack.