WebAuthn Demo Application
We've created a webauthn demo application using the BlockID NodeJS SDK and ReactJS.
Overview of the WebAuthn Demo Application
Here's a brief overview of the steps required to register and authenticate FIDO devices on our webauthn demo application:
Step 1: Register a Security Key or Platform Authenticator
The registration steps vary slightly depending on whether you wish to register a security key or a platform authenticator.
Not sure which?
Examples of security keys:
- YubiKey
- Google TitanKey
Examples of platform authenticators:
- Apple TouchID and FaceID
- Windows Hello
- Built-in biometrics on your mobile device
Register a Security Key
Enter a username in the box on the left (under Step 1 Register) - this can be any unique username that has not already been used to register a device on this page.
For this demo, we are going with the name JohnDoe:
After typing in your username, click the Setup security key button.
A message from your browser will pop up asking you to insert your security key and touch it.
Insert your security key and touch it as instructed by the browser to complete the device registration.
The pop-up message will update to display a message confirming that you have successfully registered your security key.
Register a Platform Authenticator
Enter a username in the box on the left, under Step 1 Register. This can be any unique username that has not already been used to register a device on this page.
Because we already used the name JohnDoe to register a security key, we are going to use the name JohnDoe2 for this demo, using a Macbook Pro as our Platform Authenticator:
After entering your username, click the Setup platform authenticator button.
A browser message will pop up asking you to confirm your identity with the built-in device biometrics. Since we are using a MacBook Pro with Apple TouchID, we see a message asking us to scan our fingerprint (or to enter a password):
After scanning our fingerprint, we will see a message stating that our device was successfully registered.
Step 2: Authenticate
After registering a security key or platform authenticator, we can now use the device we registered to authenticate.
Enter the username you used to register your device in Step 1 in the box on the right, under Step 2 Authenticate.
We are going to authenticate using our MacBook, which we registered with the username JohnDoe2:
After entering your username, click the Login with fido key button. A browser message will pop up again, asking you to authenticate the FIDO device.
This will be identical to the process used when registering the device:
Security Keys
For security keys, such as a YubiKey, you will see the message asking you to insert your key and touch the device:
Platform Authenticators
For platform authenticators, such as Apple TouchID on a Macbook Pro, you will see the message asking you to scan your fingerprint (or else type in a password):
After authenticating your device, you will see a message pop-up confirming the demo login was successful:
