Improve UX to emphasize importance of recovery codes

Problem to solve

Users set up 2FA but don't keep/have recovery codes when needed

User experience goal

User will have the recovery codes when needed.

Proposal

• Make recovery codes the first step in setup.
• Tweak styling of text
  • Title: Recovery Codes
  • Text: First sentence as normal text and the second as a warning banner.
• Give the user options to copy, download or print codes.
• Don't allow users to continue with setup until they've clicked on one of the options.
• In the screen where a code is scanned, recommend cloud-based apps (Authy, Duo Mobile, LastPass authenticator). "We recommend using cloud-based applications such as Authy, Duo Mobile and LastPass authenticator so you can restore access if you lose access to your device".
• At the end of setup, include a message to encourage the user to be sure they upload an ssh key if there isn't one present on the account.

What does success look like, and how can we measure that?

Less 2FA Support tickets.

Current State

This is what you see in https://gitlab.com/profile/account before setup.

When you click enable you see a code to scan and then you enter one of the codes from your app.

After the device is linked you get the recovery codes.

After setup this is what the https://gitlab.com/profile/account looks like.

Clicking in you can regenerate codes.