How to implement 2FA on your site from a designer’s view

Recently we implement a Two Factor Authentication on our site. Before starting design, I had gone through lots of other sites to see their 2FA. If you haven’t had any experience with 2FA before neither, here I’ll recommend Authy for your initial research. They have collected numerous sites that use 2FA with detailed step-by-step guide with screenshots.

All those Authy guides are great but they are all about how to activate 2FA on the site, which is not enough for a designer to consider all the possible flows of 2FA. After some trials I summarized the places where a designer should think about when implementing 2FA.

  1. Where to activate and deactivate 2FA?
  2. What is 2FA setup process?
  3. Things about authentication code and key.
  4. Things about backup code.
  5. Where to implement 2FA?
  6. Where to prompt 2FA?

1. Where to activate and deactivate 2FA?

This is a pretty simple answer. Normally in the Security part of the Settings, or Profile.

Enable 2FA in Dropbox
Enable 2FA in Google

Simply add a 2FA section with a toggle (or other form) to turn on 2FA. You could add a paragraph of explanation here too like Google.

2. What is 2FA setup process?

You can also find the 2FA setup process in Authy guide. Normally it includes following 3 steps:

1. Account Verification (Text/Voice call/Password/etc.)

The first step to enable 2FA is to verify your identity. If others get your 2FA key and get authentication with their phone, then you’ll never go through 2FA in your account. So it is important to verify the identity before actually starting 2FA setup.

You can either use the account password to verify or use text message sent to your phone or voice call to get the verification code.

2. Get Authentication Code (Text/Third Party Authenticator App)

Next step is normally to provide a key for third party authenticator app to save it its app. A better way is to provide a QR code encrypted the key for the app to scan. The third party authenticator app (you could use Google Authenticator or Authy) will then generate the authentication code.

Authentication Example (BABB)

Some sites also provide SMS text to send authentication code.

Choose your preferable way to receive authentication code (Slack)

3. Backup Codes/Recovery Codes

After verifying your authentication code. Some sites will directly provide user backup codes or some sites call it recovery codes. The backup codes are used when you cannot access to your authentication code or even when you lost your phone.

Backup code from Twitter.

Many sites also provide multiple backup codes at once.

Multiple backup codes from Slack

The codes are stored in the database. Google will detect which code is used and display “Already Used” instead of that code if you enter the backup codes view next time.

3. Things about authentication code and key.

Authentication code is generated from the third party app. To get the code, the app need to have the key which is provided by your server and this requires backend support to provide the key. The database only stores one key so if user wants to change a phone or use another app, they need to get a new key. You can provide a link once the 2FA is setup that gives user a new key.

Get a new key (Google)

There are also some references for creating 2FA key from technical perspective:

4. Things about backup code.

Whenever it requires authentication code, user should have the option to switch to use backup code, and backup code can only be used once. Consequently you should be able to generate new backup codes for users.

You can get codes here (Facebook)

I like how Google provides the code for users. They nicely put a check box in front of each code and dashed line for user to cut.

Google’s backup codes

5. Where to implement 2FA?

Most sites require 2FA when user logs in to protect your money, sensitive data and other important things. So you can simply add an extra step after asking for password. However our site has done it differently.

Having 2FA in login process (GoSquared)

Our platform has industry experts, practitioners, and professionals who shares their views and analysis to a global audience. A typical scenario of our user is the audience who read articles on the platform. They don’t use our Wallet feature often, therefore to go through 2FA in order to see our content would be over complicated for them.

In summary, it’s a UX question that where you would like to implement 2FA.

6. Where to prompt 2FA?

This is a UX consideration where we should notify users to implement 2FA. Especially if there’s sensitive or important data that requires high security protection, it would be great if we proactively notify users to turn on 2FA. Binance will ask you to enable 2FA as part of sign up process and also each time you make transactions if you haven’t done that.

Pop-up message to ask enabling 2FA (Binance)

So, this is what I’ve figured out when implementing 2FA on our site. If you only find the 2FA setup process somewhere else, I hope this one gives you a quick guide about other things to be considered.

If you have implemented 2FA and there’s something i have missed, please also let me know. It’s always great to hear different ideas and comments.

Check Chinese version here