How we can implement biometric authentication for web.

[TheKalpeshPawar]

What do we want to achieve?

• We want the user to be able to authenticate themselves using biometrics or the PIN/Password used by their device each time they open the web app.

How can we achieve this on the web?

• Almost all modern browsers have a built-in API called WebAuthN.
  • https://www.w3.org/TR/webauthn-2/#sctn-intro

Can we achieve exactly what we want with this API?

• Yes, but not exactly. This technology isn’t intended to be used for unlocking your web app every time a user opens it. That said, there’s no hard rule preventing it. We can just ask for the passkey each time the user tries to open the web app.
• We can create a passkey using this API. ( We are doing the same thing on Windows, using a different API, using the same technology. But it is still more aligned with our goal.
  • We can use passkeys as a 2FA method for signing into our accounts, like a Google account, a Microsoft account, etc.
• There are several ways we can create a passkey.
  • We can use a password manager like ProtonPass (which I use).
  • Then there are platform authenticators, which are what we want, like Windows Hello on Windows.
  • The WebAuthN API can call the platform's native authentication APIs, but support varies across platforms, e.g there is no support on Linux for platform authentication.
  • But in any case, the user can use a password manager, a security key and all methods supported by the WebAuthN API.
• Please refer to the API documentation (WebAuthN).
  • Here is an AI-generated summary of the Introduction section.

    The Web Authentication (WebAuthn) specification defines an API that allows web applications to use strong, 
    public key-based credentials to authenticate users securely. These credentials are created and stored by 
    authenticators (devices or software) with user consent and are restricted to the specific Relying Party 
    (the web application) that created them. This ensures privacy and security, as credentials can't be 
    accessed by other sites.
      
    There are two main steps:
    Registration – A public key credential is created and associated with a user's account.
    Authentication – The credential is used to prove the user’s identity to the Relying Party.
    
    The API is accessed via navigator.credentials.create() (for registration) and navigator.credentials.get() (for authentication), 
    and is part of the broader Credential Management API.
    
    Authenticators can be:
    Platform authenticators (built into the device),
    or Roaming authenticators (external devices using USB, NFC, or BLE).

Here are some demo videos.

Posting soon. Pardon.

• You can use the official demo website yourself to see how things work (https://webauthn.io/).

How would we do the implementation?

• The documentation for the API provides examples for doing registration and authentication.
• We’ll need to use Kotlin/JS interop since the actual logic will be written in JavaScript. Fortunately, that is a very easy process.
  • Here is the documentation for that with examples (Kotlin/JS Interop).
• We will call the functions inside the actual PlatformAuthentication class for the JS (I haven't yet checked how things will work in wasmJS).

Additional requirements:

• The data received during the registration process needs to be saved. Also, we have to extract some data from the JSON response, like the credential ID and, attestation object.
• These things are supposed to be done by the server. The server also, in turn, verifies the data sent after the registration and authentication process. But we are keeping all the things online, so we don't have to do additional verification of the data, but we still need the library to extract the data from the JSON.