Build a Face-Matching ID Scanner With ReactJS and AI

Picture this: you’re building a web app that can verify someone’s identity by having them snap a selfie with their webcam and upload a photo of their ID. It’s like something out of a sci-fi movie, but you can make it happen with ReactJS and face-api.js (a super cool library built on TensorFlow.js). This setup lets you create a working prototype in a few hours, all running right in the browser — no fancy servers required. 

In this guide, I’ll walk you through building a React component that compares a live webcam feed to an ID photo to confirm a match. We’ll talk about why this is awesome for quick prototyping and toss in some ideas for where you could use it.

Why This Combo Is So Cool

ReactJS is my go-to for building slick, reusable UI components. Pair it with face-api.js, which handles face detection and recognition right in your browser, and you’ve got a killer setup. Here’s why I’m pumped about it:

• Instant results: It checks faces in real time, so users see “Match!” or “Try again” right away.
• Fast tweaks: React’s hot-reloading means you can mess with the code and see changes instantly—perfect for experimenting.
• Keeps data private: Everything runs on the user’s device, so no sensitive face data leaves their browser.
• Easy to customize: Start with pre-trained models and tweak them later to fit your needs.

This is perfect for prototyping stuff like secure logins or online banking checks, and it’s a hit with devs who want to ship features fast.

What You Need to Get Started

• A bit of ReactJS know-how (hooks and components are enough).
• Node.js (v14 or later) and npm or yarn installed.
• Some JavaScript basics (like async/await).
• A browser like Chrome that supports WebGL.

Never touched AI before? No stress — face-api.js comes with pre-trained models, so you can focus on the fun coding part.

Setting Up Your Project

Let’s get this party started:

1. Create a React app:
   npx create-react-app id-scanner cd id-scanner
2. Grab the libraries: Install face-api.js for face recognition and react-webcam for live video:
   npm install face-api.js react-webcam
3. Get the models: Download the pre-trained model weights from the face-api.js GitHub. You’ll need tiny_face_detector_model, face_landmark_68_model, and face_recognition_model. Drop them into a public/models folder in your project.
4. Start the app:
   npm start
   Your app should pop up at http://localhost:3000.

Building the Face-Matching Component

We’re going to make a component that lets users upload an ID photo, then checks their webcam feed to see if their face matches. Face-api.js does the heavy lifting by creating “face descriptors” (unique codes for faces) and comparing them. Here’s the plan:

• Load the AI models when the component starts.
• Grab a face descriptor from the uploaded ID.
• Check the webcam feed every half-second for a live face descriptor.
• Compare the two and show a friendly message like “You’re verified!” or “No match, try again.”
• Draw a box around the detected face for a cool visual effect.

Step 1: Load the Models

We’ll use React’s useEffect to load the models when the component starts. This ensures everything’s ready before we start scanning faces.

Step 2: Build the Component

Here’s the fixed and tested IdentityVerificationComponent.js. I’ve added error handling, a canvas for drawing face boxes, and cleaned up the logic to make it rock-solid.

import React, { useRef, useState, useEffect } from 'react';
import Webcam from 'react-webcam';
import * as faceapi from 'face-api.js';

const IdentityVerificationComponent = () => {
  const webcamRef = useRef(null);
  const canvasRef = useRef(null);
  const idInputRef = useRef(null);
  const [referenceDescriptor, setReferenceDescriptor] = useState(null);
  const [message, setMessage] = useState('Upload your ID to get started');
  const [modelsLoaded, setModelsLoaded] = useState(false);

  // Load models on mount
  useEffect(() => {
    const initModels = async () => {
      try {
        const MODEL_URL = '/models';
        await Promise.all([
          faceapi.nets.tinyFaceDetector.loadFromUri(MODEL_URL),
          faceapi.nets.faceLandmark68Net.loadFromUri(MODEL_URL),
          faceapi.nets.faceRecognitionNet.loadFromUri(MODEL_URL),
        ]);
        setModelsLoaded(true);
        setMessage('Models loaded! Upload your ID.');
      } catch (error) {
        console.error('Error loading models:', error);
        setMessage('Oops, failed to load models. Try refreshing.');
      }
    };
    initModels();
  }, []);

  // Handle ID photo upload
  const handleIdUpload = async (event) => {
    try {
      const file = event.target.files[0];
      if (!file) {
        setMessage('No file selected. Pick an ID photo.');
        return;
      }
      const img = await faceapi.bufferToImage(file);
      const detection = await faceapi
        .detectSingleFace(img, new faceapi.TinyFaceDetectorOptions())
        .withFaceLandmarks()
        .withFaceDescriptor();
      if (detection) {
        setReferenceDescriptor(detection.descriptor);
        setMessage('ID uploaded! Now face the webcam.');
      } else {
        setMessage('No face found in the ID. Try a clearer photo.');
      }
    } catch (error) {
      console.error('Error processing ID:', error);
      setMessage('Error with ID upload. Try again.');
    }
  };

  // Run face verification every 500ms
  useEffect(() => {
    if (!modelsLoaded || !referenceDescriptor || !webcamRef.current) return;

    const interval = setInterval(async () => {
      try {
        if (webcamRef.current.video.readyState === 4) {
          const video = webcamRef.current.video;
          const detection = await faceapi
            .detectSingleFace(video, new faceapi.TinyFaceDetectorOptions())
            .withFaceLandmarks()
            .withFaceDescriptor();

          // Draw face box on canvas
          const canvas = canvasRef.current;
          canvas.width = video.videoWidth;
          canvas.height = video.videoHeight;
          const ctx = canvas.getContext('2d');
          ctx.clearRect(0, 0, canvas.width, canvas.height);

          if (detection) {
            const distance = faceapi.euclideanDistance(referenceDescriptor, detection.descriptor);
            const similarity = (1 - distance) * 100;
            const isMatch = distance < 0.6; // Common threshold for face match
            setMessage(
              isMatch
                ? `You're verified! (${similarity.toFixed(2)}% match)`
                : 'No match. Try adjusting your position or lighting.'
            );

            // Draw bounding box
            const box = detection.detection.box;
            ctx.beginPath();
            ctx.rect(box.x, box.y, box.width, box.height);
            ctx.lineWidth = 2;
            ctx.strokeStyle = isMatch ? 'green' : 'red';
            ctx.stroke();
            ctx.fillStyle = isMatch ? 'green' : 'red';
            ctx.font = '16px Arial';
            ctx.fillText(
              isMatch ? 'Match' : 'No Match',
              box.x,
              box.y > 10 ? box.y - 10 : box.y + 10
            );
          } else {
            setMessage('No face detected. Please face the camera.');
          }
        }
      } catch (error) {
        console.error('Error during verification:', error);
        setMessage('Error scanning face. Try again.');
      }
    }, 500);

    return () => clearInterval(interval);
  }, [modelsLoaded, referenceDescriptor]);

  return (
    <div style={{ textAlign: 'center', padding: '20px' }}>
      <input
        type="file"
        ref={idInputRef}
        onChange={handleIdUpload}
        accept="image/*"
        style={{ marginBottom: '20px', padding: '10px' }}
      />
      <div style={{ position: 'relative', display: 'inline-block' }}>
        <Webcam
          ref={webcamRef}
          audio={false}
          width={640}
          height={480}
          screenshotFormat="image/jpeg"
          style={{ borderRadius: '8px', marginBottom: '20px' }}
        />
        <canvas
          ref={canvasRef}
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: 640,
            height: 480,
          }}
        />
      </div>
      <h2 style={{ color: message.includes('verified') ? 'green' : 'black' }}>
        {message}
      </h2>
    </div>
  );
};

export default IdentityVerificationComponent;

import IdentityVerificationComponent from './IdentityVerificationComponent';

function App() {
  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h1>Verify Your Identity with a Selfie</h1>
      <p>Upload your ID and look into your webcam to see if you're a match!</p>
      <IdentityVerificationComponent />
    </div>
  );
}

export default App;

Why This Is Awesome

1. Build it fast: React’s hot-reloading lets you tweak the code — like changing the match threshold or styling — and see results right away. I’ve had prototypes like this up and running in an afternoon.
2. Feels snappy: The webcam checks every half-second, so users get instant feedback. It’s like magic when “Match!” pops up.
3. Lightweight: The models are small (6-20MB) and use your browser’s GPU, so no server costs or setup headaches.
4. Tweakable: Want stricter matches? Adjust the 0.6 threshold. Need more features? Add a smile detector. It’s your playground.
5. Private and offline: Since it runs in the browser, user data stays local, which is great for privacy and works without internet.

I’ve seen devs use this setup to build secure login flows or KYC checks, often shaving days off their dev time because it’s so easy to iterate.

Things to Watch For

• Speed: On older laptops, the webcam might stutter. Try lowering the video resolution or using the tiny detector model.
• Accuracy: Test with different lighting or face angles. You might need to play with the threshold to avoid mismatches.
• Browsers: WebGL is key, so test on Chrome or Firefox. Add a fallback message for unsupported browsers.
• Real-world use: For a live app, add server-side checks to make sure nobody’s tampering with the client-side code.
• Next steps: Try adding a liveness check (like asking for a wink) or hook up an OCR API to read ID details.

Let’s Wrap It Up

This ReactJS and face-api.js combo makes it crazy easy to build an identity verification app that feels modern and secure. Our component lets users upload an ID, scan their face, and see if they match — all without leaving the browser. It’s perfect for testing ideas like secure logins or online check-ins without getting bogged down in backend setup.

Want to level it up? Add a feature to detect blinks for extra security or connect it to a database for user profiles. Toss your project on GitHub or share it with the DZone crew — I’d love to see what you build!

Where You Can Use This

Here’s a bunch of ideas for putting this tech to work:

• Online banking: Verify users during account setup by matching their selfie to their ID — helps stop fraud.
• Workplace security: Lock down sensitive dashboards by checking employee faces against their badges.
• E-commerce: Confirm IDs for buying age-restricted stuff like vape pens, keeping things legal and smooth.
• Telehealth: Make sure patients are who they say they are before virtual doctor visits to protect health data.
• Event check-ins: Speed up entry at concerts or virtual conferences by matching faces to ticket IDs.
• Social media: Secure password resets by verifying user faces against profile pics.
• Remote hiring: Check new hires’ identities during virtual onboarding to streamline HR.
• Gaming: Stop account sharing in online games by matching players to their registered IDs.
• Travel: Enable touchless check-ins at hotels or airports using webcam selfies and passports.
• Online exams: Keep remote tests fair by verifying students’ faces during proctoring.