BioKey lets you turn a fingerprint scan into a cryptographic identity — no passwords, no vendor lock-in, no biometric data stored anywhere.
Requirements : HTTPS or localhost, modern browser (Chrome 100+, Safari 16+, Firefox 119+), and a device with a fingerprint sensor or Face ID.
Quick Start: Browser SDK
The fastest way to add BioKey to your app is with the JavaScript SDK.
Install the SDK
Add biokey-js to your project: Or using Bun:
Initialize the client
Create a BioKey client instance: import { BioKeyClient } from 'biokey-js'
const biokey = new BioKeyClient ({
rpId: location . hostname , // Your domain
rpName: 'My App' // Display name shown during enrollment
})
The rpId must match your website’s hostname. BioKey uses WebAuthn under the hood, which enforces same-origin security.
Enroll a fingerprint
Trigger the platform authenticator to create an identity: const identity = await biokey . enroll ()
console . log ( identity )
// {
// publicKey: '7f3a9c2e...', // 64-char hex identity key
// credentialId: 'a1b2c3...',
// deviceId: '8d4f2a1b...',
// enrolledAt: 1735689600000,
// method: 'prf' // or 'rawid' (fallback)
// }
This triggers your device’s fingerprint scanner or Face ID. The identity is derived from the biometric event and stored in localStorage.
Authenticate
Verify the user with their fingerprint: const result = await biokey . authenticate ()
if ( result . verified ) {
console . log ( 'Authenticated!' , result . publicKey )
// Grant access to your app
}
Without a server, authentication only verifies locally. For cross-device or multi-session auth, you need the BioKey server .
Quick Start: React
For React apps, use the useBioKey hook:
Install the React package
Use the hook
import { useBioKey } from 'biokey-react'
export function LoginButton () {
const { identity , isEnrolled , isLoading , enroll , authenticate , error } = useBioKey ()
if ( ! isEnrolled ) {
return (
< button onClick = { () => enroll () } disabled = { isLoading } >
{ isLoading ? 'Scanning...' : 'Enroll Fingerprint' }
</ button >
)
}
return (
< div >
< p > Identity: { identity . publicKey . slice ( 0 , 16 ) } ... </ p >
< button onClick = { () => authenticate () } disabled = { isLoading } >
{ isLoading ? 'Verifying...' : 'Authenticate' }
</ button >
{ error && < p style = { { color: 'red' } } > { error } </ p > }
</ div >
)
}
How It Works
BioKey uses the WebAuthn PRF extension (when available) to derive a stable cryptographic key from your fingerprint:
Fingerprint scan
→ WebAuthn PRF extension (salt: "biokey-prf-v2-salt")
→ 256-bit hardware secret (never leaves authenticator)
→ hex(secret) = your public identity
On platforms without PRF support, BioKey falls back to HKDF-SHA256 key derivation from the WebAuthn credential’s rawId.
Key Derivation Understand PRF vs rawId-HKDF methods
Security Model What BioKey protects against (and what it doesn’t)
Server Setup Add cross-device authentication
Protocol Spec Full protocol specification (CC0 public domain)
Testing Locally
BioKey requires HTTPS or localhost. To test:
npm create vite@latest my-biokey-app
cd my-biokey-app
npm install biokey-js
npm run dev # Opens at https://localhost:5173
Mobile testing : Deploy to Vercel, Netlify, or Railway for HTTPS. WebAuthn requires a secure context.
Next Steps
Install packages
See Installation for all packages and framework-specific setup.