Quado FIDO2/WebAuthn Relying Party Sample

This is a sample code for understanding how to integrate Quado in your relying party. Server side code is written in Express.js and front side code is written in pure javascript.

NOTE: For simplicity, this sample save account data (e.g.: username, password) in localstorage on browser. In a production environment, you should save these data on your server.

Live Demo

VIEW LIVE DEMO

Supported Browser

Microsoft Edge	Mozilla Firefox	Google Chrome	Safari
18+	60+	67+	13+

Setup

Register new relying party

First of all, you need to sign up Quado console to register new relying party. Please refer to this document for more details.

Set the parameters below on "CONFIGURATION" page of Quado console.

Parameter	Value
Allowed domain	localhost
Allowed origins	http://localhost:2000

NOTE: If you run this server in another domain, replace these parameters according to your environment.

You can find API key and API endpoint in the bottom of CONFIGURATION page. These values will be used later.

Run

Install dependencies.

# In case of yarn
yarn install

# In case of npm
npm install

Specify your API key and API endpoint in app.js file.

const API_KEY = "YOUR_API_KEY"
const ENDPOINT = "https://api.quado.io/webauthn/api/v1"

Start web server and you can access http://localhost:2000.

node app.js

Usage

Registration

After sign up and click "Register new FIDO2 device" button, you can see registration page below.

Click "Start Registration" to register new FIDO key.

NOTE: The optional authenticatorAttachment attribute filters eligible authenticator by type. The value “platform” indicates a platform authenticator, such as Windows Hello or MacOS's TouchID. The value "cross-platform" value indicates a roaming authenticator, such as a security key.

Once your FIDO key was registered, you can see registered key from "/top.html".

Authentication

After registration, you can try authentication from "/auth.html".

License

• MIT license
• Copyright 2019 © Quado, Inc..