How to Build a Better Two-Factor Authentication Experience
Published
Two-factor authentication (2FA) has become essential for online security, yet many implementations create friction in the user experience. As a Front-End Developer who has worked on various projects, I've seen how important it is to balance security with usability. In this comprehensive guide, we'll explore 9 crucial best practices that balance security with usability, based on real-world examples from leading tech companies.
What is Two-Factor Authentication (2FA)?
Two-factor authentication adds an extra layer of security beyond passwords. It requires users to provide two different types of verification: something they know (password) and something they have (phone or security key). This guide helps you implement 2FA effectively while maintaining a smooth user experience.
What are the Essential Two-Factor Authentication Options?
That is the starting point.
If you care about your users or customers, you should give them the choice to activate the two-factor authentication. On around 800 websites where I have an account, only 5% offer a 2FA option. Some may argue that if you don't have highly sensitive information, it may be overkill to offer the 2FA. But any personal information could be considered sensitive.
If you care about your users and their security, give them the option to enable the 2FA. Period.
How Should You Implement Multiple 2FA Methods?
Google, Facebook, Twitter... they all offer simultaneous ways for 2FA: text message, authentication app and security key. More commonly, at least in a text message and authentication app, the security key seems to be set up only on certain services.
But I've been surprised to see Etsy, even they use toggles on their UI, to force you to only choose one of the options. I'm not even sure if it was originally designed to work like that.
Bit.ly and booking.com in other hand only allow you to use your phone as a 2FA device. So if you lose your phone and your email access, you could be screwed.
Mailchimp and Tumblr, on the contrary, only offer 2FA using an authentication app.
Zapier has an awesome step by step 2FA setup, probably one of the best I found. They offer multiple complementary ways and specifically tell you "in the event you get locked out of your account and have lost both your authentication device and recovery codes". The user understands that providing his phone number is an additional way to ensure he/she can access his account in case he/she lost the other ways to connect to their web app.
What's the Best Way to Handle QR Codes in 2FA?
I have been using 1Password for quite some time now and the modal that scans the QR code doesn't always find the QR code. In that case, I found myself drag and dropping the QR into that modal to be recognized. But it only works when the code is an image.
I would recommend having it as a format image that can be saved / drag and dropped.
Reddit for example don't have the QR code as an image. Fortunately, everyone offers the text version of the QR code that you can use in your authentication application.
How Should You Format and Send Verification Codes?
This one only happened to me once. It happened with Instagram.
When Instagram sends a "verification code" by SMS, they included a space. If you copy-paste that code where it's required, first the input doesn't want the space and the last digit is not included in your paste. It's an annoying issue that could be fixed easily!
Why are Recovery Codes Essential for 2FA?
Sounds weird when said at loud but a lot of websites don't offer backup/recovery codes when you enable the 2FA. This was a surprise for me at first, 2FA means you will always have backup codes in case you lost access to your phone, email or the app you use to generate the random number. Nowadays, some websites don't offer that option. I tend to be really careful with those.
Kickstarter and WPEngine are examples of websites that don't offer you any recovery/backup codes. I hope they could improve that.
Always Give the Option to Download the Recovery Codes
Most of the websites propose to copy the recovery codes. This is not the best option.
It's nice to have it, sure, but it's not enough. I personally store all my recovery codes in multiple places: one is the vault from Dropbox. Having just to drag and paste a simple text file is easy and fast.
If you offer only the option to copy, then you could be forcing the user to:
- open the text editor
- paste the codes
- give a name
- save the file on your device
Technology is there to save user's time.
Slack for example allows you to "Print codes" but not download them. Why not? I have to generate a PDF instead of my simple text file. Not the best user experience.
In the Recovery Code Text File, Always Write Which Platform These Codes Are Coming From
Even Facebook can make mistakes and this one is important for me. Currently, if you download the recovery codes from Facebook, you open the file and you can't find any mention of Facebook or the name of the account. The file name facebook_recovery_codes is helpful but in my opinion, not enough. The name of the account and the name of the platform should be a minimum.
And to make it more useful, adding the date when the codes were generated could also be added.
Google which is a good example, uses your username in the name of the file, and also adds:
SAVE YOUR BACKUP CODES
Keep these backup codes somewhere safe but accessible.
LIST OF CODES
(email@gmail.com)
* You can only use each backup code once.
* Need more? Visit https://g.co/2sv
* These codes were generated on: Date, 2021.
Allow the User to Regenerate Recovery/Backup Codes
It's essential to give the user the ability to regenerate recovery codes. Some don't offer this useful option.
Offer More Than One Code (Maybe?)
This one is less important but I still wanted to mention a key difference in terms of recovery/backup codes.
Most of the companies only offer one code vs a list of multiples codes that can be used. It's hard for me to defend one approach vs the other one. I just know that I feel better when I have more than one code.
About Security Keys
Security keys are the less common way to secure your account. If you are a public figure or someone with a high level of responsibility, having a security key could give you a little bit more peace of mind. But for a normal user, it may be overkill. Nonetheless, I wanted to maximize the security of my accounts and recently bought the Titan Security Key from Google. The USB version works on any computer and I use the Bluetooth version in case I'm on my iPhone or iPad.
They both are not cheap, but security should be part of your "unlimited budget", the same as for food.
Conclusion
I'm not a security expert and have limited knowledge in terms of security. But as a Software Engineer and particularly a user, I believe we have a long way ahead until most of the platforms implement all the tools to ensure secure access for users. If you're interested in how I approach other aspects of development and user experience, check out my article about how Front-End Developers and UI/UX designers can work better together.
Recap:
- Offer two-factor authentication options
- Don't force the users to choose only one 2FA method
- Make the QR code an image
- Keep the code you send by email in the same format as requested in your app or website
- Give the option to have recovery/backup codes
- Always give the option to download the recovery codes
- In the recovery code text file, always write which platform these codes are coming from
- Allow the user to regenerate recovery/backup codes
- Offer more than one code (maybe?)
Thanks for reading, I hope these suggestions would help you to have a better UX and improve your 2FA implementation.
Feel free to ask me anything in the comments below!
You Might Also Like
Check out these other posts: