working passkeys

Author: kentcdodds

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 {
@@ -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,6 +172,9 @@ export default function LoginPage({ actionData }: Route.ComponentProps) {
 								</StatusButton>
 							</div>
 						</Form>
+						<div className="mt-5 flex flex-col gap-5 border-b-2 border-t-2 border-border py-3">
+							<PasskeyLogin />
+						</div>
 						<ul className="mt-5 flex flex-col gap-5 border-b-2 border-t-2 border-border py-3">
 							{providerNames.map((providerName) => (
 								<li key={providerName}>
@@ -195,6 +205,77 @@ export default function LoginPage({ actionData }: Route.ComponentProps) {
 	)
 }
 
+const VerificationResponseSchema = z.object({
+	status: z.enum(['success', 'error']),
+	error: z.string().optional(),
+})
+
+function PasskeyLogin() {
+	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),
+			})
+
+			if (
+				verificationResponse.headers.get('Content-Type') === 'application/json'
+			) {
+				const verificationJson = await verificationResponse.json()
+				const verification = VerificationResponseSchema.parse(verificationJson)
+				if (verification.status === 'error') {
+					throw new Error(verification.error)
+				}
+			}
+
+			setPasskeyMessage("You're logged in! Navigating to your account page.")
+			await navigate(verificationResponse.headers.get('Location') ?? '/')
+		} catch (e) {
+			setError(
+				e instanceof Error ? e.message : 'Failed to authenticate with passkey',
+			)
+		}
+	}
+
+	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}
+			>
+				<Icon name="passkey" className="text-body-md" />
+				<span>{passkeyMessage}</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' }]
 }

app/routes/_auth+/webauthn.authentication.ts

@@ -0,0 +1,126 @@
+import {
+	generateAuthenticationOptions,
+	verifyAuthenticationResponse,
+	type AuthenticationResponseJSON,
+} from '@simplewebauthn/server'
+import { z } from 'zod'
+import { getSessionExpirationDate } from '#app/utils/auth.server.ts'
+import { prisma } from '#app/utils/db.server.ts'
+import { getWebAuthnConfig, passkeyCookie } from '#app/utils/webauthn.server.ts'
+import { type Route } from './+types/webauthn.authentication.ts'
+import { handleNewSession } from './login.server.ts'
+
+export async function loader({ request }: Route.LoaderArgs) {
+	const config = getWebAuthnConfig(request)
+	const options = await generateAuthenticationOptions({
+		rpID: config.rpID,
+		userVerification: config.authenticatorSelection.userVerification,
+	})
+
+	const cookieHeader = await passkeyCookie.serialize({
+		challenge: options.challenge,
+	})
+
+	return Response.json({ options }, { headers: { 'Set-Cookie': cookieHeader } })
+}
+
+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 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 = AuthenticationResponseSchema.safeParse(body)
+		if (!result.success) {
+			throw new Error('Invalid authentication response')
+		}
+
+		const passkey = await prisma.passkey.findUnique({
+			where: { id: result.data.id },
+			include: { user: true },
+		})
+		if (!passkey) {
+			throw new Error('Passkey not found')
+		}
+
+		const config = getWebAuthnConfig(request)
+
+		const verification = await verifyAuthenticationResponse({
+			response: result.data,
+			expectedChallenge: cookie.challenge,
+			expectedOrigin: config.origin,
+			expectedRPID: config.rpID,
+			credential: {
+				id: result.data.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,
+				// TODO: handle remember and redirectTo
+				remember: false,
+				redirectTo: '/',
+			},
+			{ headers: { 'Set-Cookie': deletePasskeyCookie } },
+		)
+
+		return response
+	} 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 } },
+		)
+	}
+}

app/routes/_auth+/webauthn.registration.ts

@@ -0,0 +1,140 @@
+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 {
+	PasskeyCookieSchema,
+	RegistrationResponseSchema,
+	parseAttestationObject,
+	passkeyCookie,
+	getWebAuthnConfig,
+} from '#app/utils/webauthn.server.js'
+import { type Route } from './+types/webauthn.registration.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: config.authenticatorSelection,
+	})
+
+	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
+		let aaguid: string
+
+		const parsedAttestation = parseAttestationObject(
+			data.response.attestationObject,
+		)
+		aaguid = parsedAttestation.authData.aaguid
+
+		// 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 } =
+			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 },
+		)
+	}
+}

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