Log in/Sign up form using 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 to 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 needing 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 short codes to clients phone numbers).
If you want to know more you can read the faceIO starting guide, or this wonderful introduction.
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
Let us cd into the folder then add tailwind css to the project
Create tailwind CSS configuration files that is tailwind.config.js and postcss.config.js
Open tailwind.config.js and replace the contents with this
Update ./styles/globals.css. you may delete any other files.
Go to pages/index.js and delete all the html and replace it with
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 faceIO integration guide
The contents of _document.js will be
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;
Run yarn dev and confirm that your application looks like this
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 summarise 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 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 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 useStateimport React, { useEffect, useState } from 'react';// initialize faceIO objectlet 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 facial authentication data for future reference ( faceIO does not store 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 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 sign up 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);};
Let us update the sign up button with an onClick
onClick={handleSubmit}And as simply as that we have enrolled the user try it and you will see.
When that user comes in next time and wants to login 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 in githubSince this is quite a summary let me provide you with some few links and more reading material so that you may be on your way to integrating faceIO into your favorite framework.
- The getting started guide.
- The integration guide.
- The Developer center.
- The frequently asked questions section.
- The trust center.
There are also some very interesting articles to get you on your way.
Implementing facial authentication on a Vue.js app.
How to Authenticate a User with Face Recognition in React.js.
That is the conclusion for now but always check in this space for more.
