Passkey Authentication Example

A sample implementation of passwordless authentication using Passkeys (WebAuthn).

Overview

This project demonstrates how to implement passwordless authentication using biometric authentication or security keys.

• Implementation example using SimpleWebAuthn
• Complete Passkey registration and authentication flows
• Both client-side and server-side code examples

Setup

# 1. Install dependencies
npm install

# 2. Configure environment variables
cp .env.example .env

# 3. Start development server
npm run dev

The application will be available at http://localhost:5173.

How Passkey Authentication Works

Registration Flow

1. User accesses the Passkey registration page
2. Fetches challenge and options from /api/passkey-registration-options
3. Creates a Passkey using WebAuthn API on the client
4. Verifies and saves the Passkey via /api/passkey-verifications

Authentication Flow

1. User accesses the sign-in page
2. Fetches challenge and options from /api/passkey-authentication-options
3. Authenticates using WebAuthn API on the client
4. Verifies the authentication via /api/passkey-authentication

Key Files

• app/routes/passkey-registration.tsx - Passkey registration page
• app/routes/signin.tsx - Sign-in page
• app/routes/api.passkey-registration-options.ts - Registration options API
• app/routes/api.passkey-verifications.ts - Registration verification API
• app/routes/api.passkey-authentication-options.ts - Authentication options API
• app/routes/api.passkey-authentication.ts - Authentication verification API
• app/helper/passkey.ts - Passkey helper functions

Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Run production build
• npm run typecheck - Run TypeScript type checking

Notes

This is a demonstration project. For production use:

• Replace the in-memory storage (db.server.ts) with a proper database
• Ensure Passkey credentials are stored securely