Goodbye to passwords with WebAuthn: the future of online identity protection
Published: 2023-01-03 08:44:59

# 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**](https://web-authn.x-dev.club/)

**Source code is available on** [**github**](https://github.com/guMcrey/web-authn-completed-app)

The demo has been demonstrated on WIN10 and Android devices, but compatibility with devices and browsers is also a consideration.
![image.png](https://github.com/guMcrey/web-authn-completed-app/blob/main/preview/Android-Huawei%20browser.gif?raw=true)
![image.png](https://github.com/guMcrey/web-authn-completed-app/blob/main/preview/WIN10-Microsoft%20Edge.gif?raw=true)

- 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](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 [itgumx@163.com](mailto:itgumx@163.com) to request the deletion of your data.

---

## Links:

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