Biometric Authentication with Passkeys - Demo & Code

Demo

Install this demo PWA, and launch it from your iPhone or Android phone's home screen, tap the Authenticate button below to create a Passkey, and choose an authentication method.

How it works

The Web Authentication API (WebAuthn) allows users to register and authenticate using their device's biometric capabilities, such as fingerprint readers, facial recognition (like iOS FaceID), or other local authenticators like device passwords or external USB Security Keys.

During registration, a unique credential, often referred to as a Passkey is created on the user's device. The ID of this Passkey is then saved against the user's profile in your database.

Later, when users attempt to log in using WebAuthn, your PWA will provide the stored Passkey ID to the Web Authentication API. The user will then authenticate using their previously registered method (e.g., fingerprint or face scan). If the authentication is successful, your app will receive a response confirming the user's identity, which you can then verify server-side.

Note that the actual biometric data (like fingerprints) is never shared with your server. Instead, the biometric data is used locally on the device to verify the user and the corresponding authentication response is shared with your app.

Below you'll find the code of our Passkey authentication demo. While this is a simplified client-side only version, it captures the essence of the functionality.

Browser support

The Web Authentication API is supported by most modern browsers, including Chrome on Android and Safari on iOS.

Code

Links & Documentation

• Web Authentication API Documentation on MDN
• WebAuthn.guide