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

FeaturePasswordsSMS 2FATOTP AppsWebAuthn
Phishing Resistanceโœ— Vulnerableโœ— Vulnerable~ Partiallyโœ“ Resistant
User ExperiencePoorPoorModerateExcellent
Setup ComplexitySimpleSimpleModerateModerate
PrivacyModeratePoorGoodExcellent

๐Ÿ† 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

webauthn-server.js
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

webauthn-client.js
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
WebAuthn Security Notes:
  • 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