Skip to main content
This example demonstrates how to build a biometric authentication system using vanilla JavaScript and the BioKey library. No frameworks required.

​
Quick Start

Create a simple biometric login interface using pure JavaScript. This example uses the lower-level biokey-core library for maximum control.

​
Installation

npm install biokey-core

​
Complete Example

Here’s a full implementation with enrollment and authentication: 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BioKey Authentication</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>BioKey Authentication</h1>
    
    <div class="status-card">
      <div class="status-header">
        <span>Status:</span>
        <span id="status" class="badge">Not Enrolled</span>
      </div>
      
      <div id="key-display" class="key-display" style="display: none;">
        <label>Identity Key:</label>
        <code id="public-key"></code>
      </div>
    </div>

    <div id="message" class="message"></div>

    <div class="actions">
      <button id="enroll-btn" class="btn btn-primary">
        Enroll Fingerprint
      </button>
      <button id="auth-btn" class="btn btn-secondary" disabled>
        Authenticate
      </button>
      <button id="reset-btn" class="btn btn-ghost" style="display: none;">
        Reset
      </button>
    </div>

    <p class="note">
      Requires HTTPS or localhost. Your biometric data never leaves your device.
    </p>
  </div>

  <script type="module" src="app.js"></script>
</body>
</html>

​
How It Works

​
1. Enrollment Flow

When a user enrolls:
  1. Generate a random challenge and user ID
  2. Call navigator.credentials.create() to create a platform authenticator credential
  3. User authenticates with their fingerprint/Face ID
  4. Derive a deterministic identity key from the credential’s rawId using HKDF
  5. Store the credential ID and public key in localStorage

​
2. Authentication Flow

When a user authenticates:
  1. Retrieve the stored credential ID from localStorage
  2. Generate a new challenge
  3. Call navigator.credentials.get() with the credential ID
  4. User authenticates with their biometric
  5. Verify the authentication succeeded

​
3. Key Derivation

The identity key is derived using HKDF (HMAC-based Key Derivation Function): 
HKDF-SHA256(
  rawId,           // Input key material
  'biokey-v0-salt',     // Salt
  'biokey-identity-key' // Info
) → 256-bit identity key
This ensures the same biometric always produces the same identity key.

​
Running the Example

npm install -D vite

​
Using Python

python -m http.server 8000 --bind localhost

​
Using Node.js

npx serve .
Important: WebAuthn requires HTTPS or localhost. Make sure you’re testing on localhost or a secure origin.

​
Browser Compatibility

This example uses the WebAuthn API with platform authenticators:
  • Chrome/Edge 87+
  • Safari 14+
  • Firefox 60+
Devices must have:
  • Touch ID (macOS)
  • Face ID (iOS/iPadOS)
  • Windows Hello (Windows)
  • Fingerprint sensor (Android)

​
Next Steps

React Example

See how to integrate BioKey with React using hooks

Full-Stack Example

Build a complete client-server authentication system

Build docs developers (and LLMs) love

Get started for freeTalk to us