Building a Secure Event Booking App with FACEIO and Svelte

Ekemini Samuel - Oct 29 - - Dev Community

In this tutorial, we'll build Authvents with Svelte, an event booking platform, and integrate FACEIO for biometric authentication, allowing users to sign in and access ticket dashboards securely with facial recognition.

What is FACEIO and How Does It Work?

FACEIO is an advanced biometric authentication solution that allows developers to add facial recognition to their web applications. Through FACEIO’s SDK, users can register their face once and log in without passwords.

FACEIO Integration

FACEIO

FACEIO’s features include:

  • Face Enrollment: Users securely register their face during their first interaction with the app.
  • Face Authentication: Users can access their accounts with a facial scan.
  • Anti-Spoofing: FACEIO implements robust measures against spoofing attempts, such as printed photos or videos.

Another great feature of FACEIO is the documentation - which offers a clear guide to using FACEIO

FACEIO is highly configurable and integrates seamlessly with programming languages like Python and JavaScript frameworks like Next.js, Svelte, and React. Let’s walk through how to set up FACEIO within our Svelte app for:

  • Login: Users log in with FACEIO after email/password registration.
  • Dashboard: FACEIO verifies user access to the dashboard.

We'll use localStorage to securely handle session management and store FACEIO credentials.

A snapshot of what we will be building

snaps

Ready? Let's get started!

Prerequisites

Setting Up the Development Environment

  • Install SvelteKit: SvelteKit will serve as our framework due to its efficient routing capabilities and component-based architecture. 
   npm init svelte@next authvents
   cd authvents
   npm install
Enter fullscreen mode Exit fullscreen mode

To open the project folder in VS Code, run this command: code .

Also, ensure your project directory is like so:

project

  • Install Tailwind CSS: We’ll style our application using Tailwind CSS. 
   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode
  • Configure Tailwind: Add Tailwind directives in your main CSS file (e.g., src/app.css). 
   @tailwind base;
   @tailwind components;
   @tailwind utilities;
Enter fullscreen mode Exit fullscreen mode
  • Project Configuration: Import the CSS file into the main layout of your Svelte app. 
   <!-- src/routes/+layout.svelte -->
   <script>
      import "../app.css";
   </script>
   <slot />
Enter fullscreen mode Exit fullscreen mode

Integrating FACEIO with Svelte

We’ll set up FACEIO authentication within our Svelte app, adding Google OAuth for additional login options.

npm install faceio
Enter fullscreen mode Exit fullscreen mode

Setup Authentication in Svelte

We’re using auth/sveltekit for authentication.

Export the Authentication Handler:
Set up hooks.server.ts to export the authentication handler.

   // src/hooks.server.ts
   import { handle } from "./auth";
   export { handle };
Enter fullscreen mode Exit fullscreen mode

Facial Authentication Modal

The FacialAuthenticationModal.svelte component is important to our application's user interface. It prompts users to verify their identity through facial recognition before proceeding with sensitive transactions.

This component accepts three props:

  • modal: A boolean that determines whether the modal is displayed.
  • offAuthModal: A function to close the modal.
  • authenticateNewUser: A function that initiates the facial recognition process.

Also, the modal is styled to appear centered on the screen, with a semi-transparent background to focus user attention. The spring animation creates a smooth entry effect, making the modal visually appealing.

Enter the code for the FacialAuthenticationModal.svelte in the src/components directory

<script lang="ts">
  import { ArrowLeftIcon, EyeIcon, LockIcon } from "lucide-svelte";
  import { spring } from "svelte/motion";
  import { fly } from "svelte/transition";

  // Modal state (passed from the parent)
  export let modal;
  export let offAuthModal;
  export let authenticateNewUser;

  // Motion
  let y = spring(0, { stiffness: 0.1, damping: 0.15 });
</script>

<main
  style="opacity: {modal ? 1 : 0}"
  class="bg-[#1818183a] fixed top-0 left-0 z-40 min-h-[100vh] w-full flex items-center justify-center"
>
  <div
    class="w-[95%] p-6 bg-white md:w-[560px] shadow rounded-xl flex flex-col gap-8"
    transition:fly={{ y: 200, duration: 600 }}
    style="opacity: {modal ? 1 : 0}"
  >
    <div class="flex w-full flex-col gap-2">
      <h2 class="text-xl md:text-2xl flex items-center gap-4 family2">
        <button
          on:click={offAuthModal}
          class="w-12 h-12 rounded-lg hover:bg-[#fafafa] flex items-center justify-center"
        >
          <ArrowLeftIcon class="h-5 w-5" />
        </button>
        Facial Authentication Required
      </h2>
      <span class="block text-base font-normal">
        Please verify your identity to proceed with the transaction.
      </span>
    </div>
    <div class="w-full flex flex-col items-center justify-center gap-4">
      <div class="relative h-24 w-24">
        <div class="absolute inset-0 rounded-full bg-[#1A2E5A]" />
        <div class="absolute inset-2 rounded-full bg-white" />
        <div class="absolute inset-4 rounded-full bg-[#1A2E5A]" />
        <EyeIcon class="absolute inset-6 text-[#00BFA6]" />
      </div>
      <span class="block text-base font-normal pt-3">
        Click the button below to start the facial recognition process.
      </span>
    </div>
    <div class="flex w-full md:items-center md:justify-center">
      <button
        on:click={authenticateNewUser}
        class="px-8 py-3 w-full hover:opacity-40 family2 text-sm md:text-base rounded-lg bg-[#00BFA6] text-white flex items-center justify-center gap-4"
      >
        Start Facial Scan
      </button>
    </div>
  </div>
</main>
Enter fullscreen mode Exit fullscreen mode

Session Management:
Set up the session management in a new layout.server.ts file.

   // src/routes/+layout.server.ts
   import type { LayoutServerLoad } from "./$types";

   export const load: LayoutServerLoad = async (event) => {
      return {
         session: await event.locals.auth(),
      };
   };
Enter fullscreen mode Exit fullscreen mode

Setting Up Authentication Triggers in Authvents Homepage

The homepage will contain buttons for users to sign in with their email and password. The login function will redirect users to the sign-in route provided by SvelteKitAuth.

<!-- src/routes/+page.svelte -->
<script>
   import { page } from "$app/stores";

   async function loginWithEmail() {
      window.location.href = "/auth/signin";
   }

   function navigateToDashboard() {
      window.location.href = "/dashboard";
   }
</script>
Enter fullscreen mode Exit fullscreen mode

Protecting the Dashboard

Create a dashboard route, which will be accessible only if the user is authenticated. We’ll use Svelte’s dynamic routing to restrict access.

  • The Dashboard Route: 
   // src/routes/dashboard/+page.svelte
   import type { PageLoad } from './$types';
   import { redirect } from '@sveltejs/kit';

   export const load: PageLoad = async ({ parent }) => {
      const { session } = await parent();

      if (!session) {
         throw redirect(303, '/');
      }

      return { user: session.user };
   };
Enter fullscreen mode Exit fullscreen mode
  • Display Session Information in Dashboard: Use export let data; in your dashboard to display session details. 
   <!-- src/routes/dashboard/+page.svelte -->
   <script lang="ts">
      export let data;
   </script>

   {#if data.session}
      <p>Welcome, {data.user.name}</p>
   {/if}
Enter fullscreen mode Exit fullscreen mode

FACEIO Integration for Facial Authentication

On the dashboard, allow users to perform a facial scan to authenticate themselves securely.

<!-- src/routes/dashboard/+page.svelte -->
<script>
   import { faceIO } from "faceio";

   const faceio = new faceIO(import.meta.env.PUBLIC_FACEIO_PUBLIC_ID);

   async function authenticateUser() {
      try {
         const response = await faceio.authenticate();
         console.log("Authentication successful:", response);
      } catch (error) {
         console.error("Authentication failed:", error);
      }
   }
</script>

<button on:click={authenticateUser}>Authenticate with FaceIO</button>
Enter fullscreen mode Exit fullscreen mode

Integrate the Svelte Application with FACEIO

Before we proceed with the logic component, follow these steps to setup your account on FACEIO:

FaceIO Console

  • On the FACEIO dashboard, click on New Application to create a FACEIO application, and follow the steps in the application wizard.

When asked to select a Facial Recognition Engine for the application, choose PixLab Insight. The engine will be used for mapping each enrolled user’s face in real-time into a mathematical feature vector, known as a biometric hash, which is, in turn, stored in a sand-boxed binary index. This is used to protect users' data when they are authenticated with FACEIO.

facio app

  • Your new FACEIO app will have an ID number; take note of it, as we'll use it to integrate FACEIO into the web application.

FACEIO appID

Also note the API key, as it'll be used in the application

API Key

  • In the root directory of your Svelte project, create a new file named .env.local and enter this to define the environment variable: 
PUBLIC_FACEIO_PUBLIC_ID=your_faceio_app_id_here
PUBLIC_FACEIO_PUBLIC_KEY=your_faceio_api_key
Enter fullscreen mode Exit fullscreen mode

Replace "your_faceio_app_id_here" with your FACEIO application ID and "your_faceio_api_key" with your FACEIO API key, then add .env.local to your .gitignore file

Now that's done, let's proceed

To set up the Login component, we must integrate the FACEIO SDK and handle user input efficiently.

Run this command in your terminal to install the FACEIO/fiojs NPM package installed for handling facial authentication.

npm i @faceio/fiojs
Enter fullscreen mode Exit fullscreen mode

When it is installed, create an index.jsx file in the app\login\_components directory and initialize FACEIO.

Enter the code like so:

import faceIO from "@faceio/fiojs";
let faceio = new faceIO(process.env.PUBLIC_FACEIO_PUBLIC_KEY);
Enter fullscreen mode Exit fullscreen mode

In the code above, we import the faceIO SDK and then initialize it to a variable.

The API key is stored in the environment variables (.env) file under PUBLIC_FACEIO_PUBLIC_KEY.

Next, set up the form input states to capture the user's email and PIN. These form inputs are managed by creating a state variable called payload. The variable will hold the email and pin values.

We define an onChange function that dynamically updates the payload state based on the user’s input to handle changes in the input fields.

Running the application

Run this command in your terminal to start the application:

npm run dev
Enter fullscreen mode Exit fullscreen mode

Then copy this URL and open it in your browser:
http://localhost:3000

The secure event booking app loads as shown below. Then click on Get Started to sign up or log in.

homepage

Enter your email, set a password (that you can remember 😎), and click on Sign Up.

signup

After you log in, you are redirected to your dashboard to view your ticket details, which is where FACEIO comes in.

You need to be verified to access the ticket information.

dashboard

Then, the FACEIO process begins like so:

prompt

Accept the terms & conditions, allow access to your camera, and get authenticated:

Accept

You will also be prompted to set a PIN code of at least 4 digits and no more than 16 digits

auth

When the authentication is successful and FACEIO confirms you are above 18 years old, you can proceed to view the ticket information. 😎

You can also view the logs of the FACEIO authentication in the console on your browser

console dash

In your FACEIO console dashboard, you can also view the recently enrolled users and their indexed facial IDs to monitor and keep track of the application.

console

And that's it! We have successfully integrated facial authentication using FACEIO into an events ticketing application with Svelte!

To clone the project and run it locally, open your terminal and run this command:

git clone https://github.com/Tabintel/authvents.git
Enter fullscreen mode Exit fullscreen mode

Then run npm install to install all dependencies needed for the project and npm run dev to run the web app.

Get the full source code on GitHub.

Security Features and Privacy Best Practices

FACEIO provides a range of security features that enhance user protection and data integrity, such as rejecting weak PIN codes, preventing duplicate user enrollments, and protecting against deep-fake attacks.

Additionally, it is important to adhere to best practices for privacy when developing applications using FACEIO. For guidance on this, the privacy best practices guideline outlines essential strategies for obtaining user consent and managing personal data effectively.

In this guide, we covered the integration of FACEIO in a Svelte app to create a secure, facial-recognition-based event access system.

Next Steps For YOU:

  • Explore additional features for Authvents: FACEIO offers additional options, like anti-spoofing and fraud detection, which could further enhance security for large-scale events.
  • Ask questions, learn, and contribute to the FACEIO Community forum

If you want to add cutting-edge security and authentication to your projects, sign up on FACEIO today, it’s a powerful tool for easily integrating facial recognition into your applications.

Thank you for reading! 🍻

Resources

Image
The Best Filter Coffee Machine Mistake That Every Beginner Makes
Image
How to update composer

php, productivity, beginners
Image
DUCK (file structure) YOU!

webdev, programming, react, python
Image
15 Best Pinterest Boards Of All Time About Program A Key
Image
14 Misconceptions Common To Bifold Door Repairs
Image
The core architectural components of Azure

beginners
Image
10 Facts About Bifold Doors Repair That Will Instantly Put You In A Good Mood
Image
wow i like this platform..
Image
Cisza w Mieszkaniu: Jak Wyciszyć Swoje Miejsce do Życia?
Image
Adding a Composite Door Cat Flap
Image
Cat Flap Installers
Image
Why Key Programer Is Fast Increasing To Be The Hot Trend For 2023?
Image
The Definitive Guide to JavaScript PDF Viewers

webdev, devops, javascript, programming
Image
rollup-plugin-analyzer usage in trpc scripts

javascript, typescript, trpc, rollup
Image
Visualizing the Lifespans from Adam to Noah
Image
Praktyczne Porady na Wyciszenie Mieszkania: Stwórz Swoją Oazę Ciszy!
Image
TST Cables: Leaders in Oil Exploration Cable Manufacturing
Image
The Advantages of TST Cables’ High Voltage Silicone Wire for Industrial Use
Image
I'm from Non IT Background,Going to start my career with Website Designing and Development. Right now I'm learning HTML
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .