Goodbye to passwords with WebAuthn: the future of online identity protection

The shortcomings of traditional authentication methods:

As the internet becomes more prevalent, we rely more and more on online services to complete our daily work and entertainment. However, online identity authentication has always been a thorny problem, and traditional authentication methods such as passwords, SMS/email verification codes, OTPs (one-time passwords), or two-factor authentication all have some drawbacks.

• Passwords: Using passwords for authentication is the most common method, but passwords can be prone to brute force attacks, leaks, or being forgotten, making them not secure or convenient.
• SMS/email verification codes: When using SMS/email verification codes for authentication, a code is sent to the user's phone and the user must enter it on the website or app to log in. However, SMS verification codes can be intercepted or deceived, leading to authentication failure.
• OTP (one-time password): OTP is a method of authentication using a single-use password. OTPs typically generate a dynamic password that is changed every so often, and the user must enter it on the website or app to log in. OTP allows for authentication when the device is not nearby, but if the OTP is intercepted or deceived, it can also lead to authentication failure.
• Two-factor authentication: Also known as two-factor authentication, this is a method of authentication that requires a user to provide two different types of credentials in order to pass authentication. Typically, two-factor authentication requires something the user knows (such as a password) and something the user has (such as a phone). While two-factor authentication is more secure than a single factor (such as a password), it can still be inconvenient and vulnerable to interception or deception.

What is WebAuthn?

Is there a way to authenticate identity that is both secure and doesn't compromise user experience? That's where WebAuthn comes in. WebAuthn is a new, browser-based online identity authentication technology developed by the World Wide Web Consortium (W3C) that allows users to authenticate themselves using hardware-based identity verification devices such as Apple TouchID and Windows Hello, or biometric sensors on mobile devices. WebAuthn aims to provide users with a more secure and convenient way to authenticate online identity, and is supported by most modern web browsers.
Here's how WebAuthn works:

1. The user registers their identity during their first login.
2. The user's device generates a private key.
3. The user's device signs the login information with the private key.
4. The server verifies the signature and confirms the user's identity. During this process, a password is not used. Instead, WebAuthn uses digital signature technology to verify the user's identity, which uses public key encryption algorithms to provide even greater security.

What problems does WebAuthn solve for identity verification?

WebAuthn has many advantages over traditional password authentication methods. First, it provides higher security. Because it doesn't use passwords, it doesn't pose a security threat to accounts due to password leaks.

In addition, WebAuthn can use multiple verification methods, including fingerprint recognition and facial recognition, which are very difficult to impersonate, thereby greatly improving account security.

Second, WebAuthn provides a more convenient login experience. Users only need to register their identity during their first login, after which they can use WebAuthn for quick login. Users don't have to remember passwords and don't have to worry about the hassle of forgetting passwords.

Of course, WebAuthn also has some drawbacks. For example, it can only be used on devices that support WebAuthn, so it may not be suitable for older devices. In addition, to create a public-private key pair for a website or app, the user must first register on the website or app, and for users unfamiliar with WebAuthn, it may take some time to learn and understand this method of identity verification.

Overall, WebAuthn's appearance today, with passwords under frequent attack, provides us with higher security and a more convenient login experience.

What does web-authn-completed-app do?

web-authn-completed-app is a demo of a WebAuthn-based authentication process that aims to help interested developers better understand and develop WebAuthn more quickly.

The project is built with Vue3 + Typescript + Vite3 for the client, Express for the server, and MySQL8 for the database. The project also includes detailed instructions on how to operate and start the app in different scenarios to make it easier for developers to deploy and further develop.

The demo can be accessed online at https://web-authn.x-dev.club

Source code is available on github

The demo has been demonstrated on WIN10 and Android devices, but compatibility with devices and browsers is also a consideration.

• To use the demo, you will need one of the following devices:
  • An Android device with a biometric sensor
  • An iPhone or iPad with iOS 14 or later and Touch ID or Face ID
  • A MacBook Pro or Air with macOS Big Sur or later and Touch ID
  • A Windows 10 19H1 or later device with Windows Hello
• You will also need one of the following compatible browsers:
  • Google Chrome 67 or later
  • Microsoft Edge 85 or later
  • Safari 14 or later

Note: all user data registered through https://web-authn.x-dev.club will not be used and is only for demo user statistics. If you have any concerns, you can email [e-mail] to request the deletion of your data.

---

Links:

• Demo address：https://web-authn.x-dev.club
• Source code：https://github.com/guMcrey/web-authn-completed-app
• WebAuthn MDN：https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API

Comments

[Matt Ellen-Tsivintzeli]

This sounds like passwords with extra steps. Perhaps I've misread something.

How does this provide more security over a password manager?

[hakuna]

WebAuthn is secure because, like HTTPS, it uses asymmetric encryption to ensure security, but with a different focus. The core of WebAuthn is "authentication" rather than "encryption", that is, ensuring that the authenticator that produces the credentials is the user's authenticator, rather than a third party forging credentials.

"By calling WebAuthn, we can authenticate our identity through fingerprint, face, or even iris scans on different platforms, while ensuring security and privacy."

During the first login, a traditional account password is used to login and register a pair of public and private key credentials, with the private key saved on the client and the public key uploaded to the server. On subsequent logins, the registered credentials are verified through asymmetric encryption and the user can log in.

During the entire authentication process, the private key saved on the client is not spread over the network, minimizing the risk of leakage. Even if the public key stored on the server is leaked, it is meaningless to hackers.

Therefore, WebAuthn is a more secure and simpler user authentication method. If you are interested, you can check out the demo source code on Github.

[Matt Ellen-Tsivintzeli]

But that means you're transmitting something every time you log in. If that is intercepted, how is that not compromised? It doesn't seem more secure than HTTPS by itself.

You say "verified through asymmetric encryption", but if the information being verified is intercepted, what is stopping it from being resent at a later date, to authenticate a bad actor?

[hakuna]

Yes, your concerns are right. However, if you understand how webauthn works, you will understand why it is safer.

Prerequisites: WebAuthn require a secure context (i.e. the server is connected by HTTPS or is the localhost), and will not be available for use if the browser is not operating in a secure context.

Protection against phishing: An attacker who creates a fake login website can't login as the user because the signature changes with the origin of the website.
Reduced impact of data breaches: Developers don't need to hash the public key, and if an attacker gets access to the public key used to verify the authentication, it can't authenticate because it needs the private key.

The following two figures show the data interaction process during registration and verification (source MDN).

It is recommended to read the official website document of webAuthn, which may help you better understand.