An introduction to WebAuthn

Passwords are a hassle. They’re hard to remember, easy to hack, and seem to be the root of most online security issues. The industry has been looking for an alternative for some time now. Enter WebAuthn—an innovative, passwordless authentication method that’s changing the game.

Instead of relying on something you know, like a password, WebAuthn uses things you have (like your phone or a security key) or things you are (like your fingerprint) to prove your identity. It's a quicker, safer way to log in, and it's becoming the go-to solution for securing online accounts.

In this article, we will discuss WebAuthn: what it is, how it works, and what challenges it’s facing.

What is WebAuthn?

WebAuthn (short for Web Authentication) is a web standard for secure authentication that allows users to authenticate to websites and services without the need for a password. It was created in 2016 by the W3C (World Wide Web Consortium) and the FIDO Alliance (an association with members like Google, Microsoft, and PayPal). Unlike previous solutions, WebAuthn was designed not only to be secure but to be integrated directly into the web itself. It allowed users to authenticate with biometrics—like fingerprints or facial recognition—or with external devices like a security key.

By 2018, major browsers like Chrome, Firefox, Safari, and Edge jumped on board, supporting this new form of passwordless authentication. As the 2020s rolled in, WebAuthn began to gain serious traction. Big names like Google, Microsoft, and GitHub began integrating it into their platforms, offering users the ability to log in without ever having to type a password again. The tech world started to see it as the future of online authentication. WebAuthn offered a way to combat the growing risks of data breaches and phishing attacks.

WebAuthn is particularly useful for enterprises looking to improve security by offering passwordless login options to their employees. With organizations increasingly moving toward Zero Trust architectures, WebAuthn plays a critical role in providing secure, multifactor authentication.

How does WebAuthn work?

WebAuthn works by creating a public key cryptographic system between the user’s device and the web service they are interacting with. The process consists of two major phases: registration and authentication.

1. Registration: During the registration process, a user provides a device or authenticator (such as a fingerprint sensor, hardware security key, or smartphone app) to the website or application they are setting up. The device generates a public-private key pair for the user. The public key is sent to the website's server, while the private key remains securely stored on the user’s device. This way, the server only has access to the public key, and the private key is never exposed.‍
2. Authentication: When the user later attempts to log in to the site or app, the service sends a challenge (a piece of data) to the user's device. The device then signs the challenge with the private key. Since only the device has access to the private key, the service can verify the signature using the stored public key and authenticate the user without ever needing a password.

What’s good about WebAuthn?

WebAuthn offers a number of significant advantages over traditional password-based authentication methods:

• Enhanced security: Since WebAuthn relies on public-key cryptography, it’s inherently more secure than password-based systems. The private key is never transmitted, so even if an attacker intercepts communications, they won’t be able to obtain any credentials that could be used to gain access. Additionally, WebAuthn mitigates phishing risks because the authentication process is bound to the specific website or service, making it much harder for attackers to trick users into revealing their credentials.
• Passwordless authentication: One of the standout features of WebAuthn is that it enables passwordless authentication. This means users no longer have to remember, manage, or worry about password-related security breaches. Instead, they can use biometric authentication (like a fingerprint or facial recognition) or a physical security key (such as a USB key) to log in.
• Resistance to credential stuffing and brute force attacks: With traditional passwords, attackers can attempt to gain unauthorized access through brute-force or credential stuffing attacks, where stolen usernames and passwords are used to attempt logins. WebAuthn eliminates this threat since authentication is based on the unique private key stored on the user’s device, not a static password.
• Improved user experience: WebAuthn improves the user experience by making authentication quicker and more convenient. Users can authenticate with a simple touch or scan, rather than typing long, complex passwords. This is especially beneficial for mobile devices and apps.
• Widespread support: WebAuthn is supported by all major browsers (like Chrome, Firefox, Safari, and Edge) and platforms, making it widely available for developers to implement in their applications. This broad support helps facilitate the adoption of secure, passwordless login methods across the web.

What’s problematic about WebAuthn?

Like any technology, WebAuthn is not without its challenges. While it offers a lot of benefits, there are still some problems that can make it tricky to fully adopt, both for users and developers.

• Compatibility and device support: While most modern browsers and operating systems support WebAuthn, not all do—especially older ones. For example, if you're trying to use WebAuthn on an older laptop or mobile phone, you might run into issues. Additionally, not all devices have built-in biometric readers like fingerprints or face recognition, so users are limited to using external devices like security keys. This can be a barrier to widespread adoption, especially for people who don’t have these devices handy.
• User experience: It’s interesting that UX is featured both on the pros and the cons lists. For WebAuthn to work, you need to register your authentication method—whether that’s a fingerprint, facial recognition, or a physical security key. While this might sound simple, the initial setup can be confusing or cumbersome for some users, especially those not familiar with biometric authentication or external devices. Some people may struggle with the process or find it inconvenient, which could lead to them abandoning WebAuthn altogether in favor of traditional passwords. In addition to that, many times, apps ask you if you want to use a passkey to log in, only to say yes, scan your fingerprint, and then get a message that there is no passkey. The technology is good, but the adoption has not yet been widespread, so the experience can be disheartening. In short, when the technology works, the UX is great; however, not working is not uncommon and can drive users away.
• Security key availability: Physical security keys, like those from Yubico (YubiKey), are a popular choice for WebAuthn authentication. However, not everyone has access to them. While some services may offer these keys as part of their security setup, the keys themselves aren’t free, and many users may not want to spend extra money just to be able to log in securely. This reliance on external hardware means WebAuthn isn’t as accessible for everyone, especially when compared to password-based systems, which require nothing more than an email address and a password.
• Backup and recovery: What happens if you lose your phone or security key, or if your fingerprint scanner malfunctions? WebAuthn is based on the idea that you have a unique and secure way to authenticate, but it doesn’t always provide an easy backup or recovery process. Losing access to your authentication method could lock you out of your account, and while some services offer recovery options (like using a backup email or another security key), they can still be a hassle to navigate. Users often find themselves in a tough spot if they forget to set up backup authentication methods when they first register.
• Privacy concerns: Some people are wary about using biometric data—like fingerprints or facial recognition—because of the risks associated with storing and transmitting this sensitive information. Although WebAuthn itself doesn’t store biometric data directly, and instead relies on secure local devices (like your phone), there are still concerns about what happens if someone hacks into these systems or uses them for unauthorized purposes.
• Adoption and standardization: Even though WebAuthn has gained momentum, not all websites and apps have adopted it yet. Many sites still rely heavily on traditional passwords and 2FA methods like SMS codes. The adoption of WebAuthn requires a significant shift from developers, who need to integrate it into their systems and educate users about its benefits. As a result, there’s still a lot of fragmentation in the security landscape.
• Complexity for developers: Implementing WebAuthn can be complex. Unlike traditional password-based authentication, WebAuthn requires understanding new protocols, managing hardware security keys, and ensuring that biometric data is securely stored and transmitted. For smaller companies or those with limited resources, the technical complexity and the cost of integrating WebAuthn can be a significant barrier.

How to implement WebAuthn

Let’s go through a high-level overview of how to implement WebAuthn in your app.

The backend

First, you must choose a WebAuthn server library that will help you manage the process of generating authentication requests and validating responses. Some common libraries include:

• JavaScript: WebAuthn.js or FIDO2-lib
• Python: FIDO2
• Ruby: webauthn-ruby
• Java: webauthn-server

Then, you need to implement the user registration flow.

When a user decides to register with WebAuthn, your server will need to:

1. Generate a challenge (a random string) for the user's authentication request.
2. Create a public key credential creation options object, which includes information such as the challenge, supported algorithms, and other parameters.
3. Send this information to the frontend to be used by the user’s authenticator.

On the client side, after the user interacts with their device (e.g., fingerprints, security key), you will receive a credential creation response that includes:

1. The public key and related information.
2. This response is sent back to your server, where you validate it (using the WebAuthn library) and store the user’s public key in your database.

During the user authentication flow, the server will generate a challenge and send it to the client. The client will then use the registered authenticator (e.g., fingerprint) to sign the challenge with the private key. The signed response is sent back to the server, which verifies it using the stored public key and grants access if everything matches.

The frontend

On the frontend, you'll need to use the Web Authentication API (which is built into modern browsers) to interact with the user's device.

When a user registers, you’ll need to call the navigator.credentials.create() method, passing in the options you received from your server. Here’s an example of what that might look like:

	
const publicKeyCredentialCreationOptions = { /* data from the server */ };
navigator.credentials.create({ publicKey: publicKeyCredentialCreationOptions })
  .then((credential) => {
    // Send the credential response to your server for verification and storage
  })
  .catch((error) => {
    console.error("Registration failed", error);
  });
	

For user authentication, you'll use the navigator.credentials.get() method, which will prompt the user to authenticate with their device (e.g., fingerprint scan or security key). Here’s a simple example:

	
const publicKeyCredentialRequestOptions = { /* data from the server */ };
navigator.credentials.get({ publicKey: publicKeyCredentialRequestOptions })
  .then((assertion) => {
    // Send the assertion response to your server for verification
  })
  .catch((error) => {
    console.error("Authentication failed", error);
  });
	

Implementation tips

Here are some tips you might find handy:

• Users may have registered multiple devices (like their phone and a hardware key). Make sure to support the use of all these devices for authentication.
• If the user’s authenticator is not available (e.g., their security key is lost), you’ll need a fallback mechanism, such as a recovery option like SMS or email-based 2FA.
• WebAuthn requires secure connections (HTTPS), so ensure your site is fully encrypted.
• Always verify the challenges, signatures, and other authentication data properly using the WebAuthn libraries. Don’t trust client-side data.
• Consider providing users with a backup method of authentication (like a second security key or alternative login method) in case they lose their primary authenticator.
• Test your WebAuthn implementation across different browsers and devices to ensure compatibility and a smooth user experience. Different devices (e.g., iOS vs. Android) and browsers (Chrome, Firefox, Safari) may handle WebAuthn slightly differently.

If you lack the knowledge or time to do this properly, consider using a third-party service like WorkOS. With WorkOS you can add passkeys to your logins with the flip of a switch.

WebAuthn vs. passkeys

There is some confusion online on WebAuthn vs passkeys. While they are both part of the same broader movement toward passwordless authentication, they differ in terms of how they’re implemented and their scope of use.

WebAuthn is a web standard developed by the FIDO Alliance and W3C that allows for strong, passwordless authentication through public-key cryptography, enabling users to log in using things like biometric data or physical security keys.

Passkeys, on the other hand, are a specific implementation of WebAuthn developed by Apple, Google, and Microsoft that aims to simplify the user experience across multiple platforms. Passkeys are essentially a form of WebAuthn, but they are designed to be more user-friendly and deeply integrated into the ecosystem of operating systems and devices. With Passkeys, users don’t need to manage separate security keys or rely on third-party apps; instead, they can use their phone, laptop, or other devices to securely store and authenticate their passkeys, making the process more seamless. Passkeys are part of a broader effort to create a standardized, cross-platform approach to passwordless login, and they are often marketed as a more streamlined version of WebAuthn specifically for users who want a simple, unified experience across their devices and services.

Conclusion

As cyber threats continue to evolve, WebAuthn is poised to play an increasingly important role in securing online services. With a growing emphasis on privacy, security, and user experience, WebAuthn provides a robust solution to combat the challenges of password-based authentication.

The future of WebAuthn looks promising, with increasing adoption across industries and ongoing advancements in authentication technologies. As more services embrace passwordless authentication, users can look forward to a safer and more convenient online experience.