FIDO Authentication is a set of rules designed to make logging into online service quicker and more secure. Here we will describe about the FIDO principles and a demo for implementing it in your application.
fido auth

FIDO Authentication using Web Authentication(Web Auth)

dastek logo

Introduction

In today’s world, where online security threats are constantly changing, it’s becoming clear that using just passwords to protect accounts isn’t enough anymore. However, a new solution has changed how users log in and protect their online activities. It’s called FIDO (Fast IDentity Online) Authentication, created by the FIDO Alliance. FIDO is a set of rules designed to make logging into online services quicker and more secure. Its main goal is to get rid of passwords altogether and replace them with safer methods.

There are some core principles of FIDO as mentioned below:

1. Focus on User Privacy and Security

FIDO is designed to keep your personal information safe. It doesn’t share your biometric data (like fingerprints or face scans) with websites or store it on any remote server. Instead, your device turns this data into a secure code, which is then used to verify your identity. The login process happens directly on your device, not on a remote server, which reduces the chances of hackers accessing your information.

2. Works on All Devices and Platforms

The goal of FIDO is to make it work on all types of devices—like smartphones, laptops, and more—so you get the same level of security no matter what you use. It also works across different operating systems and web browsers, meaning that any app or website can use FIDO to securely log you in, no matter the device or platform.

3. Less Need for Passwords

FIDO helps reduce the need for passwords. Passwords are often easy to guess, can be stolen, and are hard to remember, especially if you have many accounts. FIDO aims to replace passwords with more secure and easy-to-use options like biometrics (fingerprints, face scans) or secure codes, making it safer and more convenient to log in.

How FIDO Authentication Works

FIDO Authentication works by using a system called public key cryptography to verify users. It involves three key part: the user’s device, the website or app they want to login into, and the FIDO server. When a user tries to log in, their device creates two keys: a public key and a private key. The private key stays safely on the user’s device, while the public key is saved on the FIDO server during setup. This ensures secure logins without the need for a password.

There are two phases of FIDO Authentication named registration and authentication explained below:

1. Registration 

When a user signs up, their device makes two keys: one called a private key and another called a public key. The private key stays on the user’s device, and the public key is sent to the FIDO server. The server connects this public key to the user’s account so it can be used for logging in later.

2. Authentication 

When the user needs to log in, their device creates a secure code using the private key and sends it to the website or app. This code is then sent to the FIDO server to check if it’s valid. If the server confirms the code is correct, the user is allowed to log in.

FIDO Authentication Examples

There are many companies that uses FIDO Authentication in there network. Some of them are listed below:

  1. Google: Google lets its users log in to their accounts using FIDO Authentication with a fingerprint or a USB security key.
  2. Microsoft: Microsoft allows its users to log in to their accounts using FIDO Authentication with a fingerprint or a Windows Hello PIN.
  3. Samsung: Samsung lets users log in to their Samsung Pass accounts using FIDO Authentication with a fingerprint or the Samsung Pass mobile app.

Implementing FIDO Authentication using Public Key Cryptography and Web Authentication (WebAuthn)

Introduction

The Web Authentication API (WebAuthn) is a system created by W3C and FIDO, with help from companies like Google, Mozilla, Microsoft, and Yubico. It lets websites register and log in users using public key cryptography instead of passwords, making online security stronger.

Pre-requisites

  • Browser support: FIDO2 is supported by many browsers eg..Google Chrome, Mozilla Firefox, Microsoft Edge, and Apple Safari. 
  • Operating system support: FIDO2 is supported by Windows 10 and Android.
  • HTTPS URL and domain name: FIDO2 requires an HTTPS URL and domain name.

What you'll do

Build a website with a simple reauthentication functionality that uses a fingerprint sensor

Getting Started

  1. Modify login and registration pages: You need to modify your website or mobile application’s login and registration pages to use FIDO protocols. Something like this, which accepts a name or email and buttons to call registration and validation process.

 <input type=”text” id=”input-email” placeholder=”Enter user name” autocomplete=”username webauthn” />

<button onclick=”registerUser()”>Register</button>

<button onclick=”validateUser()”>Validate</button>

2. On registration.js call the credentials creating function.

const publicKeyCredentialCreationOptions = {

    challenge: Uint8Array.from(

        randomStringFromServer, c => c.charCodeAt(0)),

    rp: {

        name: “Dastek Softwares”,

        id: “dasteksoftwares.com”,

    },

    user: {

        id: Uint8Array.from(

            “UZSL85T9AFC”, c => c.charCodeAt(0)),

        name: “dastek@gmail.com”,

        displayName: “Dastek Softwares”,

    },

    pubKeyCredParams: [{alg: -7, type: “public-key”}],

    authenticatorSelection: {

        authenticatorAttachment: “cross-platform”,

    },

    timeout: 60000,

    attestation: “direct”

};

const credential = await navigator.credentials.create({

    publicKey: publicKeyCredentialCreationOptions

});

The server makes a new credential on calling navigator.credentials.create() on the user’s device. The publicKeyCredentialCreationOptions object has several required and optional fields that the server uses to create a new credential for the user.

3. The credential object returned from the create() call contains the public key and other details needed to confirm the registration.

console.log(credential);

PublicKeyCredential {

    id: ‘ADSUllKQmbqdGtpu4sjseh4cg2TxSvrbcHDTBsv4NSSX9…’,

    rawId: ArrayBuffer(59),

    response: AuthenticatorAttestationResponse {

        clientDataJSON: ArrayBuffer(121),

        attestationObject: ArrayBuffer(306),

    },

    type: ‘public-key’

}

4. Assertion

After the user has registered, they can log in. During login, their device creates a proof, called an assertion, which shows that they still have the private key. This proof includes a signature made with the private key. The server then checks this signature using the public key saved during registration to confirm it’s valid.

const publicKeyCredentialRequestOptions = {

    challenge: Uint8Array.from(

        randomStringFromServer, c => c.charCodeAt(0)),

    allowCredentials: [{

        id: Uint8Array.from(

            credentialId, c => c.charCodeAt(0)),

        type: ‘public-key’,

        transports: [‘usb’, ‘ble’, ‘nfc’],

    }],

    timeout: 60000,

}

const assertion = await navigator.credentials.get({

    publicKey: publicKeyCredentialRequestOptions

});

The publicKeyCredentialCreationOptions object contains a number of required and optional fields that a server specifies to create a new credential for a user.

  1. The assertion object returned from the get() call is again a PublicKeyCredential object. It is slightly different from the object we received during registration; in particular, it includes a signature member, and does not include the public key.

console.log(assertion);

PublicKeyCredential {

    id: ‘ADSUllKQmbqdGtpu4sjseh4cg2TxSvrbcHDTBsv4NSSX9…’,

    rawId: ArrayBuffer(59),

    response: AuthenticatorAssertionResponse {

        authenticatorData: ArrayBuffer(191),

        clientDataJSON: ArrayBuffer(118),

        signature: ArrayBuffer(70),

        userHandle: ArrayBuffer(10),

    },

    type: ‘public-key’

}

  1. Parsing and Validating the Authentication Data

After the assertion has been obtained, it is sent to the server for validation. After the authentication data is fully validated, the signature is verified using the public key stored in the database during registration.

const storedCredential = await getCredentialFromDatabase(

    userHandle, credentialId);

const signedData = (

    authenticatorDataBytes +

    hashedClientDataJSON);

const signatureIsValid = storedCredential.publicKey.verify(

    signature, signedData);

if (signatureIsValid) {

    return “Hooray! User is authenticated! 🎉”;

} else {

    return “Verification failed. 😭”

}

Conclusion

Congratulations you have successfully created FIDO Authentication to your web app.

Trust and Worth

Our Customers

We are having a diversified portfolio and serving customers in the domains namely Sports Management, Online Laundry System, Matrimonial, US Mortgage, EdTech and so on.

Would you like to start a project with us?

DAStek team would be happy to hear from you and would love to turn your ‘Imaginations to Reality’.