2FA User Interfaces (authentication workflow)

[nlhkabu]

Proposed UI for 2FA login workflow (swap purple for PyPI blue... and voila!):

Notes:

1. two tabs will only be shown if user has chosen to setup both methods. The 'default' method (i.e. default tab) will be defined by the user in the admin
2. 'Get help' links will link through to appropriate help section (see 2FA/multifactor auth: policy on requiring recovery codes #5586)

@woodruffw - I decided that it would be better to separate the recovery codes from the key authentication (e.g. not use the same form, as we had discussed), because they are not equal in effectiveness. A recovery code can only be used once, and is bypassing the 2FA process - for this reason, we want to discourage their use to only 'emergency' situations. My concern with using the same form as the key input, is that users will believe these methods are equal in value.

---

Screenshot Required: This issue will require an update to the visual design of the site. To help our team give you faster feedback, include a screenshot in your Pull Request.

[nlhkabu]

@woodruffw if this proposal looks good to you, I will update #5567 to include the appropriate changes.

[woodruffw]

@nlhkabu This looks great to me! I really like the design.

I decided that it would be better to separate the recovery codes from the key authentication (e.g. not use the same form, as we had discussed), because they are not equal in effectiveness. A recovery code can only be used once, and is bypassing the 2FA process - for this reason, we want to discourage their use to only 'emergency' situations. My concern with using the same form as the key input, is that users will believe these methods are equal in value.

👍

Feel free to update #5567 whenever you're ready!

[woodruffw]

JFYI: I'm going to push some more unit tests today, so you'll probably need to rebase before adding the templates.

[brainwane]

@woodruffw mentioned today in IRC:

here are the two major UI/X items: the authentication flow (/account/two-factor) needs a tabbed view, one tab for each 2FA method. i think nlh already has a good mockup of what that'll look like. the second item is turning the current rudimentary WebAuth provisioning flow (/manage/account/webauthn-provision) into something more consistent with the TOTP provisioning flow + adding help text

@nlhkabu is there anything you need for the latter?

[nlhkabu]

@brainwane - nothing needed on my side. Just need the go-ahead from @woodruffw. @woodruffw are you ok for me to pull down #5795 and update templates?

[woodruffw]

@nlhkabu Yep!

[brainwane]

@nlhkabu how's this going?