From 5773c74abeea47ab1c4aa8f21e5bbf3b9000a46e Mon Sep 17 00:00:00 2001
From: "Kent C. Dodds" <me+github@kentcdodds.com>
Date: Wed, 19 Feb 2025 12:09:03 -0700
Subject: [PATCH] Add WebAuthn passkey authentication support

---
 app/routes/_auth+/login.tsx                   | 109 +++++++++-
 app/routes/_auth+/webauthn+/authentication.ts | 113 +++++++++++
 app/routes/_auth+/webauthn+/registration.ts   | 136 +++++++++++++
 app/routes/_auth+/webauthn+/utils.server.ts   |  89 ++++++++
 app/routes/settings+/profile.index.tsx        |   5 +
 app/routes/settings+/profile.passkeys.tsx     | 191 ++++++++++++++++++
 app/routes/settings+/profile.tsx              |   4 +-
 docs/authentication.md                        |  50 ++++-
 docs/decisions/039-passkeys.md                | 159 +++++++++++++++
 other/svg-icons/passkey.svg                   |   4 +
 package-lock.json                             | 128 ++++++++++++
 package.json                                  |   2 +
 .../migration.sql                             |  20 ++
 prisma/migrations/migration_lock.toml         |   2 +-
 prisma/schema.prisma                          |  18 ++
 server/utils/monitoring.ts                    |   2 +
 tests/e2e/passkey.test.ts                     | 155 ++++++++++++++
 17 files changed, 1181 insertions(+), 6 deletions(-)
 create mode 100644 app/routes/_auth+/webauthn+/authentication.ts
 create mode 100644 app/routes/_auth+/webauthn+/registration.ts
 create mode 100644 app/routes/_auth+/webauthn+/utils.server.ts
 create mode 100644 app/routes/settings+/profile.passkeys.tsx
 create mode 100644 docs/decisions/039-passkeys.md
 create mode 100644 other/svg-icons/passkey.svg
 rename prisma/migrations/{20230914194400_init => 20250207004552_init}/migration.sql (94%)
 create mode 100644 tests/e2e/passkey.test.ts

diff --git a/app/routes/_auth+/login.tsx b/app/routes/_auth+/login.tsx
index d01244912..f75b9f748 100644
--- a/app/routes/_auth+/login.tsx
+++ b/app/routes/_auth+/login.tsx
@@ -1,12 +1,15 @@
 import { getFormProps, getInputProps, useForm } from '@conform-to/react'
 import { getZodConstraint, parseWithZod } from '@conform-to/zod'
 import { type SEOHandle } from '@nasa-gcn/remix-seo'
-import { data, Form, Link, useSearchParams } from 'react-router'
+import { startAuthentication } from '@simplewebauthn/browser'
+import { useOptimistic, useState, useTransition } from 'react'
+import { data, Form, Link, useNavigate, useSearchParams } from 'react-router'
 import { HoneypotInputs } from 'remix-utils/honeypot/react'
 import { z } from 'zod'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
 import { CheckboxField, ErrorList, Field } from '#app/components/forms.tsx'
 import { Spacer } from '#app/components/spacer.tsx'
+import { Icon } from '#app/components/ui/icon.tsx'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
 import { login, requireAnonymous } from '#app/utils/auth.server.ts'
 import {
@@ -14,7 +17,7 @@ import {
 	providerNames,
 } from '#app/utils/connections.tsx'
 import { checkHoneypot } from '#app/utils/honeypot.server.ts'
-import { useIsPending } from '#app/utils/misc.tsx'
+import { getErrorMessage, useIsPending } from '#app/utils/misc.tsx'
 import { PasswordSchema, UsernameSchema } from '#app/utils/user-validation.ts'
 import { type Route } from './+types/login.ts'
 import { handleNewSession } from './login.server.ts'
@@ -30,6 +33,10 @@ const LoginFormSchema = z.object({
 	remember: z.boolean().optional(),
 })
 
+const AuthenticationOptionsSchema = z.object({
+	options: z.object({ challenge: z.string() }),
+}) satisfies z.ZodType<{ options: PublicKeyCredentialRequestOptionsJSON }>
+
 export async function loader({ request }: Route.LoaderArgs) {
 	await requireAnonymous(request)
 	return {}
@@ -165,7 +172,15 @@ export default function LoginPage({ actionData }: Route.ComponentProps) {
 								</StatusButton>
 							</div>
 						</Form>
-						<ul className="mt-5 flex flex-col gap-5 border-b-2 border-t-2 border-border py-3">
+						<hr className="my-4" />
+						<div className="flex flex-col gap-5">
+							<PasskeyLogin
+								redirectTo={redirectTo}
+								remember={fields.remember.value === 'on'}
+							/>
+						</div>
+						<hr className="my-4" />
+						<ul className="flex flex-col gap-5">
 							{providerNames.map((providerName) => (
 								<li key={providerName}>
 									<ProviderConnectionForm
@@ -195,6 +210,94 @@ export default function LoginPage({ actionData }: Route.ComponentProps) {
 	)
 }
 
+const VerificationResponseSchema = z.discriminatedUnion('status', [
+	z.object({
+		status: z.literal('success'),
+		location: z.string(),
+	}),
+	z.object({
+		status: z.literal('error'),
+		error: z.string(),
+	}),
+])
+
+function PasskeyLogin({
+	redirectTo,
+	remember,
+}: {
+	redirectTo: string | null
+	remember: boolean
+}) {
+	const [isPending] = useTransition()
+	const [error, setError] = useState<string | null>(null)
+	const [passkeyMessage, setPasskeyMessage] = useOptimistic<string | null>(
+		'Login with a passkey',
+	)
+	const navigate = useNavigate()
+
+	async function handlePasskeyLogin() {
+		try {
+			setPasskeyMessage('Generating Authentication Options')
+			// Get authentication options from the server
+			const optionsResponse = await fetch('/webauthn/authentication')
+			const json = await optionsResponse.json()
+			const { options } = AuthenticationOptionsSchema.parse(json)
+
+			setPasskeyMessage('Requesting your authorization')
+			const authResponse = await startAuthentication({ optionsJSON: options })
+			setPasskeyMessage('Verifying your passkey')
+
+			// Verify the authentication with the server
+			const verificationResponse = await fetch('/webauthn/authentication', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ authResponse, remember, redirectTo }),
+			})
+
+			const verificationJson = await verificationResponse.json().catch(() => ({
+				status: 'error',
+				error: 'Unknown error',
+			}))
+
+			const parsedResult =
+				VerificationResponseSchema.safeParse(verificationJson)
+			if (!parsedResult.success) {
+				throw new Error(parsedResult.error.message)
+			} else if (parsedResult.data.status === 'error') {
+				throw new Error(parsedResult.data.error)
+			}
+			const { location } = parsedResult.data
+
+			setPasskeyMessage("You're logged in! Navigating...")
+			await navigate(location ?? '/')
+		} catch (e) {
+			const errorMessage = getErrorMessage(e)
+			setError(`Failed to authenticate with passkey: ${errorMessage}`)
+		}
+	}
+
+	return (
+		<form action={handlePasskeyLogin}>
+			<StatusButton
+				id="passkey-login-button"
+				aria-describedby="passkey-login-button-error"
+				className="w-full"
+				status={isPending ? 'pending' : error ? 'error' : 'idle'}
+				type="submit"
+				disabled={isPending}
+			>
+				<span className="inline-flex items-center gap-1.5">
+					<Icon name="passkey" />
+					<span>{passkeyMessage}</span>
+				</span>
+			</StatusButton>
+			<div className="mt-2">
+				<ErrorList errors={[error]} id="passkey-login-button-error" />
+			</div>
+		</form>
+	)
+}
+
 export const meta: Route.MetaFunction = () => {
 	return [{ title: 'Login to Epic Notes' }]
 }
diff --git a/app/routes/_auth+/webauthn+/authentication.ts b/app/routes/_auth+/webauthn+/authentication.ts
new file mode 100644
index 000000000..5ef048ffe
--- /dev/null
+++ b/app/routes/_auth+/webauthn+/authentication.ts
@@ -0,0 +1,113 @@
+import {
+	generateAuthenticationOptions,
+	verifyAuthenticationResponse,
+} from '@simplewebauthn/server'
+import { getSessionExpirationDate } from '#app/utils/auth.server.ts'
+import { prisma } from '#app/utils/db.server.ts'
+import { handleNewSession } from '../login.server.ts'
+import { type Route } from './+types/authentication.ts'
+import {
+	PasskeyLoginBodySchema,
+	getWebAuthnConfig,
+	passkeyCookie,
+} from './utils.server.ts'
+
+export async function loader({ request }: Route.LoaderArgs) {
+	const config = getWebAuthnConfig(request)
+	const options = await generateAuthenticationOptions({
+		rpID: config.rpID,
+		userVerification: 'preferred',
+	})
+
+	const cookieHeader = await passkeyCookie.serialize({
+		challenge: options.challenge,
+	})
+
+	return Response.json({ options }, { headers: { 'Set-Cookie': cookieHeader } })
+}
+
+export async function action({ request }: Route.ActionArgs) {
+	const cookieHeader = request.headers.get('Cookie')
+	const cookie = await passkeyCookie.parse(cookieHeader)
+	const deletePasskeyCookie = await passkeyCookie.serialize('', { maxAge: 0 })
+	try {
+		if (!cookie?.challenge) {
+			throw new Error('Authentication challenge not found')
+		}
+
+		const body = await request.json()
+		const result = PasskeyLoginBodySchema.safeParse(body)
+		if (!result.success) {
+			throw new Error('Invalid authentication response')
+		}
+		const { authResponse, remember, redirectTo } = result.data
+
+		const passkey = await prisma.passkey.findUnique({
+			where: { id: authResponse.id },
+			include: { user: true },
+		})
+		if (!passkey) {
+			throw new Error('Passkey not found')
+		}
+
+		const config = getWebAuthnConfig(request)
+
+		const verification = await verifyAuthenticationResponse({
+			response: authResponse,
+			expectedChallenge: cookie.challenge,
+			expectedOrigin: config.origin,
+			expectedRPID: config.rpID,
+			credential: {
+				id: authResponse.id,
+				publicKey: passkey.publicKey,
+				counter: Number(passkey.counter),
+			},
+		})
+
+		if (!verification.verified) {
+			throw new Error('Authentication verification failed')
+		}
+
+		// Update the authenticator's counter in the DB to the newest count
+		await prisma.passkey.update({
+			where: { id: passkey.id },
+			data: { counter: BigInt(verification.authenticationInfo.newCounter) },
+		})
+
+		const session = await prisma.session.create({
+			select: { id: true, expirationDate: true, userId: true },
+			data: {
+				expirationDate: getSessionExpirationDate(),
+				userId: passkey.userId,
+			},
+		})
+
+		const response = await handleNewSession(
+			{
+				request,
+				session,
+				remember,
+				redirectTo: redirectTo ?? undefined,
+			},
+			{ headers: { 'Set-Cookie': deletePasskeyCookie } },
+		)
+
+		return Response.json(
+			{
+				status: 'success',
+				location: response.headers.get('Location'),
+			},
+			{ headers: response.headers },
+		)
+	} catch (error) {
+		if (error instanceof Response) throw error
+
+		return Response.json(
+			{
+				status: 'error',
+				error: error instanceof Error ? error.message : 'Verification failed',
+			} as const,
+			{ status: 400, headers: { 'Set-Cookie': deletePasskeyCookie } },
+		)
+	}
+}
diff --git a/app/routes/_auth+/webauthn+/registration.ts b/app/routes/_auth+/webauthn+/registration.ts
new file mode 100644
index 000000000..3f7e04008
--- /dev/null
+++ b/app/routes/_auth+/webauthn+/registration.ts
@@ -0,0 +1,136 @@
+import {
+	generateRegistrationOptions,
+	verifyRegistrationResponse,
+} from '@simplewebauthn/server'
+import { requireUserId } from '#app/utils/auth.server.ts'
+import { prisma } from '#app/utils/db.server.ts'
+import { getDomainUrl, getErrorMessage } from '#app/utils/misc.tsx'
+import { type Route } from './+types/registration.ts'
+import {
+	PasskeyCookieSchema,
+	RegistrationResponseSchema,
+	passkeyCookie,
+	getWebAuthnConfig,
+} from './utils.server.ts'
+
+export async function loader({ request }: Route.LoaderArgs) {
+	const userId = await requireUserId(request)
+	const passkeys = await prisma.passkey.findMany({
+		where: { userId },
+		select: { id: true },
+	})
+	const user = await prisma.user.findUniqueOrThrow({
+		where: { id: userId },
+		select: { email: true, name: true, username: true },
+	})
+
+	const config = getWebAuthnConfig(request)
+	const options = await generateRegistrationOptions({
+		rpName: config.rpName,
+		rpID: config.rpID,
+		userName: user.username,
+		userID: new TextEncoder().encode(userId),
+		userDisplayName: user.name ?? user.email,
+		attestationType: 'none',
+		excludeCredentials: passkeys,
+		authenticatorSelection: {
+			residentKey: 'preferred',
+			userVerification: 'preferred',
+		},
+	})
+
+	return Response.json(
+		{ options },
+		{
+			headers: {
+				'Set-Cookie': await passkeyCookie.serialize(
+					PasskeyCookieSchema.parse({
+						challenge: options.challenge,
+						userId: options.user.id,
+					}),
+				),
+			},
+		},
+	)
+}
+
+export async function action({ request }: Route.ActionArgs) {
+	try {
+		const userId = await requireUserId(request)
+
+		const body = await request.json()
+		const result = RegistrationResponseSchema.safeParse(body)
+		if (!result.success) {
+			throw new Error('Invalid registration response')
+		}
+
+		const data = result.data
+
+		// Get challenge from cookie
+		const passkeyCookieData = await passkeyCookie.parse(
+			request.headers.get('Cookie'),
+		)
+		const parsedPasskeyCookieData =
+			PasskeyCookieSchema.safeParse(passkeyCookieData)
+		if (!parsedPasskeyCookieData.success) {
+			throw new Error('No challenge found')
+		}
+		const { challenge, userId: webauthnUserId } = parsedPasskeyCookieData.data
+
+		const domain = new URL(getDomainUrl(request)).hostname
+		const rpID = domain
+		const origin = getDomainUrl(request)
+
+		const verification = await verifyRegistrationResponse({
+			response: data,
+			expectedChallenge: challenge,
+			expectedOrigin: origin,
+			expectedRPID: rpID,
+			requireUserVerification: true,
+		})
+
+		const { verified, registrationInfo } = verification
+		if (!verified || !registrationInfo) {
+			throw new Error('Registration verification failed')
+		}
+		const { credential, credentialDeviceType, credentialBackedUp, aaguid } =
+			registrationInfo
+
+		const existingPasskey = await prisma.passkey.findUnique({
+			where: { id: credential.id },
+			select: { id: true },
+		})
+
+		if (existingPasskey) {
+			throw new Error('This passkey has already been registered')
+		}
+
+		// Create new passkey in database
+		await prisma.passkey.create({
+			data: {
+				id: credential.id,
+				aaguid,
+				publicKey: Buffer.from(credential.publicKey),
+				userId,
+				webauthnUserId,
+				counter: credential.counter,
+				deviceType: credentialDeviceType,
+				backedUp: credentialBackedUp,
+				transports: credential.transports?.join(','),
+			},
+		})
+
+		return Response.json({ status: 'success' } as const, {
+			headers: {
+				'Set-Cookie': await passkeyCookie.serialize('', { maxAge: 0 }),
+			},
+		})
+	} catch (error) {
+		if (error instanceof Response) throw error
+
+		return Response.json(
+			{ status: 'error', error: getErrorMessage(error) } as const,
+			{ status: 400 },
+		)
+	}
+}
diff --git a/app/routes/_auth+/webauthn+/utils.server.ts b/app/routes/_auth+/webauthn+/utils.server.ts
new file mode 100644
index 000000000..aaaf5fc18
--- /dev/null
+++ b/app/routes/_auth+/webauthn+/utils.server.ts
@@ -0,0 +1,89 @@
+import {
+	type AuthenticationResponseJSON,
+	type RegistrationResponseJSON,
+} from '@simplewebauthn/server'
+import { createCookie } from 'react-router'
+import { z } from 'zod'
+import { getDomainUrl } from '#app/utils/misc.tsx'
+
+export const passkeyCookie = createCookie('webauthn-challenge', {
+	path: '/',
+	sameSite: 'lax',
+	httpOnly: true,
+	maxAge: 60 * 60 * 2,
+	secure: process.env.NODE_ENV === 'production',
+	secrets: [process.env.SESSION_SECRET],
+})
+
+export const PasskeyCookieSchema = z.object({
+	challenge: z.string(),
+	userId: z.string(),
+})
+
+export const RegistrationResponseSchema = z.object({
+	id: z.string(),
+	rawId: z.string(),
+	response: z.object({
+		clientDataJSON: z.string(),
+		attestationObject: z.string(),
+		transports: z
+			.array(
+				z.enum([
+					'ble',
+					'cable',
+					'hybrid',
+					'internal',
+					'nfc',
+					'smart-card',
+					'usb',
+				]),
+			)
+			.optional(),
+	}),
+	authenticatorAttachment: z.enum(['cross-platform', 'platform']).optional(),
+	clientExtensionResults: z.object({
+		credProps: z
+			.object({
+				rk: z.boolean(),
+			})
+			.optional(),
+	}),
+	type: z.literal('public-key'),
+}) satisfies z.ZodType<RegistrationResponseJSON>
+
+const AuthenticationResponseSchema = z.object({
+	id: z.string(),
+	rawId: z.string(),
+	response: z.object({
+		clientDataJSON: z.string(),
+		authenticatorData: z.string(),
+		signature: z.string(),
+		userHandle: z.string().optional(),
+	}),
+	type: z.literal('public-key'),
+	clientExtensionResults: z.object({
+		appid: z.boolean().optional(),
+		credProps: z
+			.object({
+				rk: z.boolean().optional(),
+			})
+			.optional(),
+		hmacCreateSecret: z.boolean().optional(),
+	}),
+}) satisfies z.ZodType<AuthenticationResponseJSON>
+
+export const PasskeyLoginBodySchema = z.object({
+	authResponse: AuthenticationResponseSchema,
+	remember: z.boolean().default(false),
+	redirectTo: z.string().nullable(),
+})
+
+export function getWebAuthnConfig(request: Request) {
+	const url = new URL(getDomainUrl(request))
+
+	return {
+		rpName: url.hostname,
+		rpID: url.hostname,
+		origin: url.origin,
+	} as const
+}
diff --git a/app/routes/settings+/profile.index.tsx b/app/routes/settings+/profile.index.tsx
index 49a215065..8ce5e9066 100644
--- a/app/routes/settings+/profile.index.tsx
+++ b/app/routes/settings+/profile.index.tsx
@@ -154,6 +154,11 @@ export default function EditUserProfile({ loaderData }: Route.ComponentProps) {
 						<Icon name="link-2">Manage connections</Icon>
 					</Link>
 				</div>
+				<div>
+					<Link to="passkeys">
+						<Icon name="passkey">Manage passkeys</Icon>
+					</Link>
+				</div>
 				<div>
 					<Link
 						reloadDocument
diff --git a/app/routes/settings+/profile.passkeys.tsx b/app/routes/settings+/profile.passkeys.tsx
new file mode 100644
index 000000000..12f8c6c74
--- /dev/null
+++ b/app/routes/settings+/profile.passkeys.tsx
@@ -0,0 +1,191 @@
+import { startRegistration } from '@simplewebauthn/browser'
+import { formatDistanceToNow } from 'date-fns'
+import { useState } from 'react'
+import { Form, useRevalidator } from 'react-router'
+import { z } from 'zod'
+import { Button } from '#app/components/ui/button.tsx'
+import { Icon } from '#app/components/ui/icon.tsx'
+import { requireUserId } from '#app/utils/auth.server.ts'
+import { prisma } from '#app/utils/db.server.ts'
+import { type Route } from './+types/profile.passkeys.ts'
+
+export const handle = {
+	breadcrumb: <Icon name="passkey">Passkeys</Icon>,
+}
+
+export async function loader({ request }: Route.LoaderArgs) {
+	const userId = await requireUserId(request)
+	const passkeys = await prisma.passkey.findMany({
+		where: { userId },
+		orderBy: { createdAt: 'desc' },
+		select: {
+			id: true,
+			deviceType: true,
+			createdAt: true,
+		},
+	})
+	return { passkeys }
+}
+
+export async function action({ request }: Route.ActionArgs) {
+	const userId = await requireUserId(request)
+	const formData = await request.formData()
+	const intent = formData.get('intent')
+
+	if (intent === 'delete') {
+		const passkeyId = formData.get('passkeyId')
+		if (typeof passkeyId !== 'string') {
+			return Response.json(
+				{ status: 'error', error: 'Invalid passkey ID' },
+				{ status: 400 },
+			)
+		}
+
+		await prisma.passkey.delete({
+			where: {
+				id: passkeyId,
+				userId, // Ensure the passkey belongs to the user
+			},
+		})
+		return Response.json({ status: 'success' })
+	}
+
+	return Response.json(
+		{ status: 'error', error: 'Invalid intent' },
+		{ status: 400 },
+	)
+}
+
+const RegistrationOptionsSchema = z.object({
+	options: z.object({
+		rp: z.object({
+			id: z.string(),
+			name: z.string(),
+		}),
+		user: z.object({
+			id: z.string(),
+			name: z.string(),
+			displayName: z.string(),
+		}),
+		challenge: z.string(),
+		pubKeyCredParams: z.array(
+			z.object({
+				type: z.literal('public-key'),
+				alg: z.number(),
+			}),
+		),
+		authenticatorSelection: z
+			.object({
+				authenticatorAttachment: z
+					.enum(['platform', 'cross-platform'])
+					.optional(),
+				residentKey: z
+					.enum(['required', 'preferred', 'discouraged'])
+					.optional(),
+				userVerification: z
+					.enum(['required', 'preferred', 'discouraged'])
+					.optional(),
+				requireResidentKey: z.boolean().optional(),
+			})
+			.optional(),
+	}),
+}) satisfies z.ZodType<{ options: PublicKeyCredentialCreationOptionsJSON }>
+
+export default function Passkeys({ loaderData }: Route.ComponentProps) {
+	const revalidator = useRevalidator()
+	const [error, setError] = useState<string | null>(null)
+
+	async function handlePasskeyRegistration() {
+		try {
+			setError(null)
+			const resp = await fetch('/webauthn/registration')
+			const jsonResult = await resp.json()
+			const parsedResult = RegistrationOptionsSchema.parse(jsonResult)
+
+			const regResult = await startRegistration({
+				optionsJSON: parsedResult.options,
+			})
+
+			const verificationResp = await fetch('/webauthn/registration', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify(regResult),
+			})
+
+			if (!verificationResp.ok) {
+				throw new Error('Failed to verify registration')
+			}
+
+			void revalidator.revalidate()
+		} catch (err) {
+			console.error('Failed to create passkey:', err)
+			setError('Failed to create passkey. Please try again.')
+		}
+	}
+
+	return (
+		<div className="flex flex-col gap-6">
+			<div className="flex justify-between gap-4">
+				<h1 className="text-h1">Passkeys</h1>
+				<form action={handlePasskeyRegistration}>
+					<Button
+						type="submit"
+						variant="secondary"
+						className="flex items-center gap-2"
+					>
+						<Icon name="plus">Register new passkey</Icon>
+					</Button>
+				</form>
+			</div>
+
+			{error ? (
+				<div className="rounded-lg bg-destructive/15 p-4 text-destructive">
+					{error}
+				</div>
+			) : null}
+
+			{loaderData.passkeys.length ? (
+				<ul className="flex flex-col gap-4" title="passkeys">
+					{loaderData.passkeys.map((passkey) => (
+						<li
+							key={passkey.id}
+							className="flex items-center justify-between gap-4 rounded-lg border border-muted-foreground p-4"
+						>
+							<div className="flex flex-col gap-2">
+								<div className="flex items-center gap-2">
+									<Icon name="lock-closed" />
+									<span className="font-semibold">
+										{passkey.deviceType === 'platform'
+											? 'Device'
+											: 'Security Key'}
+									</span>
+								</div>
+								<div className="text-sm text-muted-foreground">
+									Registered {formatDistanceToNow(new Date(passkey.createdAt))}{' '}
+									ago
+								</div>
+							</div>
+							<Form method="POST">
+								<input type="hidden" name="passkeyId" value={passkey.id} />
+								<Button
+									type="submit"
+									name="intent"
+									value="delete"
+									variant="destructive"
+									size="sm"
+									className="flex items-center gap-2"
+								>
+									<Icon name="trash">Delete</Icon>
+								</Button>
+							</Form>
+						</li>
+					))}
+				</ul>
+			) : (
+				<div className="text-center text-muted-foreground">
+					No passkeys registered yet
+				</div>
+			)}
+		</div>
+	)
+}
diff --git a/app/routes/settings+/profile.tsx b/app/routes/settings+/profile.tsx
index 8b29472eb..53c296b85 100644
--- a/app/routes/settings+/profile.tsx
+++ b/app/routes/settings+/profile.tsx
@@ -66,7 +66,9 @@ export default function EditUserProfile() {
 								'text-muted-foreground': i < arr.length - 1,
 							})}
 						>
-							▶️ {breadcrumb}
+							<Icon name="arrow-right" size="sm">
+								{breadcrumb}
+							</Icon>
 						</li>
 					))}
 				</ul>
diff --git a/docs/authentication.md b/docs/authentication.md
index 25e342523..4ffedd9d6 100644
--- a/docs/authentication.md
+++ b/docs/authentication.md
@@ -3,10 +3,11 @@
 The Epic Stack manages its own authentication using web standards and
 established libraries and tools.
 
-By default, the Epic Stack offers you two mechanisms for authentication:
+By default, the Epic Stack offers you three mechanisms for authentication:
 
 1. Username and password authentication
 2. Provider authentication
+3. Passkey authentication
 
 ## Username and password authentication
 
@@ -92,6 +93,53 @@ Also make sure to register separate additional OAuth apps for each of your
 deployed environments (e.g. `staging` and `production`) and specify
 corresponding homepage and redirect urls in there.
 
+## Passkey Authentication
+
+The Epic Stack includes support for passkey authentication using the WebAuthn
+standard. Passkeys provide a more secure, phishing-resistant alternative to
+traditional passwords. They can be stored in your device's secure hardware (like
+Touch ID, Face ID, or Windows Hello) or in external security keys.
+
+Users can register multiple passkeys for their account through the passkeys
+settings page. Each passkey can be either device-bound (platform authenticator)
+or portable (cross-platform authenticator like a security key). The
+implementation uses the
+[@simplewebauthn/server](https://npm.im/simplewebauthn/server) and
+[@simplewebauthn/browser](https://npm.im/simplewebauthn/browser) packages to
+handle the WebAuthn protocol.
+
+When a user attempts to log in with a passkey:
+
+1. The server generates a challenge
+2. The browser prompts the user to authenticate using one of their registered
+   passkeys
+3. Upon successful authentication, the user is logged in without needing to
+   enter a password
+
+Passkeys offer several advantages:
+
+- No passwords to remember or type
+- Phishing-resistant (tied to specific domains)
+- Biometric authentication when available
+- Can be synced across devices (if the user is using a manager like
+  [1Password](https://1password.com/))
+- Support for both built-in authenticators (like Touch ID) and external security
+  keys
+
+The passkey data is stored in the database using a `Passkey` model which tracks:
+
+- A unique identifier (`id`) for each passkey
+- The authenticator's AAGUID (a unique identifier for the make and model of the
+  authenticator). This can be used to help the user identify which managers
+  their passkeys are from if they have multiple managers.
+- The public key used for verification
+- A counter to prevent replay attacks
+- The device type (platform or cross-platform)
+- Whether the credential is backed up
+- Optional transport methods (USB, NFC, etc.)
+- Creation and update timestamps
+- The relationship to the user who owns the passkey
+
 ## TOTP and Two-Factor Authentication
 
 Two factor authentication is built-into the Epic Stack. It's managed using a the
diff --git a/docs/decisions/039-passkeys.md b/docs/decisions/039-passkeys.md
new file mode 100644
index 000000000..af37ca62e
--- /dev/null
+++ b/docs/decisions/039-passkeys.md
@@ -0,0 +1,159 @@
+# Passkeys
+
+Date: 2025-02-19
+
+Status: accepted
+
+## Context
+
+The Epic Stack has traditionally supported two primary authentication methods:
+username/password and OAuth providers. While these methods are widely used, they
+come with various security challenges:
+
+1. Password-based authentication:
+
+   - Users often reuse passwords across services
+   - Passwords can be phished or stolen
+   - Password management is a burden for users
+   - Password reset flows are complex and potential security vectors
+
+2. OAuth providers:
+   - Dependency on third-party services
+   - Privacy concerns with data sharing
+   - Not all users have or want to use social accounts
+   - Service outages can affect authentication
+
+The web platform now supports WebAuthn, a standard for passwordless
+authentication that enables the use of passkeys. Passkeys represent a
+significant advancement in authentication security and user experience.
+
+WebAuthn (Web Authentication) is a web standard published by the W3C that
+enables strong authentication using public key cryptography instead of
+passwords. The standard allows websites to register and authenticate users
+using:
+
+1. Platform authenticators built into devices (like Touch ID, Face ID,
+   1Password, etc.)
+2. Roaming authenticators (security keys, phones acting as security keys)
+
+The authentication flow works as follows:
+
+1. Registration:
+
+   - Server generates a challenge and sends registration options
+   - Client creates a new key pair and signs the challenge with the private key
+   - Public key and metadata are sent to the server for storage
+   - Private key remains securely stored in the authenticator
+
+2. Authentication:
+
+   - Server generates a new challenge
+   - Client signs it with the stored private key
+   - Server verifies the signature using the stored public key
+
+This provides several security benefits:
+
+- Private keys never leave the authenticator
+- Each credential is unique to the website (preventing phishing)
+- Biometric/PIN verification happens locally
+- No shared secrets are stored on servers
+
+### Multiple Authentication Strategies
+
+While passkeys represent the future of authentication, we maintain support for
+password and OAuth authentication because:
+
+1. Adoption and Transition:
+
+   - Passkey support is still rolling out across platforms and browsers
+   - Users need time to become comfortable with the new technology
+   - Organizations may have existing requirements for specific auth methods
+
+2. Fallback Options:
+
+   - Some users may not have compatible devices
+   - Enterprise environments might restrict biometric authentication
+   - Backup authentication methods provide reliability
+
+3. User Choice:
+
+   - Different users have different security/convenience preferences
+   - Some scenarios may require specific authentication types
+   - Supporting multiple methods maximizes accessibility
+
+By supporting all three methods, we provide a smooth transition path to passkeys
+while ensuring no users are left behind.
+
+## Decision
+
+We will implement passkey support in the Epic Stack using the SimpleWebAuthn
+libraries (@simplewebauthn/server and @simplewebauthn/browser) which provide a
+robust implementation of the WebAuthn standard. The implementation will:
+
+1. Allow users to register multiple passkeys for their account
+2. Support both platform authenticators (built into devices) and cross-platform
+   authenticators (security keys)
+3. Store passkey data in a dedicated Prisma model that tracks:
+   - Authenticator metadata (AAGUID, device type, transports)
+   - Security information (public key, counter)
+   - User relationship and timestamps
+4. Provide a clean UI for managing passkeys in the user settings
+5. Support passkey-based login as a first-class authentication method
+
+We chose SimpleWebAuthn because:
+
+- It's well-maintained and widely used
+- It provides type-safe implementations for both client and server
+- It handles the complexity of the WebAuthn specification
+- It supports all major browsers and platforms
+
+## Consequences
+
+### Positive:
+
+1. Enhanced Security for Users:
+
+   - Phishing-resistant authentication adds protection against common attacks
+   - Hardware-backed security provides stronger guarantees than passwords alone
+   - Biometric authentication reduces risk of credential sharing
+
+2. Improved User Experience Options:
+
+   - Users can choose between password, OAuth, or passkey based on their needs
+   - Native biometric flows provide fast and familiar authentication
+   - Password manager integration enables seamless cross-device access
+   - Multiple authentication methods increase accessibility
+
+3. Future-Proofing Authentication:
+
+   - Adoption of web standard
+   - Gradual transition path as passkey support grows
+   - Meeting evolving security best practices
+
+### Negative:
+
+1. Implementation Complexity:
+
+   - WebAuthn is a complex specification
+   - Need to handle various device capabilities
+   - Must maintain backward compatibility
+   - Need to maintain password-based auth as fallback
+
+2. User Education:
+
+   - New technology requires user education
+   - Some users may be hesitant to adopt
+   - Need clear documentation and UI guidance
+
+### Neutral:
+
+1. Data Storage:
+
+   - New database model for passkeys
+   - Additional storage requirements per user
+   - Migration path for existing users
+
+2. Testing:
+   - New test infrastructure for WebAuthn
+   - Mock authenticator support for development
+   - Additional e2e test scenarios
diff --git a/other/svg-icons/passkey.svg b/other/svg-icons/passkey.svg
new file mode 100644
index 000000000..8a2f6add9
--- /dev/null
+++ b/other/svg-icons/passkey.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="30.96 35.2 141.45 151.95">
+  <path fill="currentColor" d="M172.32 96.79c0 13.78-8.48 25.5-20.29 29.78l7.14 11.83-10.57 13 10.57 12.71-17.04 22.87-12.01-12.82V125.7c-10.68-4.85-18.15-15.97-18.15-28.91 0-17.4 13.51-31.51 30.18-31.51 16.66 0 30.17 14.11 30.17 31.51zm-30.18 4.82c4.02 0 7.28-3.4 7.28-7.6 0-4.2-3.26-7.61-7.28-7.61s-7.28 3.4-7.28 7.61c-.01 4.2 3.26 7.6 7.28 7.6z"/>
+  <path fill="currentColor" d="M172.41 96.88c0 13.62-8.25 25.23-19.83 29.67l6.58 11.84-9.73 13 9.73 12.71-17.03 23.05v-85.54c4.02 0 7.28-3.41 7.28-7.6 0-4.2-3.26-7.61-7.28-7.61V65.28c16.73 0 30.28 14.15 30.28 31.6zm-52.17 34.55c-9.75-8-16.3-20.3-17.2-34.27H50.8c-10.96 0-19.84 9.01-19.84 20.13v25.17c0 5.56 4.44 10.07 9.92 10.07h69.44c5.48 0 9.92-4.51 9.92-10.07v-11.03zm-47.08-40.3c-2.42-.46-4.82-.89-7.11-1.86-8.65-3.63-13.69-10.32-15.32-19.77-1.12-6.47-.59-12.87 2.03-18.92 3.72-8.6 10.39-13.26 19.15-14.84 5.24-.94 10.46-.73 15.5 1.15 7.59 2.82 12.68 8.26 15.03 16.24 2.38 8.05 2.03 16.1-1.56 23.72-3.72 7.96-10.21 12.23-18.42 13.9-.68.14-1.37.27-2.05.41-2.41-.03-4.83-.03-7.25-.03z"/>
+</svg>
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 1707686ea..7a346c0f4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -35,6 +35,8 @@
         "@sentry/node": "^8.54.0",
         "@sentry/profiling-node": "^8.54.0",
         "@sentry/react": "^8.54.0",
+        "@simplewebauthn/browser": "^13.1.0",
+        "@simplewebauthn/server": "^13.1.1",
         "@tusbar/cache-control": "1.0.2",
         "address": "^2.0.3",
         "bcryptjs": "^2.4.3",
@@ -1460,6 +1462,12 @@
       "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==",
       "license": "MIT"
     },
+    "node_modules/@hexagon/base64": {
+      "version": "1.1.28",
+      "resolved": "https://registry.npmjs.org/@hexagon/base64/-/base64-1.1.28.tgz",
+      "integrity": "sha512-lhqDEAvWixy3bZ+UOYbPwUbBkwBq5C1LAJ/xPC8Oi+lL54oyakv/npbA0aU2hgCsx/1NUd4IBvV03+aUBWxerw==",
+      "license": "MIT"
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -1748,6 +1756,12 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@levischuck/tiny-cbor": {
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/@levischuck/tiny-cbor/-/tiny-cbor-0.2.8.tgz",
+      "integrity": "sha512-Es+ajyTgqHREY9Fch5xPnZIDiTqgZc3dH3XU1/YWn8UsaOD8G8zhyhDib/UYgx31manKa7ZszKaLtcHKcGNchA==",
+      "license": "MIT"
+    },
     "node_modules/@mjackson/form-data-parser": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/@mjackson/form-data-parser/-/form-data-parser-0.7.0.tgz",
@@ -2613,6 +2627,64 @@
         "@noble/hashes": "^1.1.5"
       }
     },
+    "node_modules/@peculiar/asn1-android": {
+      "version": "2.3.15",
+      "resolved": "https://registry.npmjs.org/@peculiar/asn1-android/-/asn1-android-2.3.15.tgz",
+      "integrity": "sha512-8U2TIj59cRlSXTX2d0mzUKP7whfWGFMzTeC3qPgAbccXFrPNZLaDhpNEdG5U2QZ/tBv/IHlCJ8s+KYXpJeop6w==",
+      "license": "MIT",
+      "dependencies": {
+        "@peculiar/asn1-schema": "^2.3.15",
+        "asn1js": "^3.0.5",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/@peculiar/asn1-ecc": {
+      "version": "2.3.15",
+      "resolved": "https://registry.npmjs.org/@peculiar/asn1-ecc/-/asn1-ecc-2.3.15.tgz",
+      "integrity": "sha512-/HtR91dvgog7z/WhCVdxZJ/jitJuIu8iTqiyWVgRE9Ac5imt2sT/E4obqIVGKQw7PIy+X6i8lVBoT6wC73XUgA==",
+      "license": "MIT",
+      "dependencies": {
+        "@peculiar/asn1-schema": "^2.3.15",
+        "@peculiar/asn1-x509": "^2.3.15",
+        "asn1js": "^3.0.5",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/@peculiar/asn1-rsa": {
+      "version": "2.3.15",
+      "resolved": "https://registry.npmjs.org/@peculiar/asn1-rsa/-/asn1-rsa-2.3.15.tgz",
+      "integrity": "sha512-p6hsanvPhexRtYSOHihLvUUgrJ8y0FtOM97N5UEpC+VifFYyZa0iZ5cXjTkZoDwxJ/TTJ1IJo3HVTB2JJTpXvg==",
+      "license": "MIT",
+      "dependencies": {
+        "@peculiar/asn1-schema": "^2.3.15",
+        "@peculiar/asn1-x509": "^2.3.15",
+        "asn1js": "^3.0.5",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/@peculiar/asn1-schema": {
+      "version": "2.3.15",
+      "resolved": "https://registry.npmjs.org/@peculiar/asn1-schema/-/asn1-schema-2.3.15.tgz",
+      "integrity": "sha512-QPeD8UA8axQREpgR5UTAfu2mqQmm97oUqahDtNdBcfj3qAnoXzFdQW+aNf/tD2WVXF8Fhmftxoj0eMIT++gX2w==",
+      "license": "MIT",
+      "dependencies": {
+        "asn1js": "^3.0.5",
+        "pvtsutils": "^1.3.6",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/@peculiar/asn1-x509": {
+      "version": "2.3.15",
+      "resolved": "https://registry.npmjs.org/@peculiar/asn1-x509/-/asn1-x509-2.3.15.tgz",
+      "integrity": "sha512-0dK5xqTqSLaxv1FHXIcd4Q/BZNuopg+u1l23hT9rOmQ1g4dNtw0g/RnEi+TboB0gOwGtrWn269v27cMgchFIIg==",
+      "license": "MIT",
+      "dependencies": {
+        "@peculiar/asn1-schema": "^2.3.15",
+        "asn1js": "^3.0.5",
+        "pvtsutils": "^1.3.6",
+        "tslib": "^2.8.1"
+      }
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -4693,6 +4765,30 @@
         "node": ">= 14"
       }
     },
+    "node_modules/@simplewebauthn/browser": {
+      "version": "13.1.0",
+      "resolved": "https://registry.npmjs.org/@simplewebauthn/browser/-/browser-13.1.0.tgz",
+      "integrity": "sha512-WuHZ/PYvyPJ9nxSzgHtOEjogBhwJfC8xzYkPC+rR/+8chl/ft4ngjiK8kSU5HtRJfczupyOh33b25TjYbvwAcg==",
+      "license": "MIT"
+    },
+    "node_modules/@simplewebauthn/server": {
+      "version": "13.1.1",
+      "resolved": "https://registry.npmjs.org/@simplewebauthn/server/-/server-13.1.1.tgz",
+      "integrity": "sha512-1hsLpRHfSuMB9ee2aAdh0Htza/X3f4djhYISrggqGe3xopNjOcePiSDkDDoPzDYaaMCrbqGP1H2TYU7bgL9PmA==",
+      "license": "MIT",
+      "dependencies": {
+        "@hexagon/base64": "^1.1.27",
+        "@levischuck/tiny-cbor": "^0.2.2",
+        "@peculiar/asn1-android": "^2.3.10",
+        "@peculiar/asn1-ecc": "^2.3.8",
+        "@peculiar/asn1-rsa": "^2.3.8",
+        "@peculiar/asn1-schema": "^2.3.8",
+        "@peculiar/asn1-x509": "^2.3.8"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
     "node_modules/@sindresorhus/merge-streams": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-4.0.0.tgz",
@@ -6664,6 +6760,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/asn1js": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/asn1js/-/asn1js-3.0.5.tgz",
+      "integrity": "sha512-FVnvrKJwpt9LP2lAMl8qZswRNm3T4q9CON+bxldk2iwk3FFpuwhx2FfinyitizWHsVYyaY+y5JzDR0rCMV5yTQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "pvtsutils": "^1.3.2",
+        "pvutils": "^1.1.3",
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/assertion-error": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
@@ -13045,6 +13155,24 @@
         "node": ">=6"
       }
     },
+    "node_modules/pvtsutils": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/pvtsutils/-/pvtsutils-1.3.6.tgz",
+      "integrity": "sha512-PLgQXQ6H2FWCaeRak8vvk1GW462lMxB5s3Jm673N82zI4vqtVUPuZdffdZbPDFRoU8kAhItWFtPCWiPpp4/EDg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/pvutils": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/pvutils/-/pvutils-1.1.3.tgz",
+      "integrity": "sha512-pMpnA0qRdFp32b1sJl1wOJNxZLQ2cbQx+k6tjNtZ8CpvVhNqEPRgivZ2WOUev2YMajecdH7ctUPDvEe87nariQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/qrcode": {
       "version": "1.5.4",
       "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
diff --git a/package.json b/package.json
index 0c447767d..fe6468bb8 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,8 @@
     "@sentry/node": "^8.54.0",
     "@sentry/profiling-node": "^8.54.0",
     "@sentry/react": "^8.54.0",
+    "@simplewebauthn/browser": "^13.1.0",
+    "@simplewebauthn/server": "^13.1.1",
     "@tusbar/cache-control": "1.0.2",
     "address": "^2.0.3",
     "bcryptjs": "^2.4.3",
diff --git a/prisma/migrations/20230914194400_init/migration.sql b/prisma/migrations/20250207004552_init/migration.sql
similarity index 94%
rename from prisma/migrations/20230914194400_init/migration.sql
rename to prisma/migrations/20250207004552_init/migration.sql
index 5ee0147e9..faae5204d 100644
--- a/prisma/migrations/20230914194400_init/migration.sql
+++ b/prisma/migrations/20250207004552_init/migration.sql
@@ -105,6 +105,22 @@ CREATE TABLE "Connection" (
     CONSTRAINT "Connection_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE CASCADE ON UPDATE CASCADE
 );
 
+-- CreateTable
+CREATE TABLE "Passkey" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "aaguid" TEXT NOT NULL,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" DATETIME NOT NULL,
+    "publicKey" BLOB NOT NULL,
+    "userId" TEXT NOT NULL,
+    "webauthnUserId" TEXT NOT NULL,
+    "counter" BIGINT NOT NULL,
+    "deviceType" TEXT NOT NULL,
+    "backedUp" BOOLEAN NOT NULL,
+    "transports" TEXT,
+    CONSTRAINT "Passkey_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE CASCADE ON UPDATE CASCADE
+);
+
 -- CreateTable
 CREATE TABLE "_PermissionToRole" (
     "A" TEXT NOT NULL,
@@ -157,6 +173,9 @@ CREATE UNIQUE INDEX "Verification_target_type_key" ON "Verification"("target", "
 -- CreateIndex
 CREATE UNIQUE INDEX "Connection_providerName_providerId_key" ON "Connection"("providerName", "providerId");
 
+-- CreateIndex
+CREATE INDEX "Passkey_userId_idx" ON "Passkey"("userId");
+
 -- CreateIndex
 CREATE UNIQUE INDEX "_PermissionToRole_AB_unique" ON "_PermissionToRole"("A", "B");
 
@@ -169,6 +188,7 @@ CREATE UNIQUE INDEX "_RoleToUser_AB_unique" ON "_RoleToUser"("A", "B");
 -- CreateIndex
 CREATE INDEX "_RoleToUser_B_index" ON "_RoleToUser"("B");
 
+
 --------------------------------- Manual Seeding --------------------------
 -- Hey there, Kent here! This is how you can reliably seed your database with
 -- some data. You edit the migration.sql file and that will handle it for you.
diff --git a/prisma/migrations/migration_lock.toml b/prisma/migrations/migration_lock.toml
index e5e5c4705..e1640d1f2 100644
--- a/prisma/migrations/migration_lock.toml
+++ b/prisma/migrations/migration_lock.toml
@@ -1,3 +1,3 @@
 # Please do not edit this file manually
-# It should be added in your version-control system (i.e. Git)
+# It should be added in your version-control system (e.g., Git)
 provider = "sqlite"
\ No newline at end of file
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 975d2431a..68f332d11 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -25,6 +25,7 @@ model User {
   roles       Role[]
   sessions    Session[]
   connections Connection[]
+  passkey     Passkey[]
 }
 
 model Note {
@@ -167,3 +168,20 @@ model Connection {
 
   @@unique([providerName, providerId])
 }
+
+model Passkey {
+  id             String   @id
+  aaguid         String
+  createdAt      DateTime @default(now())
+  updatedAt      DateTime @updatedAt
+  publicKey      Bytes
+  user           User     @relation(fields: [userId], references: [id], onDelete: Cascade)
+  userId         String
+  webauthnUserId String
+  counter        BigInt
+  deviceType     String // 'singleDevice' or 'multiDevice'
+  backedUp       Boolean
+  transports     String? // Stored as comma-separated values
+
+  @@index(userId)
+}
diff --git a/server/utils/monitoring.ts b/server/utils/monitoring.ts
index 4a49dc696..d8bbbe7ce 100644
--- a/server/utils/monitoring.ts
+++ b/server/utils/monitoring.ts
@@ -28,6 +28,8 @@ export function init() {
 			Sentry.httpIntegration(),
 			nodeProfilingIntegration(),
 		],
+		// https://github.com/getsentry/sentry-javascript/issues/12996
+		registerEsmLoaderHooks: { onlyIncludeInstrumentedModules: true },
 		tracesSampler(samplingContext) {
 			// ignore healthcheck transactions by other services (consul, etc.)
 			if (samplingContext.request?.url?.includes('/resources/healthcheck')) {
diff --git a/tests/e2e/passkey.test.ts b/tests/e2e/passkey.test.ts
new file mode 100644
index 000000000..9b221bf1f
--- /dev/null
+++ b/tests/e2e/passkey.test.ts
@@ -0,0 +1,155 @@
+import { faker } from '@faker-js/faker'
+import { expect, test } from '#tests/playwright-utils.ts'
+
+async function setupWebAuthn(page: any) {
+	const client = await page.context().newCDPSession(page)
+	// https://chromedevtools.github.io/devtools-protocol/tot/WebAuthn/
+	await client.send('WebAuthn.enable', { options: { enableUI: true } })
+	const result = await client.send('WebAuthn.addVirtualAuthenticator', {
+		options: {
+			protocol: 'ctap2',
+			transport: 'usb',
+			hasResidentKey: true,
+			hasUserVerification: true,
+			isUserVerified: true,
+			automaticPresenceSimulation: true,
+		},
+	})
+	return { client, authenticatorId: result.authenticatorId }
+}
+
+test('Users can register and use passkeys', async ({ page, login }) => {
+	const user = await login()
+
+	const { client, authenticatorId } = await setupWebAuthn(page)
+
+	const initialCredentials = await client.send('WebAuthn.getCredentials', {
+		authenticatorId,
+	})
+	expect(
+		initialCredentials.credentials,
+		'No credentials should exist initially',
+	).toHaveLength(0)
+
+	await page.goto('/settings/profile/passkeys')
+
+	const passkeyRegisteredPromise = new Promise<void>((resolve) => {
+		client.once('WebAuthn.credentialAdded', () => resolve())
+	})
+	await page.getByRole('button', { name: /register new passkey/i }).click()
+	await passkeyRegisteredPromise
+
+	// Verify the passkey appears in the UI
+	await expect(page.getByRole('list', { name: /passkeys/i })).toBeVisible()
+	await expect(page.getByText(/registered .* ago/i)).toBeVisible()
+
+	const afterRegistrationCredentials = await client.send(
+		'WebAuthn.getCredentials',
+		{ authenticatorId },
+	)
+	expect(
+		afterRegistrationCredentials.credentials,
+		'One credential should exist after registration',
+	).toHaveLength(1)
+
+	// Logout
+	await page.getByRole('link', { name: user.name ?? user.username }).click()
+	await page.getByRole('menuitem', { name: /logout/i }).click()
+	await expect(page).toHaveURL(`/`)
+
+	// Try logging in with passkey
+	await page.goto('/login')
+	const signCount1 = afterRegistrationCredentials.credentials[0].signCount
+
+	const passkeyAssertedPromise = new Promise<void>((resolve) => {
+		client.once('WebAuthn.credentialAsserted', () => resolve())
+	})
+
+	await page.getByRole('button', { name: /login with a passkey/i }).click()
+
+	// Check for error message before waiting for completion
+	const errorLocator = page.getByText(/failed to authenticate/i)
+	const errorPromise = errorLocator.waitFor({ timeout: 1000 }).then(() => {
+		throw new Error('Passkey authentication failed')
+	})
+
+	await Promise.race([passkeyAssertedPromise, errorPromise])
+
+	// Verify successful login
+	await expect(
+		page.getByRole('link', { name: user.name ?? user.username }),
+	).toBeVisible()
+
+	// Verify the sign count increased
+	const afterLoginCredentials = await client.send('WebAuthn.getCredentials', {
+		authenticatorId,
+	})
+	expect(afterLoginCredentials.credentials).toHaveLength(1)
+	expect(afterLoginCredentials.credentials[0].signCount).toBeGreaterThan(
+		signCount1,
+	)
+
+	// Go to passkeys page and delete the passkey
+	await page.goto('/settings/profile/passkeys')
+	await page.getByRole('button', { name: /delete/i }).click()
+
+	// Verify the passkey is no longer listed on the page
+	await expect(page.getByText(/no passkeys registered/i)).toBeVisible()
+
+	// But verify it still exists in the authenticator
+	const afterDeletionCredentials = await client.send(
+		'WebAuthn.getCredentials',
+		{ authenticatorId },
+	)
+	expect(afterDeletionCredentials.credentials).toHaveLength(1)
+
+	// Logout again to test deleted passkey
+	await page.getByRole('link', { name: user.name ?? user.username }).click()
+	await page.getByRole('menuitem', { name: /logout/i }).click()
+	await expect(page).toHaveURL(`/`)
+
+	// Try logging in with the deleted passkey
+	await page.goto('/login')
+	const deletedPasskeyAssertedPromise = new Promise<void>((resolve) => {
+		client.once('WebAuthn.credentialAsserted', () => resolve())
+	})
+
+	await page.getByRole('button', { name: /login with a passkey/i }).click()
+
+	await deletedPasskeyAssertedPromise
+
+	// Verify error message appears
+	await expect(page.getByText(/passkey not found/i)).toBeVisible()
+
+	// Verify we're still on the login page
+	await expect(page).toHaveURL(`/login`)
+})
+
+test('Failed passkey verification shows error', async ({ page, login }) => {
+	const password = faker.internet.password()
+	await login({ password })
+	const { client, authenticatorId } = await setupWebAuthn(page)
+	await page.goto('/settings/profile/passkeys')
+
+	// Try to register with failed verification
+	await client.send('WebAuthn.setUserVerified', {
+		authenticatorId,
+		isUserVerified: false,
+	})
+
+	await client.send('WebAuthn.setAutomaticPresenceSimulation', {
+		authenticatorId,
+		enabled: true,
+	})
+
+	await page.getByRole('button', { name: /register new passkey/i }).click()
+
+	// Wait for error message
+	await expect(page.getByText(/failed to create passkey/i)).toBeVisible()
+
+	// Verify no passkey was registered
+	const credentials = await client.send('WebAuthn.getCredentials', {
+		authenticatorId,
+	})
+	expect(credentials.credentials).toHaveLength(0)
+})