Skip to content

Instantly share code, notes, and snippets.

@hrishiksh

hrishiksh/App.css

Created July 28, 2022 08:23
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save hrishiksh/bf76c98e05f6e85eb46d7e736bae351d to your computer and use it in GitHub Desktop.
Save hrishiksh/bf76c98e05f6e85eb46d7e736bae351d to your computer and use it in GitHub Desktop.
Download ZIP
FaceIO reactjs gist
Raw
App.css
*,
*::before,
*::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;
}
Raw
App.jsx
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: "example@gmail.com",
pin: "12345",
},
});
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);
}
};
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);
}
};
return (
<section>
<h1>Face Authentication by FaceIO</h1>
<button onClick={handleSignIn}>Sign-in</button>
<button onClick={handleLogIn}>Log-in</button>
</section>
);
}
export default App;
Raw
index.html
<!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 auth</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
rel="stylesheet"
/>
</head>
<body>
<script src="https://cdn.faceio.net/fio.js"></script>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
@Archibeque
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?

@hrishiksh
Copy link
Author

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.

@cjavadevw
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]
src\App.jsx
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

@ompatil19
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