VDM FIDO2 WebAuthn Integration Demo

About This Demo

This demo shows how to integrate with the VDM FIDO2 WebAuthn backend to enable passwordless authentication using FIDO2/WebAuthn standards.

The demo consists of two main pages:

• Enrollment Demo: Simulates a user logging in with password, then registering a WebAuthn credential
• Login Demo: Simulates a user logging in using the WebAuthn credential (passwordless)

How WebAuthn Works

The WebAuthn API allows websites to register and authenticate users using public key cryptography instead of passwords. Here's how it works:

Enrollment Process:

1. User logs in with username/password
2. Backend generates a challenge
3. Browser's WebAuthn API creates a credential (key pair)
4. Private key stays in the device's secure storage
5. Public key is sent to the server
6. Server stores the public key for later verification

Authentication Process:

1. User initiates login
2. Backend generates a challenge
3. Browser asks the authenticator to sign the challenge
4. User verifies with biometrics or PIN
5. Signature is sent to the server
6. Server verifies the signature using the stored public key
7. If valid, user is authenticated

Implementation Overview

The demo uses:

• Web Authentication API (WebAuthn) for credential management
• EasyKey JavaScript SDK for communication with the backend
• LocalStorage for storing demo credentials

For more details, see the code in:

• /js/easykey.js: The SDK implementation
• index.html and login.html: Demo pages

Sequence Diagram

The enrollment flow follows this sequence:

User -> Desktop Browser: Login (userId, password)
Desktop Browser -> Server APP: Login (userId, password)
Desktop Browser <- Server APP: Login OK
User <- Desktop Browser: enroll EasyKey?
User -> Desktop Browser: enroll request
Desktop Browser -> JS SDK: start enroll EasyKey
JS SDK -> Server EasyKey: challenge request
Server EasyKey -> Server EasyKey: generate challenge
JS SDK <- Server EasyKey: challenge
JS SDK -> JS SDK: Generate key pair (WebAuthn API), deviceID
JS SDK -> JS SDK: sign(challenge)
JS SDK -> Server EasyKey: POST /enroll Signed message + Metadata
Server EasyKey -> Server EasyKey: Verify Signature(signature,challenge)
Server EasyKey -> Server EasyKey: Update User and Store Device
Server EasyKey --> JS SDK: 201 OK
Desktop Browser <- JS SDK: enroll OK