Skip to content

Instantly share code, notes, and snippets.

Created July 28, 2022 08:23
What would you like to do?
FaceIO reactjs gist
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
section {
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
button {
border: none;
background-color: rgb(97, 97, 255);
padding: 10px 50px;
border-radius: 5px;
color: whitesmoke;
margin-top: 20px;
import "./App.css";
import { useEffect } from "react";
function App() {
let faceio;
useEffect(() => {
faceio = new faceIO("fioa414d");
}, []);
const handleSignIn = async () => {
try {
let response = await faceio.enroll({
locale: "auto",
payload: {
email: "",
pin: "12345",
console.log(` Unique Facial ID: ${response.facialId}
Enrollment Date: ${response.timestamp}
Gender: ${response.details.gender}
Age Approximation: ${response.details.age}`);
} catch (error) {
const handleLogIn = async () => {
try {
let response = await faceio.authenticate({
locale: "auto",
console.log(` Unique Facial ID: ${response.facialId}
PayLoad: ${response.payload}
} catch (error) {
return (
<h1>Face Authentication by FaceIO</h1>
<button onClick={handleSignIn}>Sign-in</button>
<button onClick={handleLogIn}>Log-in</button>
export default App;
<!DOCTYPE html>
<html lang="en">
<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 auth</title>
<link rel="preconnect" href="" />
<link rel="preconnect" href="" crossorigin />
<script src=""></script>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
Copy link

dude thanks for this. but i have a problem in the useEffect, it says faceIO is not defined. And i noticed you added a main.jsx file in the index, could that be the import?

Copy link

Hi @Archibeque . You have to add the script tag before root div. Otherwise you will get that error. Out react application is rendered in the root.

main.jsx is added directly inside the index.html because the react project is created using vite and it handles very fast reloading using JavaScript modules natively.

Copy link

Hi Friend, Thanks for the article and it helps. However, what @Archibeque was asking also is the faceIO that you get an error that it is not defined as below:

ERROR in [eslint]
Line 8:17: 'faceIO' is not defined no-undef

Search for the keywords to learn more about each error.

webpack compiled with 1 error and 1 warning

Copy link

Hello @cjavadevw Did you find any solution to it as i am also facing the same issues

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment