This repository demonstrates how to add passkey login functionality to your React and Express app using the Hanko Passkey API. Passkey authentication is a secure and user-friendly alternative to traditional password-based authentication, providing a seamless login experience for users.
For a detailed tutorial on implementing passkey login in your React and Express app, refer to our blog post: How to add a passkey login to your React app
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.
- Clone the repository
git clone https://github.com/teamhanko/passkeys-react-express
- Set up environment variables
Create a .env
file in the express-backend
directory and add the following environment variables:
PASSKEYS_API_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.
- Navigate to the frontend directory:
cd react-frontend
- Install the frontend dependencies using your preferred package manager (e.g.,
npm
,pnpm
,yarn
, orbun
). For this project, we've usedpnpm
:
pnpm install
- Start the frontend development server:
pnpm dev
- Navigate to the backend directory:
cd express-backend
- Install the backend dependencies:
pnpm install
- Start the backend server:
pnpm dev
-
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.
-
-
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": "[email protected]",
"password": "password123",
},
{
"id": "22c81b3d-1e7d-4a72-a6b0-ad946e0c0965",
"email": "[email protected]",
"password": "very_secure_password",
},
{
"id": "55c81b3d-1e7d-4a72-a6b0-ad946e0c0965",
"email": "[email protected]",
"password": "123",
}
-
Register a passkey:
- After logging in, register a passkey for the logged-in user.
-
Log out:
- After the passkey registration is successful, log out of the application.
-
Login with with a passkey
- On the login page, choose sign in with a passkey option to authenticate using a passkey.
Feel free to reach out to us on Discord if you get into any issues.
This project is licensed under the MIT License.