DEV Community

Cover image for Implementing Fingerprint Authentication in Next.js with WebAuthn
Sannu kumar
Sannu kumar

Posted on

Implementing Fingerprint Authentication in Next.js with WebAuthn

#webdev #javascript #security #nextjs

🌐 Live Demo: https://fingerprint-auth-web.vercel.app/login - Go ahead, click it!
My Portfolio-https://sannu-portfolio.vercel.app/portfolio - Check out my projects
Do comments and give suggetions 🥺

Overview

I recently implemented a comprehensive fingerprint authentication system for a Next.js portfolio website, featuring both registration and login capabilities with real biometric sensor integration.





Tech Stack

  • Framework: Next.js 15 with App Router
  • Authentication: Web Authentication API (WebAuthn)
  • UI: React with Tailwind CSS
  • State Management: React Context API
  • Styling: CSS Custom Properties for theming

Key Features Implemented

🔐 Biometric Registration

  • Real fingerprint enrollment using device sensors
  • WebAuthn credential creation with platform authenticators
  • Secure credential storage in localStorage
  • Visual feedback with animated fingerprint scanning

👆 Fingerprint Login

  • Biometric verification against stored credentials
  • Cross-device compatibility (laptop fingerprint readers, phone sensors)
  • Progressive ridge line animation during scanning
  • Error handling for various authentication scenarios

🎨 Advanced UI/UX

  • Realistic fingerprint sensor interface with SVG animations
  • 8 curved ridge lines that fill progressively during scanning
  • Rotating progress indicators and success animations
  • Dark/light theme support with smooth transitions

WebAuthn Integration 

// Creating biometric credential
const credential = await navigator.credentials.create({
  publicKey: {
    challenge: crypto.getRandomValues(new Uint8Array(32)),
    rp: { name: 'Portfolio', id: window.location.hostname },
    user: { id: userId, name: username, displayName: 'User' },
    pubKeyCredParams: [
      { alg: -7, type: 'public-key' },   // ES256
      { alg: -257, type: 'public-key' }  // RS256
    ],
    authenticatorSelection: {
      authenticatorAttachment: 'platform',
      userVerification: 'required'
    }
  }
});
Enter fullscreen mode Exit fullscreen mode

Animated Fingerprint Scanner 

// Progressive ridge line animation
const lines = Array.from({ length: 8 }, (_, i) => ({
  id: i,
  progress: 0,
  active: false
}));

// Animate each line filling up
lines.forEach((line, index) => {
  setTimeout(() => {
    // Activate line and animate progress
  }, index * 200);
});
Enter fullscreen mode Exit fullscreen mode

Implementation Highlights

Real Device Integration

  • Platform Authenticators: Uses built-in fingerprint/face sensors
  • Cross-Platform: Works on Windows Hello, Touch ID, Android biometrics
  • Secure Storage: Credentials stored securely on device only

Visual Feedback System

  • 8 Ridge Lines: Curved SVG paths representing fingerprint ridges
  • Sequential Animation: Lines activate and fill one by one
  • Progress Tracking: Real-time scanning progress indicators
  • Success States: Animated checkmarks and completion feedback

Error Handling

  • User-Friendly Messages: Clear error descriptions
  • Device Compatibility: Graceful fallbacks for unsupported devices
  • Security Errors: Proper handling of authentication failures

Benefits

🔒 Security

  • Hardware-Backed: Uses device TPM/secure enclave
  • Phishing Resistant: Credentials bound to specific domains
  • No Password Storage: Biometric data never leaves device

👤 User Experience

  • Convenient: One-touch authentication
  • Fast: Instant verification
  • Universal: Works across devices with biometric sensors

🛠 Developer Experience

  • Web Standards: Uses native WebAuthn API
  • No External Dependencies: Pure browser APIs
  • Future-Proof: Standards-based implementation

Challenges Solved

  1. Hydration Mismatch: Resolved Next.js SSR/client rendering conflicts
  2. Theme Persistence: Implemented global theme context with localStorage
  3. Animation Timing: Synchronized WebAuthn calls with visual feedback
  4. Cross-Browser Support: Handled WebAuthn availability gracefully

Conclusion

This implementation demonstrates how to create a production-ready fingerprint authentication system using modern web standards. The WebAuthn API provides a secure, user-friendly alternative to traditional password-based authentication while maintaining compatibility across devices and platforms.

The combination of hardware-backed security, intuitive UI animations, and seamless integration with existing authentication flows makes this a compelling solution for modern web applications requiring biometric authentication.

Top comments (0)