Login to websites with your fingerprint - webauthn a passwordless future

Christopher Simpson

Jul 1, 2022 • 4 min read

Crucially this webstandard has representation from Apple (Jiewen Tan), which is critical for adoption across platforms- WebRTC took a long time for Apple to implement which arguably held back webRTC adoption.

What is webauthn?

Webauthn allows people to use their fingerprint, faceID or Windows 'hello' to authenticate to web applications withut the need for a traditional password. The secret (e.g. your fingerprint or face) is stored on their device* which may be more secure than storing secrets in a database on a server far away- with people increasinly becoming mindful of their privacy and trust waning in high-tech, this may be a viable option for applications wanting to store less sensitive information- less being stored, less to attack.

*Note: Given the authenticator coulr be an external device secrets may not always be stored on the users same device, but an external one- possibly far away however the convenience of built in fingerprint scanner in most devices makes this method appealing for many usecases.

The webauth2 RFC defines it as:

an API enabling the creation and use of strong, attested, scoped, public key-based credentials by web applications, for the purpose of strongly authenticating users. Conceptually, one or more public key credentials, each scoped to a given WebAuthn Relying Party, are created by and bound to authenticators as requested by the web application. The user agent mediates access to authenticators and their public key credentials in order to preserve user privacy.

- W3.org https://www.w3.org/TR/webauthn-2/

Your public key credentials are bound to a spesific authenticator , e.g you fingerprint reader system, thea idea being that your web browser cann't easily reach into your authenticator and take our your fingerprint without your permissions (in reality bugs can exist of course, for that, there's more extream less convenient external authenticators like yubikey, which are physical seperate to your device).

Is Webauthn ready for adoption if it needs a fingerprint scanner or Face id?

Yes? In 2022 most consumers already have a compatible authenticator Fingerprint scanner, Apple Face ID, Windows Hello for example.

As early as 2017, 55 percent of smartphones shipped globally in 2017 had a fingerprint sensor.
> Statista.com

How secure is it?

Rememebr that "secure" is a spectrum never a binary yes or no. It is also a trade off between convienece and security.

Of course a key risk area is where and how secrets are being stored. In the context of Webautn this is the authenticator- the software and/or hardware device securing the representatino of your fingerprint.

If you're building a web application targeting consumers, then it is likley your application will use the "Platform authenticator" type- in the real world this means the fingerprint scanner built into your phone, Apple Face Id, Windows Hello etc). For enterprise this might mean an external device, usb key, Bluetooth device or even NFC! See:

Implementing compliant authenticators is possible in software executing (a) on a general-purpose computing device, (b) on an on-device Secure Execution Environment, Trusted Platform Module (TPM), or a Secure Element (SE), or (c) off device. Authenticators being implemented on device are called platform authenticators. Authenticators being implemented off device (roaming authenticators) can be accessed over a transport such as Universal Serial Bus (USB), Bluetooth Low Energy (BLE), or Near Field Communications (NFC).
- https://www.w3.org/TR/webauthn-2/

What does attested mean?
> provide or serve as clear evidence of.

What does attestation mean?
> https://www.w3.org/TR/webauthn-2/#attestation

What does "at the behest of" mean?
> an authoritative order : COMMAND (dictionary)

What's a "Relying Party" Or "WebAuthn Relying Party"?
> This is your implementation of WebAuthn (e.g. client side Javascript and a server side component). Or portentially someone elses code, a dependency with implements WebAuthn for you.

Credentials can only be accesses per origin (domain)

In human terms: Website users have to give setup authentication for every different website- the attestation is per website. This might be confusing to users if they think "my phone already has by fingerprint, why is this website asking me to setup fingerprint access?" The answer is because it's set-up per website- and that's a good thing.

In technical terms see 'origin'. For example, example.com and www.example.com are not the same origin- they are seen as completely seperate by the web browser.

Equally example.com:80 and example.com:81 are different origins (they have different port numbers).

Critically, "Relying Parties are not able to detect any properties, or event the existance, of credentials scroped to other Relying Parties". Trnaslation: One website isn't allowed to ask if the user has already setup fingerprint authentication for a different web address. Bare in mind, this is only the case for a confirming user agent.

Getting married: Registration and Authentication

For a relying party (e.g. your website), there are "...two distinct, but related, ceremonies involving a user. The first is Registration ... The second is Authentication" (RFC)

Authentication is when:
"...where a public key credential is created on an authenticator, and scoped to a Relying Party with the present user’s account (the account might already exist or might be created at this time)"
Registration is when:
"...where the Relying Party is presented with an Authentication Assertion proving the presence and consent of the user who registered the public key credential."

Show me some WebAuthn code

Functionally, Webauthn exposes the following key Javascript apis to browers which support the navigator.credentials api.

The two key api calls are:

navigator.credentials.create() used during Registration
navigator.credentials.get() used turing Authentication

Mozilla have created a Web authentication concepts and usage guide with sample code examples.

As a developer, how do I debug this?

A development environment for WebAuthn is more interesting since it interfaces with a hardware device (e.g fingerprint scanner). To make this easier, Google Chrome developer tools now have a "WebAuthn" tab to simulate an authenticaror. But of course, it's always best to test on a real device. I've found https://replit.com/ very useful for creating quick WebAuthn demos and tests.

What if I don't trust the web browser- is there a server side component?

You shouldn't good question! Imagine: Google Chrome says the users login is legitemate- what if the user is using a broken verson of Chrome, or an entirely different web browser which simply dosn't do any security checks?