FaceIO reactjs gist
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| *, | |
| *::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; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
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.
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
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
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?