How to Authenticate a User via Face Recognition in Your Web Application

Authentication is a very crucial aspect of your web application. If you are offering a service or selling some product to the user, you should keep track of the user for future reference. All this can be only possible if you have an authentication system in place.

But using the right tool for the job is also very necessary. In past, email and password-based authentication were most popular and widely used. But with time, a new concept called OAuth was introduced when big techs were popping out with a huge user base. Where you as an owner of the site trust the OAuth provider to authenticate a user, in return, the OAuth provider gives you details of the user.

OAuth-based authentication is simple for the user. They only have to maintain one account with an OAuth provider and use this account to log in to all other websites. But there is always trust involved in the OAuth process.

After some time, passwordless authentication came into the picture. In this process, when you enter the username or your email, they mail you a link. If you paste the link into the browser, you are automatically authenticated and logged in. The most common example of password-less authentication is when you click on the send magic link to log in to hackernoon.com.

With the advancement of Artificial Intelligence (AI) and machine learning (ML), facial recognition techniques are gaining huge popularity. With time, as the datasets will grow bigger, the accuracy of an AI model will also increase. Nowadays, we can also use facial recognition techniques, to authenticate users in our web application.

In this article, we are building a simple application, to demonstrate how to authenticate a user using facial recognition. In this process, we are going to use FaceIO APIs.

Why we need facial recognition-based authentication

The need for facial recognition is multifold. I am trying to put up some points here in a concise way. Make sure to read the article to the end to get a complete conceptual understanding and a detailed implementation walkthrough.

Faster than traditional methods: Facial authentication method is very fast than the traditional means of authentication. You just have to click on a button to start the authentication process and within a millisecond, it is done. In the traditional email password-based methods, you have to add your details line by line. Sometimes after successful log-in, you are greeted with a captcha. How irritating it is!
Don't require specialized hardware: The only requirement of the Facial authentication technique is a camera. All smartphones nowadays have a camera by default. All desktops also have some sort of webcams present. Therefore, users don't need any specialized hardware to use this service.
Reduce impersonation on social platforms: The most important feature of facial authentication is that it can prevent impersonation. On social platforms, many people create fake accounts by impersonating someone. This can be very risky if the fake account holder commits some type of digital crime. With the help of facial recognition, social platforms can recognize if the account someone was trying to access, actually belongs to them.
Reduce bots and automated scripts: Bots and automated scripts are introduced to help people get rid of repetitive tasks. But people also used them in a different way to spam others. Daily you come across many bots and automated scripts in your digital life that you don't even notice or realize. To prevent this, some websites use captcha. Using facial recognition, this problem can also be solved as bots have no face to authenticate 😄.
Privacy-focused: Privacy is a very sensitive topic for all of us. We all become a little bit concerned when someone asks you to authenticate using your face data. But as we are using FaceIO in this tutorial, the authentication process is purely end-to-end encrypted. In the backend, they store only the hash of your facial features. They are completely GDPR and CCPA-compliant. So, you can trust them to store your data safely.

Make a facial authentication project

Now we are going to make a facial authentication web application. This project includes all the bits and pieces and all you need to know about how to implement face recognition-based authentication in your web application.

I am explaining the process step-by-step. You can get a full source code here. Make sure to obtain a free API key to follow along.

Installing the required dependency

Create a blank directory and inside it, make an index.html file. You can also add a separate CSS file, but for the sake of simplicity, I will keep it to the bare minimum.

If you are using VSCode for development, you can use the live server to serve your static files.

Inside your index.html, add this basic HTML markup, to begin with.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

FaceIO provides a very handy javascript library to interact with their AI models. This makes our life so easier that we can implement the facial recognition feature using only a few lines of code. To add the FaceIO javascript library, we use their CDN(content delivery network) inside the body tag of our HTML document.

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

Now, create a file index.js and link the file inside the body tag after FaceIO CDN.

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

Now let's create 2 helper functions to ease our development process. One is for enrolling a user (like the sign-up feature) and the other is for authentication (like the log-in feature).

Enrolling a user

Enrolling a user is very simple because of the javascript library FaceIO provides. Inside the HTML markup add a button with id="enroll". We access this button inside our javascript file using the getElementbyID method.

Now initialize the FaceIO object inside index.js. You have to add the public ID of your FaceIO project. You can get the public ID listed in your project dashboard.

const faceio = new faceIO("<Your Public ID here");

Let's add an event listener in the enroll button. When someone clicks the button, we execute the enroll method of the faceIO object. This enrollment method takes a variety of optional parameters.

locale is the local language of the user.
permissions timeout corresponds to the number of seconds to wait for the user to grant access to the camera.
termsTimeout is the number of seconds to wait for the user to accept the terms and conditions of FaceIO.
idleTimeout is the total number of seconds to wait while trying to recognize a face.
replyTimeout is the number of seconds to wait to receive processed facial data from the FaceIO node.
userConcent is a boolean that represents if users give consent to scan their faces. If you have already taken consent from the user then you can set the value to true.
payload: Inside the enroll function you can add a payload of your choice. Payload should be a key value object. You can use this payload feature to attach your email address or any other information related to the user.

In our case, the enroll function looks like this.

enroll.addEventListener("click", async () => {
  let response = await faceio.enroll({
    locale: "auto",
    payload: {
      email: "[email protected]",
      pin: "12345",
    },
  });

  console.log(` Unique Facial ID: ${response.facialId}
  Enrollment Date: ${response.timestamp}
  Gender: ${response.details.gender}
  Age Approximation: ${response.details.age}`);
});

When you run this function, A popup appears in front of the user. This popup contains terms and conditions. If the user accepts the terms and conditions, it asks for camera access. If the user grants the camera access, FaceIO will scan the face.

FaceIO model looks for unique facial features that distinguish the user from others. Once completed, You have to add a PIN which is attached to your facial data. This PIN is very important for the user and keeps it in a safer place.

When all these steps are completed, FaceIO returns an userInfo object to the user. This object contains a user face ID which is a universally unique identifier, gender, and age. Gender and age are not very accurate, as they are predicted by an AI model.

You can use store this faceID in your backend. When a user wants to log in, you can match this faceID to authenticate the user.

During the workflow, if any error occurs, FaceIO has an extensive list of error messages. If the user doesn't allow the camera access then the fioErrCode.PERMISSION_REFUSED error is thrown.

If the user doesn't accept the terms and conditions popup then the fioErrCode.TERMS_NOT_ACCEPTED error is thrown by the server.

Authenticating a user

To initiate the authentication flow, add a button in your HTML markup with id="authenticate". Access this button inside index.js with the help of the getElementbyID method.

Now when the user presses this button, we initiate the authentication flow. The authentication function is very simple.

Authenticate function take permissionTimeout,idleTimeout,replyTimeout, and locale parameter like the previous enroll() function. The code looks something like this.

authenticate.addEventListener("click", async () => {
  let response = await faceio.authenticate({
    locale: "auto",
  });

  console.log(` Unique Facial ID: ${response.facialId}
      PayLoad: ${response.payload}
      `);
});

When the user presses the authentication button, a similar screen popup like in the case of enrolling function. It takes your camera access and scans your face. Once scanned, it asks for the PIN that you entered during the enrollment time.

If you provide the correct pin, FaceIO returned the FaceData and the payload you specified in the enrollment process.

You can also double-check the authentication flow by matching the faceID in your server.

Now our authentication flow is completed. You can see it is easier than implementing an email password auth flow. All the heavy lifting is done by the FaceIO server and its AI model, as a developer, you only have to add the application logic to modify the authentication flow and its experience.

Privacy features

FaceIO has a robust privacy protection system. Let me list down some of them.

It is GDPR and CCPA compliant: FaceIO service is completely GDPR and CCPA compliant. GDPR stands for General Data Protection Regulations. It is adopted in 2018 and it requires all businesses to protect the personal data and privacy of the user.

CCPA stands for California Consumer Protection Act gives more control to the user over their data. If you are operating in those regions, you don't have to worry.
It stores only hashes: FaceIO only store hashes of your facial features. It doesn't store any plain data and stores as minimum information as possible. The client-side library and widgets don't handle any biometrics data. All the process is done at the backend.

FAQ

Is FaceIO browser agnostic?

FaceIO is completely browser agnostic. It can run any browser including chrome, firefox, and safari. As all the processing is done at the server, FaceIO needs only your camera access to run.

If you are using some privacy browser by disabling javascript, make sure to enable them. As FaceIO needs to use javascript to talk with the server.

Can't we build our model from scratch?

Yes, you can build your model from scratch and implement the facial authentication feature in your web app. But for this, you should have a deep understanding of artificial intelligence and machine learning processes.

As most web developers are not from this background, it is a smart move to use others' services to implement a feature rather than reinvent the wheel.

There are other solutions are present in the market that you can explore. One is AWS Rekognition. This service is offered by AWS and works very similarly to FaceIO. The interesting thing is that you can opt for AWS Rekognition inside your FaceIO dashboard.

Yes, it is possible. You can now choose what you want and go for it.

Hide the public ID

As we can see in the coding part, you have to give your public ID during the initiation of the FaceIO object. If you want, you can hide it using environment variables. If you are using a front-end framework or a build system, you can dynamically add these values at the build time.

If you are using NextJS, you can use .env.local file to save your sensitive credentials.

If you are not using any framework, you can use Vite. Vite supports environment variables. It builds and compresses your vanilla js project for faster deployment. Just create a .env file, put all your credentials there, and you are done. Don't forget to put your .env file inside your .gitignore list.

Conclusion

If you read the article to this point, I think you like this article. Please share it with your peers. If you want to give any feedback, I am available on Twitter as hrishikshpathak. Keep reading, keep learning.