1,336 reads

Authenticate Your Users Using Facial Recognition With FaceIO, Next.JS and Tailwind CSS

by John Thiong'oAugust 17th, 2022

Too Long; Didn't Read

FaceIO is a facial authentication framework that can easily be integrated to any website or web app using a simple javaScript snippet. The cost of authentication is reduced compared to OTP authentication (sending short codes to clients phone numbers) Facial recognition is able to provide authentication that is incomparable to other traditional forms of authentication. Facial integration and faceIO can be easily integrated into a next-app login/signup form and you will experience the simplicity of faceIO. If you want to know more you can read the [faceIO starting guide] or [this wonderful introduction]

Companies Mentioned

featured image - Authenticate Your Users Using Facial Recognition With FaceIO, Next.JS and Tailwind CSS

Hi there,

I am going to show you an exciting new way to authenticate your users using facial recognition by faceIO.

What is FaceIO

This is a facial authentication framework that can easily be integrated into any website or web app using a simple JavaScript snippet.

Why use facial integration and faceIO?

Since the number of websites asking for passwords is constantly growing and the complexity of passwords needs to increase beyond that which the human brain can remember, facial recognition authentication is able to step in and provide a method of authentication that is simple and secure.
In cases where the website moderators want to substantially reduce the ability of a user to open multiple accounts or where the user identity needs to be verified, for example when using financial service provider’s websites, facial recognition is able to provide authentication that is incomparable to other traditional forms of authentication.
The cost of authentication is reduced compared to OTP authentication (sending shortcodes to clients’ phone numbers).

Now let us get to the heart of the matter and integrate faceIO into a Next.js login/signup form and you will experience the simplicity of faceIO.

First, we begin by initializing Next.js in a new folder. I will use yarn:

yarn create next-app faceionextjsform

Let us cd into the folder then add Tailwind CSS to the project

cd faceionextjsform

yarn add -D tailwindcss postcss autoprefixer

Create tailwind CSS configuration files that are tailwind.config.js and postcss.config.js by this yarn command.

yarn tailwindcss init -p

Open tailwind.config.js and replace the contents with this

module.exports = {
  content: [
    // add this lines
    "./pages/**/*.{js,ts,jsx,tsx}",
   
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Update ./styles/globals.css , you may delete any other files.

/* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Go to pages/index.js and delete all the HTML and replace it with the following:

<div className='bg-green-300 text-center text-white h-screen'>
      <Head>
        <title>face.IO login/signup form</title>
        <meta name='description' content='a face.IO login form' />
        <link rel='icon' href='/favicon.ico' />
      </Head>

      <main>
        <h1 className='text-xl font-bold'>home</h1>
      </main>
</div>

Before we run our application, add a new file _document.js to the pages folder ( pages/_document.js ). This is used to override the default Document because we want to add a custom script tag to our site. This script tag will enable us to integrate the faceIO into our project by adding their CDN to the HTML.

If you want to know more you can visit the faceIO integration guide.

The contents of _document.js will be as follows:

import Document, { Html, Head, Main, NextScript } from 'next/document';
class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }
render() {
    return (
      <Html>
        <Head></Head>
        <body>
          //note this script tag
          <script src='https://cdn.faceio.net/fio.js'></script>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}
export default MyDocument;

After you run yarn dev your application should look like this picture above.

Inspect your site and confirm whether the faceIO CDN script is located inside the body tag.

Create a new root folder components and add a file SignUpForm.js (components/SignUpForm.js).

Since I want to summarize this as much as possible I have taken the liberty of creating a form feel free to copy the code.

import React from 'react';
const SignUpForm = () => {
  return (
    <section className='h-full gradient-form bg-gray-200 md:h-screen'>
      <div className='container py-12 px-6 h-full'>
        <div className=' flex justify-center items-center flex-wrap h-full g-6 text-gray-800'>
          <div className=''>
            <div className='block bg-white shadow-lg rounded-lg'>
              <div className='lg:flex lg:flex-wrap g-0'>
                <div className='px-4 md:px-0'>
                  <div className='md:p-12 md:mx-6'>
                    <div className='text-center'>
                      <h4 className='text-xl font-semibold mt-1 mb-12 pb-1'>
                        Face Authentication by FaceIO
                      </h4>
                    </div>
                    <form>
                      <p className='mb-4'>
                        Please Sign Up if you do not have an account
                      </p>
                      <div className='mb-4'>
                        <input
                          type='email'
                          className='form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none'
                          placeholder='Your Email'
                          name='userEmail'
                        />
                      </div>
                      <div className='mb-4'>
                        <input
                          type='password'
                          className='form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none'
                          placeholder='Password'
                          name='pin'
                        />
                      </div>
                      <div className='text-center pt-1 mb-12 pb-1'>
                        <button
                          className='bg-green inline-block px-6 py-2.5 text-black font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:shadow-lg focus:outline-none focus:ring-0 active:shadow-lg transition duration-150 ease-in-out w-full mb-3'
                          type='button'
                          onClick={handleSubmit}
                        >
                          Sign Up
                        </button>
                      </div>
                      <div className='flex items-center justify-between pb-6'>
                        <p className='mb-0 mr-2'>Do you have an account?</p>
                        <button
                          type='button'
                          className='inline-block px-6 py-2 border-2 border-green-600 text-green-600 font-medium text-xs leading-tight uppercase rounded hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out'
                          onClick={handleLogIn}
                        >
                          Log In
                        </button>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};
export default SignUpForm;

Go to pages/index.js and replace the h1 tag in the main tag with <SignUpForm />.

Do not forget to import it. Your form now should look like this:

Now go to the faceIO console sign up then create a new project by following the steps once you are done you will get a public ID. Note it because we will use it here.

We are going to register a user. In order to do this, we must first initialize the faceIO object. We will do this inside a useEffect so that even if the state changes it will not reinitialize faceIO object, remember to import the useEffect.

Go to signUpForm.js and add the useEffect.

//first import useEffect and useState
import React, { useEffect, useState } from 'react';
// initialize faceIO object
let faceio;
useEffect(() => {
    faceio = new faceIO('xxxxxxxxx');
  }, []);
//replace xxxx.. with your project id

In order to register a user, we must have user registration logic (just the usual username and password) that will be stored together with the user's facial authentication data for future reference ( faceIO does not store an actual picture of the user but rather a vector which is hashed and cannot be reverse engineered ).

You can read more about this here.

Let us collect the user data, we are going to use a useState hook (hooks are react.js superpower).

We are going to map the values of the username and password into a payload variable object.

const [payload, setPayload] = useState({userEmail: '',pin: '',});

Go to the input field of name userEmail and update it so that its value is mapped to the userEmail, do the same also to the input field with the name pin:

<input type='email' className='form-control...' placeholder='Your Email'name='userEmail' defaultValue={payload.userEmail} />
//and also
<input type='password' className='form-control...' placeholder='Your Email'name='pin' defaultValue={payload.userEmail} />

We need to create an onChange function so that when the user types the info it can be stored in the payload object.

const onChange = (e) => {setPayload({...payload,[e.target.name]: e.target.value,});};

//Again do not forget to update the input fields by adding
onChange = {onChange}

We will create a signup function that takes in the payload and enrolls the user to faceIO. Note that enroll is a method of the faceIO object.


const handleSignUp = async (payload) => {
    try {
      let response = await faceio.enroll({
        "locale": "auto",
        "payload": { "email": `${payload.userEmail}`, "pin":  `${payload.pin}` }
});
console.log(` Unique Facial ID: ${response.facialId}
    Enrollment Date: ${response.timestamp}
    Gender: ${response.details.gender}
    Age Approximation: ${response.details.age}`);
    } catch (error) {
      console.log(error);
    }
  };

Let us now create a handleSubmit function that will submit all this info:

const handleSubmit = (e) => {
    // prevents the submit button from refreshing the page
    e.preventDefault();
//just to confirm that payload has the info you may delete it after
    console.log(payload);
   handleSignUp(payload);
};

And as simple as that we have enrolled the user try it and you will see.

When that user comes in next time and wants to log in he/she will only need to be authenticated.

Let us make the handleLogIn function and update the log-in button:

const handleLogIn = async () => {
    try {
      let response = await faceio.authenticate({
        locale: 'auto',
      });
console.log(` Unique Facial ID: ${response.facialId}
        PayLoad: ${response.payload}
        `);
    } catch (error) {
      console.log(error);
    }
  };

And with that we are done, see how simple it is.

If you want to see the whole code you may access it on GitHub.

That is the conclusion for now but always check in this space for more.

Also published here.