DEV Community: John Thiong'o

React Context API login example using FaceIO for face authentication.

John Thiong'o — Fri, 30 Sep 2022 05:29:18 +0000

Hi there,

In this build I am going to show the use of the React Context API and the useReduce hook to manage state in a react application. To demonstrate this we will build a user authentication react component, taking advantage of the simple FaceIO face authentication system to authenticate our users. Once they are authenticated we will then pass the user data to the state and be able to consume it in other components.

Why we will use FaceIO.

FaceIO is a facial authentication system for websites and web based applications.

FaceIO is,

Very easy to implement. It takes less than 3 lines of code and basically entails adding a script like the google gtag. For more you can check here.
Seamless and does not entail the user getting FIDO keys, OTP codes and security questions thereby enhancing user experience in our site.
Very secure. First it provides a defense level facial recognition accuracy ensuring that we accurately authenticate each and every user using their facial recognition engine. Secondly it guarantees the privacy of the user by ensuring that there data is safe and also that they don’t actually store the face of the user but rather a facial vector.

This is part two of a two part series if you would like to follow along part one is here.

We are going to pick up from where we left last time. Firstly we are going to arrange our content appropriately

In the src folder let us create a folder pages and in it create two files named Home.tsx and SignUp.tsx

Next we are going to add react router dom

So that your build should now look like this,

We are going to transfer all the contents of App.tsx to the home page except the SignUpForm.

const Home = () => {
  return (
    <div className='min-h-screen flex flex-col '>
      <h1 className='text-3xl font-bold text-yellow-600 flex justify-center items-center'>
        FaceIO authentication using react and typescript
      </h1>

    </div>
  );
};

export default Home

Import the signup component to the sign up page.

import SignupForm from '../components/SignupForm';

const SignUp = () => {
  return (
    <div>
      <SignupForm />
    </div>
  );
};

export default SignUp;

Let us now bring the react route dom into the App.tsx so that we are able to route to different pages of our app.

import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Home from './pages/Home';
import SignUp from './pages/SignUp';

function App() {
  return (
    <div className='min-h-screen flex flex-col justify-center items-center'>
      <BrowserRouter>
        <Routes>
          <Route path='/' element={<Home />} />
          <Route path='signup' element={<SignUp />} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

Since now we have finished the arrangement of our site let us get into the gist of our build.

We are going to create a login function to login through FaceIO (remember we had created a signup function in the previous part).

Then we are going to take the user data we get from FaceIO response and pass it into the state using useContext and useReducer.

Setting up useContext in React and Typescript.

Let us create a new folder in src folder named context and in there a file named StateProvider.tsx, in there we will make userContext provider.

import React, {createContext, ReactNode} from 'react';


export const userContext = createContext()


const StateProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
  return(
    <userContext.Provider value={}>
    {children}
  </userContext.Provider>
  )
};

export default StateProvider;

Because we are using typescript we will need to provide types for our build,

in src/@types/user.d.ts we will create the userContext type.

So our createContext will be of type userContextType since when there will be no user the user will be null.

Now let create a folder helpers in src and in it a file named Reducers.ts

/** src/helpers/Reducer.ts */

import { userContextType, Action } from '../@types/user';


//the initial state of the user
export const initialState = {
  user: null,
};


//the action we are going to take when we login that is set the user
export const actionTypes = {
  SET_USER: 'SET_USER',
};


//the reducer function note the parameter type annotations
export const reducer = (state: userContextType, action: Action) => {
  console.log(action);
  switch (action.type) {
    case actionTypes.SET_USER:
      return {
        ...state,
        user: action.user,
      };
    default:
      return state;
  }
};

There is one type we did not define that is the action type let us update it accordingly

Go to src/@types/user.d.ts and add,

type Action = {
  type: 'SET_USER';
  user: Iuser;
};

Now once we are done with this we can update StateProvider as this,

import React, { createContext, ReactNode, useReducer } from 'react';
import { userContextType } from '../@types/user';
import { initialState, reducer } from '../helpers/Reducers';

export const userContext = createContext<{
  state: userContextType;
  dispatch: React.Dispatch<any>;
}>({
  state: initialState,
  dispatch: () => null,
});

const StateProvider: React.FC<{ children: ReactNode }> = ({ children }) => {

//bring the useReducer hook and feed it with the reducer function and the initial state 

  const [state, dispatch] = useReducer(reducer, initialState);
return (

//update the value with the state and dispatch thus you are able to access this values in any component or page

    <userContext.Provider value={{ state, dispatch }}>
      {children}
    </userContext.Provider>
  );
};

Go to App.tsx import the StateProvider and wrap the entire build with it.

<StateProvider>
      <div className='min-h-screen flex flex-col justify-center items-center'>
        <BrowserRouter>
          <Routes>
            <Route path='/' element={<Home />} />
            <Route path='signup' element={<SignUp />} />
          </Routes>
        </BrowserRouter>
      </div>
</StateProvider>

Let us now create a login component to be able to feed user data to the state.

In the folder componets create a file Login.tsx and in it create a login,

import { Link } from 'react-router-dom';
const Login = () => {
  return (
    <div>
      <h1 className='text-3xl font-bold text-blue-600 mb-4'>
        Welcome, please login
      </h1>
      <button className='w-full p-3  bg-blue-700 rounded-md text-white text-sm mb-4'>
        Login
      </button>
<div>
        <p>You don't have an account? Please sign-up.</p>
        <Link to='/signup'>
          <button className='w-full p-3 bg-white outline-blue-800 rounded-md text-blue-800 text-sm mb-4'>
            Sign Up
          </button>
        </Link>
      </div>
    </div>
  );
};
export default Login;

This component will be our gate guard that will refuse anyone admittance to our site unless they have loged in

So in our home component we will need to make some few changes.

We will query whether there is a user in the state that is if user is not null then we will show the home otherwise we will show
the login component

..... return (
    <div className='min-h-screen flex flex-col '>
      {!state?.user ? (
        <Login />
      ) : (
        <div>
          <h1 className='text-3xl font-bold text-yellow-600 flex justify-center items-center'>
            FaceIO authentication using react and typescript
          </h1>
        </div>
      )}
    </div>
  );

This is how your page should look like by now,

Let us now go back to the login component and update the logic, that is call FaceIO and dispatch user data.

When we call FaceIO to authenticate (FaceIO authentication is documented here), and the authentication is successful we will receive a payload with the data the user provided when they signed up. That payload is what we are going to dispatch to the state.

import React, { useContext, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { userContext } from '../context/StateProvider';
import { actionTypes } from '../helpers/Reducers';
const Login = () => {
  //we load faceIO using a useEffect hook
let faceio: any;
  useEffect(() => {
    faceio = new faceIO('fioa48b7');
  }, []);
//we use a useContext hook dispatch to be able to dispatch our user to the state
  const { dispatch } = useContext(userContext);
//we set up the handle login function
  const handleLogin = async () => {
    try {
      let response = await faceio.authenticate({
        locale: 'auto',
      });
      alert(`
        You have been identified successfully
        Unique Facial ID: ${response.facialId}
          PayLoad: ${JSON.stringify(response.payload)}
          `);
dispatch({ type: actionTypes.SET_USER, user: response.payload });
alert('You have successfully logged in');
    } catch (error) {
      console.log(error);
      alert('Failed to login, please refresh and try again');
    }
  };
return (
    <div className='flex flex-col justify-center items-center'>
      <h1 className='text-3xl font-bold text-blue-600 mb-4'>
        Welcome, please login
      </h1>
      <button onClick={handleLogin} className='w-full p-3  bg-blue-700 rounded-md text-white text-sm mb-4'>
        Login
      </button>
<div>
        <p>You don't have an account? Please sign-up.</p>
        <Link to='/signup'>
          <button

            className='w-full p-3 bg-white outline-blue-800 rounded-md text-blue-800 text-sm mb-4'
          >
            Sign Up
          </button>
        </Link>
      </div>
    </div>
  );
};
export default Login;

Once we are done with that our application is good and ready but let us add a welcome user statement in the home page.
Under the h1 tags add.

<h2 className='text-blue-900 pt-28 font-bold'>
   Welcome {state.user.name} Email:{state.user.email}
</h2>

We are now done, if you were successful, and you try loging in you will see,

The whole of this build can be found in Github, while you are there please add a star to it.

For more on FaceIO

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 back for more content like this.

React-Typescript user sign-up form using FaceIO for face authentication.

John Thiong'o — Thu, 29 Sep 2022 11:23:52 +0000

Hi there,

This is part of a two part series, where I am going to show you how to use React and Typescript coupled with FaceIO to sign-up, authenticate a user and consume user data in your website.

What is FaceIO.

FaceIO is a facial authentication framework to authenticate users via face recognition instead of the traditional login/password. It is implemented via a simple JavaScript snippet (like google tag). More here.

Why use FaceIO.

The simplicity. We all know the complexity and work that goes into creating a way to authenticate users to your website yet all we want to do is to register a user and be able to login the user every time they came back.
In comes FaceIO with the easiest way to add passwordless authentication to your web based application. As we go on you will see how easy it is leaving us with more time to create amazing user experiences.
FaceIO does not add to the bundle size of your project. As we will see we just add a script to the index.html and you are done.
It is compatible with pretty much every browser out there (Chrome, Firefox, Safari, Edge & Chromium derivatives).

Let me now demonstrate the simplicity of FaceIO by building this sign-up form.

Initializing React, Typescript and Tailwind CSS in our project using Vite.

Fire up you favorite code editor and open the bash terminal.

I am going to use yarn so,

yarn create vite

You can use yarn dev — host to host your project and be able to access it via multiple devices.

Let us add Tailwind CSS to our project.

yarn add -D tailwindcss postcss autoprefixer npx tailwindcss init -p

Go into src/tailwind.config.cjs and replace the contents with.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

If you now run yarn dev

Now let me show you how easy it is to add FaceIO to your project.

Go to index.html , note the contents and then replace them with

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>FaceIO authentication using react + ts</title>
  </head>
  <body>
    <script src="https://cdn.faceio.net/fio.js"></script>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

As you can see the only thing we have added is

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

above the <div id=”root”></div>

It is as simple as that. More on the integration here.

Before we begin implementing FaceIO in our project you will need to sign up on FaceIO console. Once you have signed up you will come to this page.

Select NEW FACEIO APPLICATION and follow the prompts.

Once done note the public Id.

Before we continue to creating our sign-up form component let us also bring in tailwind css.

Go to index.css and replace the contents with,

@tailwind base;
@tailwind components;
@tailwind utilities;

Go to app.tsx and replace its contents with this,

function App() {

  return (
    <div className='min-h-screen flex justify-center'>
      <h1 className='text-3xl font-bold text-yellow-600'>
        FaceIO authentication using react and typescript
      </h1>
    </div>
  );
}

export default App;

Your application should now look like this,

Let us now create a new folder named components and in it a file named SignupForm.tsx

We will use react hook form to create our form let us add it to our project.

yarn add react-hook-form @hookform/resolvers yup

Make the necessary imports in the SignupForm.tsx.

import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';

Import the form into app.tsx file and make necessary changes,

Let us create the ui for form.

Under the h1 tags in SignupForm.tsx,

<form className='space-y-6'>
        <div>
          <label
            htmlFor=''
            className='text-sm font-bold backdrop:bold text-gray-600 block'
          >
            Name
          </label>
          <input
            type='text'
            placeholder='name'
            className='w-full p-2 border border-blue-900 rounded mt-1'
          />
        </div>
        <div>
          <label
            htmlFor=''
            className='text-sm font-bold backdrop:bold text-gray-600 block'
          >
            Email
          </label>
          <input
            type='text'
            placeholder='email@mail.com'
            className='w-full p-2 border border-blue-900 rounded mt-1'
          />
        </div>
        <div>
          <button className='w-full py-2 px-4 bg-blue-700 rounded-md text-white text-sm'>
            Sign Up
          </button>
        </div>
</form>

Now for the fun part of adding the logic, first let us create a new folder in the folder src with a file to store our types which we are going to use through out our build let us call it ,

/** src/@types/user.d.ts */

interface Iuser {
  name: string;
  email: string;
}

Back to our form let us define the data that we are going to take from the user and submit to faceIO to register the said user using yup. This should be done above the SignupForm declaration. This will also enable us to alert the user if any errors occur.

const SignupSchema = yup
  .object({
    name: yup.string().required(),
    email: yup.string().required(),
  })
  .required();

Inside the SignupForm function let us use the useForm from react-hook-form. It provides us with some handy functions that will help us to take input from the user and deliver it where we need like, register, handleSubmit and errors, as shown below.

const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<Iuser>({
    resolver: yupResolver(SignupSchema),
  });

Let us also create a onSubmit function that will enable us to submit the data we take from the user to FaceIO.

const onSubmit = (data: Iuser) => {
    alert(JSON.stringify(data));
handleSignUp(data);
  };

As you can see inside there is a handleSignUp function let us define it but before we do that let us load FaceIO into our page using a useEffect hook, make the necessary import of useEffect then,

let faceio: any;
  useEffect(() => {
    faceio = new faceIO('fioxxxxxx');
  }, []);

Note the ‘fioxxxxx’ you should ensure that you have replaced it with your FaceIO public id.

Let us now create the handleSignUp function

const handleSignUp = async (user: Iuser): Promise<any> => {
    try {
      let response: any = await faceio.enroll({
        locale: 'auto',
        payload: {
          name: `${user.name}`,
          email: `${user.email}`,
        },
      });
      alert(
        ` Unique Facial ID: ${response.facialId}
      Enrollment Date: ${response.timestamp}
      Gender: ${response.details.gender}
      Age Approximation: ${response.details.age}
      payload: ${JSON.stringify(response.details)}`
      );
    } catch (error) {
      alert('Unable to register you please refresh page and try again');
    }
  };

As you can see in it we have a try-catch block where in the try block we call a FaceIO function called enroll which takes a payload containing the name of the user and email which we will attain from the form. For more of the enroll function, check this documentation.

Let us now update the form tags to now be able to take in the user data and submit it.

<form className='space-y-6' onSubmit={handleSubmit(onSubmit)}>
//....
<form/>

And the input fields,

<input 
            type='text'
            placeholder='name'
            {...register('name')}
            className='w-full p-2 border border-blue-900 rounded mt-1'
          />
          {errors.name && <p className='text-red-900'>{errors.name.message}</p>}
//email input
<input
            type='text'
            placeholder='email@mail.com'
            {...register('email')}
            className='w-full p-2 border border-blue-900 rounded mt-1'
          />
          {errors.email && (
            <p className='text-red-900'>{errors.email.message}</p>
          )}

And with that we are done the whole sign up form looks like,

import React, { useEffect } from 'react';
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';
const SignupSchema = yup
  .object({
    name: yup.string().required(),
    email: yup.string().required(),
  })
  .required();
const SignupForm = () => {
  let faceio: any;
  useEffect(() => {
    faceio = new faceIO('fioa48b7');
  }, []);
const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<Iuser>({
    resolver: yupResolver(SignupSchema),
  });
//create  a submit function that will submit the data
  const onSubmit = (data: Iuser) => {
    alert(JSON.stringify(data));
handleSignUp(data);
  };
//create a signup function that will submit the data to faceIO by calling the function faceIO enroll
  const handleSignUp = async (user: Iuser): Promise<any> => {
    try {
      let response: any = await faceio.enroll({
        locale: 'auto',
        payload: {
          name: `${user.name}`,
          email: `${user.email}`,
        },
      });
      alert(
        ` Unique Facial ID: ${response.facialId}
      Enrollment Date: ${response.timestamp}
      Gender: ${response.details.gender}
      Age Approximation: ${response.details.age}
      payload: ${JSON.stringify(response.details)}`
      );
    } catch (error) {
      alert('Unable to register you please refresh page and try again');
    }
  };
return (
    <div className='max-w-md mx-auto mt-4 bg-yellow-100 p-8 border border-gray-3000'>
      <h1 className='text-3xl font-bold text-blue-600 pb-5'>
        Sign-up form using FaceIO
      </h1>
<form className='space-y-6' onSubmit={handleSubmit(onSubmit)}>
        <div>
          <label
            htmlFor=''
            className='text-sm font-bold backdrop:bold text-gray-600 block'
          >
            Name
          </label>
          <input
            type='text'
            placeholder='name'
            {...register('name')}
            className='w-full p-2 border border-blue-900 rounded mt-1'
          />
          {errors.name && <p className='text-red-900'>{errors.name.message}</p>}
        </div>
        <div>
          <label
            htmlFor=''
            className='text-sm font-bold backdrop:bold text-gray-600 block'
          >
            Email
          </label>
          <input
            type='text'
            placeholder='email@mail.com'
            {...register('email')}
            className='w-full p-2 border border-blue-900 rounded mt-1'
          />
          {errors.email && (
            <p className='text-red-900'>{errors.email.message}</p>
          )}
        </div>
        <div>
          <button className='w-full py-2 px-4 bg-blue-700 rounded-md text-white text-sm'>
            Sign Up
          </button>
        </div>
      </form>
    </div>
  );
};
export default SignupForm;

This should be the finished product.

In case of errors while inputting the form data.

If everything is ok.

If you have loved this add a star to it over in GitHub.

For more on FaceIO.

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 part two is here, but always check in this space for more.

Log in/Sign up form using FaceIO, Next.js and Tailwind CSS.

John Thiong'o — Wed, 17 Aug 2022 05:28:00 +0000

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.
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.

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.

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 is tailwind.config.js and postcss.config.js by running 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.

<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 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 tags 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 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 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 github.

Since 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.

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.