Skip to content

An example web app with passkey authentication, using Hanko Passkey API

License

Notifications You must be signed in to change notification settings

teamhanko/passkeys-webapp

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Integrating Passkey Authentication in a Web App

This repository demonstrates how to add passkey login functionality to your Web 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 Web app, refer to our blog post: Add Passkey Authentication to your Web Application

Passkey demo

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 https://github.com/teamhanko/passkeys-web-app
  1. 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.

Frontend

  1. Navigate to the frontend directory:
cd frontend
  1. Install the frontend dependencies using your preferred package manager (e.g., npm, pnpm, yarn, or bun). For this project, we've used pnpm:
pnpm install
  1. Start the frontend development server:
pnpm dev

Backend

  1. Navigate to the backend directory:
cd backend
  1. Install the backend dependencies:
pnpm install
  1. Start the backend server:
pnpm 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": "[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",
    }
  1. Register a passkey:

    • After logging in, register a passkey for the logged-in user.
  2. Log out:

    • After the passkey registration is successful, log out of the application.
  3. Login with with a passkey

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

Support

Feel free to reach out to us on Discord if you get into any issues.

License

This project is licensed under the MIT License.

About

An example web app with passkey authentication, using Hanko Passkey API

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published