reads (since 2024-04-22)

The many faces of WebAuthn

WebAuthn is a technology that allows using secure public-key authentication for a second factor, in web browsers.

It supports storing these credentials in a few places. On Windows, the Windows Hello API is used to store data securely on the operating system, or on a hardware key.

On macOS, relevant APIs are used, including Touch ID, and on Linux, each implementation can do as it chooses - usually supporting FIDO2 keys and PC Smart Cards.

Mobile devices often tend to include a built-in FIDO2 key, and while your phone will likely let you use a hardware key anyway, like a Yubikey, you may be offered to just authenticate with your fingerprint on iOS and Android.

As such, there are very differing user experiences of how using WebAuthn looks and feels on different browsers and operating systems.

I aim to include a view of all of these, just because I think it’s interesting.

I will first test registering and authenticating on webauthn.io, as this shows the full signing up and signing in experience.

Second, I will show me authenticating with Bitwarden to show a real world test case, and to show what signing in without a PIN looks like.

Windows 10 / Firefox

Under Windows, Firefox uses Windows Hello, so you get a very Windows looking prompt asking you to sign in. It supports (and requires if it can) setting a PIN, and while I cannot test it on my pc, should support fingerprints etc.

First up, registering!

Windows asks for my Yubikey’s PIN, then to touch my key.

A dialog asking me to "Set up my security key to sign in to webauthn.io as testing", with OK and cancel buttons.

A dialog with a large heading "You'll need to create a PIN for this security key", a text box and a confirm box, and OK and cancel buttons.

A dialog containing an icon of a usb drive and the text "Touch your security key."

Now, signing in:

A dialog asking me to enter my security key PIN, with a text entry box and OK and cancel buttons

A dialog asking me to touch my security key, with a cancel button.

Finally, this is all I got on Bitwarden:

Windows 10 / Edge

I chose to test Edge as it is Chromium based and comes with Windows.

The UI I was given was basically the same as Chromium under Linux, and interestingly on registering, it presented me with a QR code to scan (my iPhone did not recognise this code as useful):

A popup prompting me to create a passkey on another device,
telling me i can scan this QR code on the device where I want to make the passkey, and a large QR code. There's a button to try another way, and a cancel button.

But after clicking back to see a page almost identical to the first image from Linux Chromium (see below), but with more Microsoft styling, and choosing to use a hardware key, I was dropped straight back into Windows Hello, so I didn’t bother with any more testing.

A dialog titled 'security key setup' with just OK and Cancel buttons.

Linux / Chromium

Chromium has full WebAuthn support built in, including multiple devices and authenticator PINs.

First - registering:

A popup asking how I want to create a passkey, with an option for a usb security key, or a different device.

A popup titled "use your security key with webauthn.io" telling me to insert my security key and touch it.
It has a try another way button, and a cancel button.

A popup titled "PIN required" with a text entry box, and cancel and next buttons.

A popup asking me to "touch my security key again" with a cancel button.

And signing in:

A popup titled "PIN required" with just a text box, cancel, and ok buttons.

A popup asking me to "touch my security key again" with a cancel button.

Finally, Bitwarden:

A popup asking me which device has the passkey for vault.bitwarden.com,
with options for a USB security key or a different device.

A popup asking me to insert my security key and touch it, with a cancel button.

Linux / Firefox

Now, Firefox on Linux and macOS has to use its own implementation of WebAuthn, and it’s not really as complete as some other implementations.

This includes no support for PINs, a more basic UI, and no support for Apple Touch ID.

Here’s what registering looks like:

A popup under the Firefox URL bar
telling me that webauthn.io wants to register an account with a security key, and that I can connect one now, or cancel.
The popup is under an icon of a fingerprint.

And logging in is the same on webauthn.io and Bitwarden due to lack of PIN:

Another popup under the URL bar telling me that webauthn.io wants to authenticate with a registered security key.

I personally quite like this UI - it follows the browser theme, it’s unobtrusive, and, almost uniquely, requires no extra interaction to use, just touch your key and go!

If your security key requires a PIN though, you will hit issues.

macOS Ventura / Safari

Time to fire up my macOS virtual machine!:

A screenshot of two macOS error popups.
One tells me I shut down my computer because of a problem, and asks if I want to open the applications that were open before then.
The other tells me my computer restarted because of a problem, with ignore and report buttons.

So I had issues testing Safari, as it has severe rendering bugs (website elements or even entire sites just go white) in my macOS virtual machine, so I couldn’t test webauthn.io.

I did manage to sign in to Bitwarden blind though! (Well, I didn’t sign in because I didn’t pass my key through, but I got the UI up.)

A popup titled sign in with a cancel button. It has a large icon of a key and asks me to choose how to sign in to vault.bitwarden.com.
The options are an iPhone, iPad, or Android device, or a Security Key.

A popup with a large icon of a USB drive, telling me to "insert and activate my security key".

macOS Ventura / Firefox

On macOS, perhaps unsurprisingly, it uses the same UI as on Linux, its own implementation.

I hear that Firefox 113.0 beta improves FIDO2 USB support on Linux and macOS (source), so perhaps maybe soon?

A dialog of a popup under the firefox URL bar, visibly on macOS,
informing me that webauthn.io wants to register an account with one of my security keys.

A dialog of a popup under the firefox URL bar, visibly on macOS,
informing me that webauthn.io wants to authenticate with a registered security key.

macOS Ventura / Chromium

Interestingly, Chromium also used its own UI under macOS - seems they only share UIs on Windows.

It did, however, prompt to use a passkey (I’ve never interacted with passkeys before this!), and offered to turn on Bluetooth before anything else, which was new.

A popover under a username text box, prompting me to "use a passkey on a different device"

A popup with a bluetooth icon with a line through it, asking if i want to turn on bluetooth, to be able to use it on a different device.

A popup prompting me to create a passkey, with options to use a phone or tablet, or a security key.

A prompt to insert my security key and touch it.

iOS (14)

On iOS, you get a consistent prompt - hold your NFC key near the top of your phone or activate your lightning key, enter a PIN if necessary, and you’re done!

Registering:

A popover with a blurred glassy background, asking if I want to allow webauthn.io to start using a security key to sign in.
It tells me in grayed out text to insert and activate it or to bring it near the top of my iPhone. There's a cancel button in the top right

A similar popover asking if I want to allow them to start using a security key, prompting me to enter a PIN, with a big continue button.

Signing in:

A popover asking if I want to sign into webauthn.io using a security key, asking me to insert it or bring it near my iPhone.

A similar popover, prompting me to enter a PIN, with a big continue button.

And Bitwarden: Yet another similar popover, asking if I want to allow vault.bitwarden.com to sign in with a security key.

Conclusion

idk there you go that’s all of them

This is a really lazy blog post but hopefully it’s fine.

Hope to cya back here soon
— Yellowsink