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 to get some basic understanding of it. 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 consider when implementing 2FA.

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

1. Where to activate and deactivate 2FA?

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

Simply add a 2FA section with a toggle (or other form) to turn on 2FA. You could also add a paragraph of explanation here as 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 be able to go through 2FA in your account (actually, you may even not be able to log in). So it is important to verify the identity before actually starting 2FA setup.

You can either use the account password to verify or have SMS 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 activate it on 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.

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 recovery codes. The backup codes are used when you cannot access to your authentication code or even when you lost your phone.

Many sites also provide multiple backup codes at once.

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.

There are also some references for creating 2FA key from technical perspective:
Enabling Two-Factor Authentication For Your Web Application — Bozho’s tech blog

Simontabor/2fa

双因素认证（2FA）教程 — 阮一峰的网络日志

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.

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.

5. Where to implement 2FA?

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

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.

Original posted at Medium