Passwordless Authentication in Websites using FIDO2
As website users we all face difficulty to remember passwords for various websites that we use, with different types of password requirements. I have done forget password multiple times.
How about using your Mobile device QR scanner, Faceid, fingerprint or Laptop finger print sensor to login to the website in your browser. Yes its possible.
Answer to it Passwordless authentication, is a secure login method that eliminates the need for traditional passwords. Instead, users can authenticate using alternative factors such as biometrics, security keys, or one-time codes. This approach enhances security by reducing the risk of password-related vulnerabilities.It aligns with modern security practices, making it a popular choice seamless consumer experience.
Passwordless Authentication using FIDO2
FIDO2 is the blanket term for a passwordless authentication open standard developed by the Fast Identity Online (FIDO) Alliance, an industry consortium comprised of technology firms and other service providers.
FIDO2 consists of two core components WebAuthn API, Web API supported by most of the modern browsers and Client to Authenticator (CTAP) protocol that provides FIDO2-capable devices an interface for external authenticators via NFC, USB, or Bluetooth.
How FIDO2 Works
There are two parts to it,
- Register for the use of FIDO2 Auth
- Authenticate via FIDO2 certified devices
Registration for FIDO2
Your web application should provide a way to register a user to enable and use FIDO2, by creating a credential with basic details (excluding password) and generating a secured challenge with Relaying Party ID (domain name, display name etc). When this is passed to the Browser, the WebAuthn API is invoked and challenge is sent to Authenticator device. The Authenticator device can be your Touch ID, Face ID or even a QR code that can be scanned by Android or iOS device.
With the Authenticator device, the challenge is signed and returned to the server. The Server then validates and finishes the registration. Below is the object to create a registration with challenge using WebAuthn API
Once registered, the user can log in without password to the website now.
Login With FIDO2
During login, the user enters UserName which is passed to the server to fetch the credential details from the registration flow. Along with the credentials, the server generates a dynamic challenge to pass on to the browser. The browser generates the authentication assertion using the WebAuthn API for the user to sign in and complete the challenge.
On successful completion, the details (credentials & challenge) are sent to the server for verification. Once the server verifies it correctly, the login attempt is successful.
Sample Login object with WebAuthn API
The rpID should always be the https domain name for the WebAuthn API to work, some browsers may not even allow non-http domain names like localhost even during development.
Time to See It in Action
Complete HTML code for registration and log in below
Place this HTML file in a folder and use npx serve -l 3000 to serve the page in http://localhost:3000.
But for FIDO2 to work, we need an HTTPS URL and domain name, so I have used ngrok for the same, which will tunnel the HTTPS URL to port 3000 in localhost.
Final Thoughts
The consumer experience will be enhanced by decentralized authentication using end-user devices. FIDO2 replaces weak passwords with strong hardware-based authentication using public key crypto to protect against phishing, session hijacking, man-in-the-middle, and malware attacks.
By authenticating users based on possession of a physical device, Fido2 provides an effective layer of protection against unauthorised access. This cutting-edge technology offers a convenient and standardised way to ensure security while streamlining the user experience.
