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 things that 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 just 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 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)
Normally the next step is 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.
3. Backup Codes/Recovery Codes
After verifying your authentication code. Some sites will directly provide user backup codes/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, which gives user a new key.
There are also some references for creating 2FA key from technical perspectives:
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 turn on 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.
So, this is what I’ve figured out when implementing 2FA on our site. If you only find technical parts about 2FA setup process, I hope this one gives you a quick guide about design considerations.
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.
