FACEIO: Facial Login & Attendance for Modern Web Apps – ██FR█████ █INTELL███████████

This content originally appeared on DEV Community and was authored by Kiran Naragund

Hello Devs

In today’s digital workspace, passwordless login and biometric authentication are must-haves for agility, security, and trust. FACEIO delivers a seamless facial login system, empowering organizations to verify, onboard, and track employees or members in real time with nothing but a webcam and a few lines of JavaScript.

In this article, you’ll learn how to integrate FACEIO into your website or web app for use cases like employee/student attendance tracking, facial login systems, and biometric authentication.

Lets get started

Before that let’s first understand:

What is FACEIO & How Does It Work?

FACEIO is a modern, production-grade facial recognition JavaScript SDK enabling instant, secure, privacy-centric authentication for web platforms. Instead of passwords, users simply look into their device camera. FACEIO detects, matches, and authenticates users on the fly for use cases like:

Online face login
Employee/Student attendance tracking
Age verification

FACEIO seamlessly integrates face recognition into your web apps, enabling passwordless, fraud-proof, and touchless user authentication for any modern browser.

It also integrates seamlessly in any modern browser and front-end stack like React, Next.js, Vue, Angular, React Native, and more.

Key features include:

Passwordless, real-time authentication
Liveness detection & deepfake protection
Easy integration for websites and web apps
GDPR, CCPA, and local compliance-ready
On-premise deployment available

Step-by-Step Integration

Implementing FACEIO on your website or web application is straightforward approach. Follow these below given steps

Step 1: Create an Account on FACEIO Console

Step 2: Create a New Application

In the FACEIO console, click on Dashboard in the left sidebar, then click on NEW FACEIO APPLICATION.

This will then open in FACEIO Application Wizard, where you enter details of the new application like:
- Application Alias: This is the name of the application (a memorable name) and is a required step to proceed.
- Application Privacy Policy URL: This is recommended if you have one available
- Application Terms of Service URL: This is optional. After you enter the name, click on the NEXT button as shown below
Click NEXT to proceed.

Step 3: Choose Facial Recognition Engine

Now select a Facial Recognition Engine for the application that you want to integrate with FACEIO. Pixlab or AWS.

You can read more about Facial Recognition Engine here

Step 4: Choose Deployment Mode

Cloud (default): FACEIO handles data securely in their managed cloud.
On-Premise: Total data residency and compliance control—great for regulated industries or privacy-conscious organizations.

Step 5: Review Security Settings

Next step is to review the default security settings recommended for most applications. You can refer to FACEIO’s Security Best Practices Guide for a general overview of the security practices & recommendations.

Step 6: Widget Customization

Select a theme to match your website design standard and also add a link to your website or application image logo URL, this will be displayed on the top left corner of the widget when your application is running and a user wants to start the facial authentication process.

Finally, review the information you entered before submitting and creating a new FACEIO application, and select a plan for this application based on your budget.

Step 7: Create Application

Next, agree to the service terms and click on the CREATE FACEIO APPLICATION button

Note your PUBLIC_ID, which is essential for SDK initialization.

Example: Building an Employee Attendance System

Install the JavaScript SDK

Add via NPM:

npm install @faceio/fiojs

Or embed the CDN script in HTML for quick setups:

<script src="https://cdn.faceio.net/fio.js"></script>

Initialize the FACEIO SDK

Add the following initialization to your main JS/React/Next.js component:

import faceIO from '@faceio/fiojs';

const faceio = new faceIO('YOUR_PUBLIC_APP_ID');

(Replace YOUR_PUBLIC_APP_ID with your actual FACEIO public application key from the dashboard.)

Enroll Employees (Registration & Biometric Capture)

Call the enroll method when an employee signs up or during initial attendance:

The enroll() is for enrollment or on-boarding new users, This will trigger the FACEIO Widget, ask for user’s consent (if not yet authorized), request access (if not yet granted) to the browser’s Webcam/Frontal camera stream, and finally extract & index the facial features of the enrolled user for future authentication purposes.

// Instantiate a new faceIO object with your application's Public ID
const faceio = new faceIO("app-public-id");
function enrollNewEmployee(){
  faceio.enroll({
    "locale": "auto", // Default user locale
    "payload": {
        /* The payload we want to associate with this particular user which is forwarded back to us upon future authentication of this user.*/
        "whoami": 123456, // Dummy ID linked to this particular user
        "email": "kiran@example.com"
        }
    }).then(userInfo => {
        // User Successfully Enrolled! 
        alert(
            `User Successfully Enrolled! Details:
           Unique Facial ID: ${userInfo.facialId}
           Enrollment Date: ${userInfo.timestamp}
           Gender: ${userInfo.details.gender}
           Age Approximation: ${userInfo.details.age}`
        );
       console.log(userInfo);
       // handle success, save the facial ID (userInfo.facialId), redirect to the dashboard...
    }).catch(errCode => {
       // Something went wrong during enrollment, log the failure
       handleError(errCode);
    })
}

Authenticate Employees (Attendance Check-In)

For passwordless daily check-ins call the enroll method

The authenticate() is for authenticating previously enrolled users. This will trigger the authentication process after requesting camera access permission (if not yet granted) by the end user.

async function authenticateEmployee() {
  try {
    const userData = await faceio.authenticate({
      locale: "auto",
    });
    alert(`Attendance verified for: ${userData.details.name}`);
  } catch (err) {
    console.error("Authentication Failed:", err);
  }
}

Liveness Detection & Deepfake Protection

FACEIO leverages built-in liveness detection API and anti-spoof mechanisms. Users must be physically present (no photos/videos), providing robust protection against fraud and account takeover.

Framework Compatibility

FACEIO works smoothly with major frontend frameworks like React, Vue, jQuery, Vanilla Javascript, static HTML, etc.) or server-side language or framework like PHP, Python, Node.js, Rust, Elixir, etc.