DEV Community

S I D D A R T H
S I D D A R T H

Posted on • Originally published at Medium on

Building a Face Recognition-Based User Registration System

Get Files at Github

Introduction

In today’s digital world, biometric authentication is becoming increasingly important for secure user registration. This blog explores how to build a face recognition-based user registration system using Node.js, Python (MediaPipe), MySQL, and React.js.

By the end of this post, you’ll understand how to:

  • Set up a backend using Node.js and Express.js
  • Process face images using Python and MediaPipe
  • Store user data and embeddings in MySQL
  • Convert images to Base64 in React.js before sending them to the backend

🛠 Tech Stack

  • Frontend: React.js (Image conversion to Base64, API communication)
  • Backend: Node.js (Express, MySQL)
  • Face Processing: Python (MediaPipe, OpenCV, NumPy)
  • Database: MySQL

📌 Key Features

Face-based Registration: Users register using their real name, unique code, and face image.

Face Embedding Generation: Extracts facial features using MediaPipe. ✔ Secure Database Storage: Stores user data and face embeddings in MySQL.

Unique Code Verification: Ensures only authorized users can register.

📂 Project Structure

/Face-Recognition-Registration
│── frontend/ # React.js Frontend (To be built)
│── server.js # Node.js backend (API, database handling)
│── face_processor.py # Face processing script (Python, MediaPipe)
│── package.json # Node.js dependencies
│── README.md # Project documentation
└── database.sql # SQL script to create tables
Enter fullscreen mode Exit fullscreen mode

⚡ How It Works

1️⃣ User selects an image in the frontend.

2️⃣ Frontend converts the image to Base64 and sends it to the backend.

3️⃣ server.js verifies the unique code and forwards the image to face_processor.py.

4️⃣ face_processor.py detects the face and generates a face embedding.

5️⃣ server.js stores the processed data in MySQL and updates user details.

🚀 Future Enhancements

Complete Frontend with React.js

Real-time Face Scanning Animation

QR-Based Login using Face Authentication

Decentralized Access Control (Blockchain)

Improved AI-based Face Matching

🏗️ Setting Up the Project

1️⃣ Clone the Repository

git clone https://github.com/guider23/faceScannerForAuthentication.git
cd Face-Recognition-Registration
Enter fullscreen mode Exit fullscreen mode

2️⃣ Install Dependencies

npm install # Install Node.js dependencies
pip install -r requirements.txt # Install Python dependencies
Enter fullscreen mode Exit fullscreen mode

3️⃣ Configure the Database

  • Create a MySQL database and import the database.sql file.
  • Update server.js with your database credentials.

SQL Table Creation

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    real_name VARCHAR(255) DEFAULT 'Pending',
    unique_code VARCHAR(50) NOT NULL UNIQUE,
    face_embedding JSON DEFAULT '{}',
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

-- Insert placeholder unique codes for testing
INSERT INTO users (real_name, unique_code) VALUES ('Pending', 'ABC1234'), ('Pending', 'DEF5678'), ('Pending', 'GHI9101');
Enter fullscreen mode Exit fullscreen mode

4️⃣ Start the Server

node server.js
Enter fullscreen mode Exit fullscreen mode

🔬 Testing the API

Since the frontend is pending, you can test the API using Postman or cURL.

Using Postman

1️⃣ Open Postman and create a new POST request to http://localhost:3000/register. 2️⃣ Set the request body to raw JSON:

{
  "real_name": "John Doe",
  "unique_code": "ABC1234",
  "image": "data:image/jpeg;base64,/9j/4AAQSkZJRg..."
}
Enter fullscreen mode Exit fullscreen mode

3️⃣ Click Send and check the response.

Using cURL

curl -X POST http://localhost:3000/register \
     -H "Content-Type: application/json" \
     -d '{
           "real_name": "John Doe",
           "unique_code": "ABC1234",
           "image": "data:image/jpeg;base64,/9j/4AAQSkZJRg..."
         }'
Enter fullscreen mode Exit fullscreen mode

🔗 Conclusion

This face recognition-based user registration system lays the groundwork for a secure, AI-powered authentication mechanism. As we continue to improve it, adding features like real-time face scanning and decentralized access control , it will become a cutting-edge solution in biometric security.

Interested in contributing? Fork the repo, submit PRs, and star the project! 🚀

📝 License

This project is open-source and available under the MIT License.

💡 Got ideas? Drop a comment below or contribute to the repo! 🚀

Contribute Github

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

DevCycle image

Ship Faster, Stay Flexible.

DevCycle is the first feature flag platform with OpenFeature built-in to every open source SDK, designed to help developers ship faster while avoiding vendor-lock in.

Start shipping

👋 Kindness is contagious

Discover fresh viewpoints in this insightful post, supported by our vibrant DEV Community. Every developer’s experience matters—add your thoughts and help us grow together.

A simple “thank you” can uplift the author and spark new discussions—leave yours below!

On DEV, knowledge-sharing connects us and drives innovation. Found this useful? A quick note of appreciation makes a real impact.

Okay