Project: Passkey Identify Face Auth ( React + Node ).

Click the image above to watch the video ( This is video original ).

Prerequisites

Before you begin, ensure you have the following:

• Node.js installed (version >= 20.0.0 or later)
• Hanko Passkey API key and tenant ID from Hanko Cloud

Note: You'll need to create a Passkey Project on Hanko Cloud with the App URL http://localhost:5173. See our docs to learn how to setup a passkey project.

Getting started.

1. Clone the repository

git clone <repo>

2. Set up environment variables

Create a .env file in the express-backend directory and add the following environment variables:

PASSKEYS_API_SECRET_KEY=your-hanko-passkey-api-key
PASSKEYS_TENANT_ID=your-hanko-passkey-tenant-id

Replace your-hanko-passkey-api-key and your-hanko-passkey-tenant-id with your actual Hanko Passkey API key and tenant ID.

Frontend

1. Navigate to the frontend directory:

cd react-frontend

1. Install the dependencies using your preferred package manager (e.g., npm, pnpm, yarn, or bun). For this project, we've used npm:

npm install

3. Start the frontend development server:

npm run dev

Backend

1. Navigate to the backend directory:

cd express-backend

2. Install the backend dependencies:

npm install

3. Start the backend server:

npm run dev

Usage

1. Start the application:

   • Ensure that both the frontend and backend servers are running.

   • Access the application by navigating to http://localhost:5173 in your web browser.

2. Log in with a pre-configured user: Navigate to login page, login with one of the pre-configured users.

     {
      id: "b3fbbdbd-6bb5-4558-9055-3b54a9469629",
      email: "nguyentientai9@gmail.com",
      fullname: "Nguyen Tien Tai",
      username: "fdhhhdjd",
      password: "sieunhangao",
    },
    {
      id: "22c81b3d-1e7d-4a72-a6b0-ad946e0c0965",
      email: "ronadol@example.com",
      fullname: "Cristiano Ronaldo",
      username: "cr7",
      password: "very_secure_password",
    },
    {
      id: "55c81b3d-1e7d-4a72-a6b0-ad946e0c0965",
      email: "messi@g.com",
      fullname: "Lionel Messi",
      username: "lm10",
      password: "123",
    },

3. Register a passkey:

   • After logging in, register a passkey for the logged-in user.

4. Log out:

   • After the passkey registration is successful, log out of the application.

5. Login with with a passkey

   • On the login page, choose sign in with a passkey option to authenticate using a passkey.

Team Word: Liên hệ công việc https://profile-forme.com

1. Nguyen Tien Tai

Tài Khoản Donate li Cf để có động lực code cho anh em tham khảo 😄.

Mk: NGUYEN TIEN TAI

STK: 1651002972052

Chi Nhánh: NGAN HANG TMCP AN BINH (ABBANK).

SUPPORT CONTACT: https://profile-forme.com

Thank You <3.