Biometric Key & WebAuthn Credential Generator
Generate secure biometric keys and WebAuthn credentials for Touch ID, Face ID, fingerprint authentication, and passwordless login. Configure platform authenticators with FIDO2 passkeys and biometric verification settings.
Domain that will use this credential
Human-readable service name
Unique user identifier (email or username)
Human-readable user name
Built-in biometric authenticators like fingerprint or face recognition
Authenticator will create resident key if supported
Use verification if available, but allow without it
No attestation (fastest, most private)
WebAuthn vs Traditional Authentication
| Feature | Passwords | SMS 2FA | TOTP Apps | WebAuthn |
|---|---|---|---|---|
| Phishing Resistance | โ Vulnerable | โ Vulnerable | ~ Partially | โ Resistant |
| User Experience | Poor | Poor | Moderate | Excellent |
| Setup Complexity | Simple | Simple | Moderate | Moderate |
| Privacy | Moderate | Poor | Good | Excellent |
๐ Why WebAuthn Wins: WebAuthn provides the strongest security against phishing and credential theft while offering the best user experience through biometric authentication.
Real-World Implementation Examples
Express.js Server Integration
const express = require('express');
const crypto = require('crypto');
const app = express();
// Store challenges and credentials (use database in production)
const challenges = new Map();
const credentials = new Map();
// Registration endpoint
app.post('/webauthn/register/begin', (req, res) => {
const { username } = req.body;
const challenge = crypto.randomBytes(32);
challenges.set(username, challenge);
res.json({
challenge: challenge.toString('base64url'),
rp: {
id: 'example.com',
name: 'Example Corp'
},
user: {
id: crypto.randomBytes(32).toString('base64url'),
name: username,
displayName: username
},
pubKeyCredParams: [
{ alg: -7, type: 'public-key' }, // ES256
{ alg: -257, type: 'public-key' } // RS256
],
authenticatorSelection: {
authenticatorAttachment: 'platform',
userVerification: 'preferred'
},
attestation: 'none'
});
});
// Registration completion
app.post('/webauthn/register/complete', (req, res) => {
const { username, credential } = req.body;
const challenge = challenges.get(username);
if (!challenge) {
return res.status(400).json({ error: 'Invalid challenge' });
}
// Verify credential (simplified - use proper WebAuthn library)
// Store credential for user
credentials.set(username, {
credentialId: credential.id,
publicKey: credential.response.publicKey
});
challenges.delete(username);
res.json({ success: true });
});
app.listen(3000);Frontend Registration Flow
class WebAuthnAuth {
async register(username) {
try {
// Get registration options from server
const response = await fetch('/webauthn/register/begin', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username })
});
const options = await response.json();
// Convert challenge and user ID from base64url
options.challenge = this.base64urlToBuffer(options.challenge);
options.user.id = this.base64urlToBuffer(options.user.id);
// Create credential
const credential = await navigator.credentials.create({
publicKey: options
});
// Send credential to server
const registerResponse = await fetch('/webauthn/register/complete', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
username,
credential: {
id: credential.id,
rawId: this.bufferToBase64url(credential.rawId),
response: {
clientDataJSON: this.bufferToBase64url(credential.response.clientDataJSON),
attestationObject: this.bufferToBase64url(credential.response.attestationObject)
}
}
})
});
const result = await registerResponse.json();
if (result.success) {
console.log('Registration successful!');
return true;
} else {
throw new Error('Registration failed');
}
} catch (error) {
console.error('Registration error:', error);
return false;
}
}
base64urlToBuffer(base64url) {
const base64 = base64url.replace(/-/g, '+').replace(/_/g, '/');
const padded = base64.padEnd(base64.length + (4 - base64.length % 4) % 4, '=');
return Uint8Array.from(atob(padded), c => c.charCodeAt(0));
}
bufferToBase64url(buffer) {
const base64 = btoa(String.fromCharCode(...new Uint8Array(buffer)));
return base64.replace(/+/g, '-').replace(///g, '_').replace(/=/g, '');
}
}
// Usage
const auth = new WebAuthnAuth();
document.getElementById('register-btn').addEventListener('click', () => {
const username = document.getElementById('username').value;
auth.register(username);
});Browser Support & Device Compatibility
Platform Authenticators
Touch ID / Face ID
macOS Safari 14+, iOS Safari 14+
Windows Hello
Edge 18+, Chrome 72+, Firefox 87+
Android Biometrics
Chrome 70+, Android 7.0+
Cross-Platform Authenticators
YubiKey
USB-A, USB-C, NFC, Lightning
Google Titan
USB-A, USB-C, NFC, Bluetooth
Mobile as Authenticator
iOS 16+, Android 9+ with Google Play Services
๐ Current Adoption: WebAuthn is supported by 95%+ of browsers globally. Major platforms include GitHub, Microsoft, Google, Adobe, PayPal, and many financial institutions.
Business Benefits of WebAuthn
๐ฐ Cost Reduction
- Eliminate SMS costs (can be $0.05+ per message)
- Reduce password reset support tickets by 90%
- Lower security incident response costs
- Decrease compliance audit overhead
๐ User Experience
- 50%+ faster login times vs traditional 2FA
- Works offline (no connectivity required)
- No app installation needed
- Consistent across devices and browsers
๐ก๏ธ Security Improvements
- 99.9%+ reduction in account takeovers
- Complete phishing protection
- No shared secrets to compromise
- Cryptographic proof of user presence
- Always validate the origin in clientDataJSON on the server
- Store and verify the credential public key securely
- Use HTTPS for all WebAuthn operations
- Implement proper challenge verification to prevent replay attacks
- Consider user verification requirements based on your security needs
- Platform authenticators provide better UX but are device-specific
- Biometric data is processed locally and never transmitted