The problem

Auth0's ultimate goal is to allow users to authenticate using one click or less. Although we're still not there yet, things like Apple's TouchID and FaceID provide us with a glimpse into the future of authentication. WebAuthn is a standard that allows us to take advantage of these emerging biometric capabilities as well as more popular FIDO U2F security keys. With several requests from large customers asking if we have considered the addition of these features, we finally decided it was time to uncover how we could integrate this into our multi-factor experience.

The solution

A simple end-user experience allowing for users to add an additional factor to their login experience using either a FIDO U2F security key or their device's biometric capabilities, such as finger print or facial recognition.

Research

In its current state, completely ditching passwords for biometric authentication would be difficult from a security standpoint. Biometrics are typically tied to a device, so logging in from an unknown device would create some problems. Knowing this, we decided to tackle the addition of WebAuthn as a second factor, meaning users would need to have two of the following:

  1. Something you know
  2. Something you have
  3. Something you are

Something you know is something stored in your memory such as username and password. Something you have is something you carry with you, such as a mobile device (SMS verification) or security key. Lastly, something you are is what makes you you — commonly your face or your finger print. While we already offer the "something you have", we wanted to expand that with security keys, as well as finally offer the "something you are".

We kicked off research by having discussions with customers who expressed interest in implementing WebAuthn into their login experience. Our goals were to understand what features the users needed and what their expectations might be in terms of implementation. While users were intrigued by biometric authentication, they were much more interested in security key support, leading us to consider a more explicit approach where biometric and security key authentication are enabled and listed as separate factors.

At the same time, we conducted a competitive analysis against other products offering security key or biometric support. Due to being a new technology, finding products that supported this proved to be a bit tricky. We looked at these products to find commonalities that we could first match and then find ways to improve. During this process, we discoverd a couple of pain points that would unfortunately have no solution. Browsers/clients must integrate WebAuthn into their application, which at the time meant not all browsers supported this new feature. On top of that, each browser supplied their own experience for accessing the hardware (both biometric or security key), meaning when designing our experience, we needed to ensure that the browser's experience would integrate properly with ours.

Design

Each of the factors in the multi-factor experience we offer follows a similar pattern. Because of this, the WebAuthn experience would not be much different and would be fairly simple from a design standpoint. As mentioned above, the need for integrating into the browser's experience did add a layer of difficulty (and unecessary fluff, to be honest), but luckily each browser's experience was triggered at the same point, meaning solving it for one browser meant solving it for all.

The WebAuthn experience was split into two separate features: WebAuthn with device biometrics and WebAuthn with security keys, each with a similar experience.

Summary

Sadly, I did not get to see this feature successfully ship due to delays caused by lack of development resources and ultimately deprioritization. Over those months, I moved on to working on our new design system, but as of today these features have been successfully shipped with fairly minimal changes.