Replace basic authentication with a password page and a cookie.

[frankieroberto]

Description

This replaces the "basic authentication" (a browser popup asking for a username and password) with a redirect to a page asking users to enter a password.

As well as being more user-friendly, this also helps avoid an issue where some corporate networks have turned of basic authentication in the Edge browser.

The code here heavily borrows from the work done by the GOV.UK Prototype Kit team in https://github.com/alphagov/govuk-prototype-kit/pull/1182

Fixes #323

Screenshot

Checklist

• [ ] Tested against our testing policy (Resolution, Browser & Accessibility)
• [ ] CHANGELOG entry

[frankieroberto]

@anandamaryon1 @edwardhorsford @paulrobertlloyd fancy testing this out, including deploying it some hosting environments like Heroku?

[frankieroberto]

Possibly the password environment variable should be PROTOTYPE_PASSWORD not PASSWORD, for backwards-compatibility with the current kit? 🤔

[anandamaryon1]

Looks like this how-to guidance will need to be updated to reflect this work: https://nhsuk-prototype-kit.azurewebsites.net/docs/how-tos/publish-your-prototype-online

[frankieroberto]

@anandamaryon1 yep! And I think we would also have to maintain guidance on how to set the username and password on previous versions (as not everyone will upgrade quickly?)

In which case, I think we could do something like this:

When running the prototype kit online, you must set password to stop anyone accidentally finding your prototype and mistaking it for a real service.

To do this, set an environment variable (called ‘Config vars’ on Heroku):

PROTOTYPE_PASSWORD=yourpassword123

If you are using an older version of the NHS Prototype Kit (before x.x) then you will also need to set a username. This can be the same of your service. For example:

PROTOTYPE_USERNAME=nameofservice

[sarawilcox]

I'll see if I can find some designers who might be able to test this.

[Tosin-Balogun]

@frankieroberto thank you for this. Just to save me a bit of time, are you able to share a heroku or github page preview so I can see how it works?

[frankieroberto]

@Tosin-Balogun @sarawilcox @anandamaryon1 hiya. Sorry, I was on holiday so didn't see this update straight away.

I've deployed a quick demo of the password page here: https://nhsuk-prototype-password-page-b7626ee05c0c.herokuapp.com/ (password testing).

You can also test it locally, by adding these to a .env file:

PASSWORD=testing
NODE_ENV=production

[sarawilcox]

I think the password page is fine. Like @anandamaryon1, I think we should change the page title "Enter password - NHS prototype kit". (Note that we lowercase "prototype kit".)

[sarawilcox]

Can I check about the update to this page, please, @frankieroberto ? https://nhsuk-prototype-kit.azurewebsites.net/docs/how-tos/publish-your-prototype-online

We've got this content currently. Does what you're suggesting apply to Railway as well as Heroku? Do we know what version of the NHS prototype kit will require a user name too?

To set a password, check your hosting services documentation on how to set "environment variables". (It may have a slightly different name like "config vars" or "variables".)

Set environment variables. For example:

PROTOTYPE_USERNAMEnameofservice

PROTOTYPE_PASSWORDyourpassword123

In Railway, you also need to create:

• a variable called NODE-ENV and set the value to production
• a variable called USE_AUTH with the value of true

[frankieroberto]

@sarawilcox @anandamaryon1 I've updated the page title, good catch.

I’ve also changed the password variable to use PROTOTYPE_PASSWORD instead of just PASSWORD, for consistency with how the kit is currently set up.

This also makes the documentation easier - I've updated this to describe how to set PROTOTYPE_PASSWORD, and added a second paragraph to say that you’ll also need to set PROTOTYPE_USERNAME if using an older version.

Let me know what you think!

@Tosin-Balogun, @edwardhorsford, @paulrobertlloyd or others: do you fancy giving this a quick test and review? It's been a few weeks since I worked on this so it could do with another pair of eyes...

[Tosin-Balogun]

@Tosin-Balogun @sarawilcox @anandamaryon1 hiya. Sorry, I was on holiday so didn't see this update straight away.

I've deployed a quick demo of the password page here: https://nhsuk-prototype-password-page-b7626ee05c0c.herokuapp.com/ (password testing).

You can also test it locally, by adding these to a .env file:

PASSWORD=testing
NODE_ENV=production

@frankieroberto This works well and is straight forward, thank you for the upgrade kind sir :)

This change means:

• people might need to be prompted update their kit
• people need to be made aware of the change, perhaps at design huddle, show & tells, external facing slack, blog post
• guidance documentation update both on the website and the prototype kit template docs (@sarawilcox already doing)

[frankieroberto]

@Tosin-Balogun thanks, glad it worked for you! 😌 I borrowed heavily from the GOVUK prototype kit changes, but couldn’t copy and paste it all identically as there were some differences to the set up.

Thoughts on how best to document this change welcome! There already seems to be some guidance on how to do an update: https://nhsuk-prototype-kit.azurewebsites.net/docs/how-tos/updating-the-kit - which is a bit of a lengthy process. Perhaps this could be better signposted somehow though?