hrishiksh/App-2.jsx

## App-2.jsx
import "./App.css";

import { useEffect } from "react";

function App() {
  let faceio;

  useEffect(() => {
    faceio = new faceIO("fioa414d");
  }, []);

  const handleRegister = async () => {
    try {
      let response = await faceio.enroll({
        locale: "auto",
        payload: {
          email: "example@gmail.com",
        },
      });

      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);
    }
  };

  return (
        <section className="w-full h-screen flex flex-col items-center justify-center">
      <h1 className="font-sans font-bold text-xl mb-4">
        Face Authentication by FaceIO
      </h1>
      <div className="flex flex-col justify-center items-center">
        <button
          className="block px-4 py-2 outline-none bg-blue-500 rounded text-white mb-2"
          onClick={handleRegister}
        >
          register
        </button>
      </div>
    </section>
  );
}

export default App;

## App-3.jsx
import "./App.css";

import { useEffect } from "react";

function App() {
  let faceio;

  useEffect(() => {
    faceio = new faceIO("fioa414d");
  }, []);

  const handleRegister = 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 className="w-full h-screen flex flex-col items-center justify-center">
      <h1 className="font-sans font-bold text-xl mb-4">
        Face Authentication by FaceIO
      </h1>
      <div className="flex flex-col justify-center items-center">
        <button
          className="block px-4 py-2 outline-none bg-blue-500 rounded text-white mb-2"
          onClick={handleRegister}
        >
          register
        </button>
        <button
          className="block px-4 py-2 outline-none bg-blue-500 rounded text-white"
          onClick={handleLogIn}
        >
          Log-in
        </button>
      </div>
    </section>
  );

}

export default App;

## App.css
@tailwind base;
@tailwind components;
@tailwind utilities;

## App.jsx
import "./App.css";
import { useEffect } from "react";

function App(){
  let faceio;
  useEffect(() => {
    faceio = new faceIO("fioa414d");
  }, []);
}

## index.html
<body>
    <script src="https://cdn.faceio.net/fio.js"></script>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
</body>

## tailwind.config.cjs
/** @type {import('tailwindcss').Config} */

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

## webhook-response.json
{
  "eventName":"String - Event Name",
  "facialId": "String - Unique Facial ID of the Target User",
  "appId":    "String - Application Public ID",
  "clientIp": "String - Public IP Address",
  "details": {
     "timestamp": "Optional String - Event Timestamp",
     "gender":    "Optional String - Gender of the Enrolled User",
     "age":       "Optional String - Age of the Enrolled User"
   }
}
	import "./App.css";

	import { useEffect } from "react";

	function App() {
	let faceio;

	useEffect(() => {
	faceio = new faceIO("fioa414d");
	}, []);

	const handleRegister = async () => {
	try {
	let response = await faceio.enroll({
	locale: "auto",
	payload: {
	email: "example@gmail.com",
	},
	});

	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);
	}
	};

	return (
	<section className="w-full h-screen flex flex-col items-center justify-center">
	<h1 className="font-sans font-bold text-xl mb-4">
	Face Authentication by FaceIO
	</h1>
	<div className="flex flex-col justify-center items-center">
	<button
	className="block px-4 py-2 outline-none bg-blue-500 rounded text-white mb-2"
	onClick={handleRegister}
	>
	register
	</button>
	</div>
	</section>
	);
	}

	export default App;
	import "./App.css";
	import { useEffect } from "react";

	function App(){
	let faceio;
	useEffect(() => {
	faceio = new faceIO("fioa414d");
	}, []);
	}
	<body>
	<script src="https://cdn.faceio.net/fio.js"></script>
	<div id="root"></div>
	<script type="module" src="/src/main.jsx"></script>
	</body>
	/** @type {import('tailwindcss').Config} */

	module.exports = {
	content: [
	"./index.html",
	"./src/*/.{js,ts,jsx,tsx}",
	],
	theme: {
	extend: {},
	},
	plugins: [],
	}
	{
	"eventName":"String - Event Name",
	"facialId": "String - Unique Facial ID of the Target User",
	"appId": "String - Application Public ID",
	"clientIp": "String - Public IP Address",
	"details": {
	"timestamp": "Optional String - Event Timestamp",
	"gender": "Optional String - Gender of the Enrolled User",
	"age": "Optional String - Age of the Enrolled User"
	}
	}