feat: Enhance passkey authentication and registration flow

- Refactored PasskeyLogin component to support redirectTo and remember options
- Updated WebAuthn authentication and registration routes with improved error handling
- Moved WebAuthn utility functions to a dedicated server-side utils file
- Simplified response schemas and added more robust type checking
- Removed deprecated webauthn.server.ts utility file

Author: kentcdodds

app/routes/_auth+/login.tsx

@@ -172,10 +172,15 @@ 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 />
+						<hr className="my-4" />
+						<div className="flex flex-col gap-5">
+							<PasskeyLogin
+								redirectTo={redirectTo}
+								remember={fields.remember.value === 'on'}
+							/>
 						</div>
-						<ul className="mt-5 flex flex-col gap-5 border-b-2 border-t-2 border-border py-3">
+						<hr className="my-4" />
+						<ul className="flex flex-col gap-5">
 							{providerNames.map((providerName) => (
 								<li key={providerName}>
 									<ProviderConnectionForm
@@ -205,12 +210,24 @@ export default function LoginPage({ actionData }: Route.ComponentProps) {
 	)
 }
 
-const VerificationResponseSchema = z.object({
-	status: z.enum(['success', 'error']),
-	error: z.string().optional(),
-})
+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() {
+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>(
@@ -234,21 +251,21 @@ function PasskeyLogin() {
 			const verificationResponse = await fetch('/webauthn/authentication', {
 				method: 'POST',
 				headers: { 'Content-Type': 'application/json' },
-				body: JSON.stringify(authResponse),
+				body: JSON.stringify({ authResponse, remember, redirectTo }),
 			})
 
-			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)
-				}
+			if (!verificationResponse.ok) {
+				throw new Error('Failed to authenticate with passkey')
+			}
+
+			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') ?? '/')
+			setPasskeyMessage("You're logged in! Navigating...")
+			await navigate(verification.location ?? '/')
 		} catch (e) {
 			setError(
 				e instanceof Error ? e.message : 'Failed to authenticate with passkey',

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

@@ -1,14 +1,16 @@
 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'
+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)
@@ -24,27 +26,6 @@ export async function loader({ request }: Route.LoaderArgs) {
 	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)
@@ -55,13 +36,14 @@ export async function action({ request }: Route.ActionArgs) {
 		}
 
 		const body = await request.json()
-		const result = AuthenticationResponseSchema.safeParse(body)
+		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: result.data.id },
+			where: { id: authResponse.id },
 			include: { user: true },
 		})
 		if (!passkey) {
@@ -71,12 +53,12 @@ export async function action({ request }: Route.ActionArgs) {
 		const config = getWebAuthnConfig(request)
 
 		const verification = await verifyAuthenticationResponse({
-			response: result.data,
+			response: authResponse,
 			expectedChallenge: cookie.challenge,
 			expectedOrigin: config.origin,
 			expectedRPID: config.rpID,
 			credential: {
-				id: result.data.id,
+				id: authResponse.id,
 				publicKey: passkey.publicKey,
 				counter: Number(passkey.counter),
 			},
@@ -104,14 +86,19 @@ export async function action({ request }: Route.ActionArgs) {
 			{
 				request,
 				session,
-				// TODO: handle remember and redirectTo
-				remember: false,
-				redirectTo: '/',
+				remember,
+				redirectTo: redirectTo ?? undefined,
 			},
 			{ headers: { 'Set-Cookie': deletePasskeyCookie } },
 		)
 
-		return response
+		return Response.json(
+			{
+				status: 'success',
+				location: response.headers.get('Location'),
+			},
+			{ headers: response.headers },
+		)
 	} catch (error) {
 		if (error instanceof Response) throw error
 

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

@@ -5,14 +5,13 @@ import {
 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,
-	parseAttestationObject,
 	passkeyCookie,
 	getWebAuthnConfig,
-} from '#app/utils/webauthn.server.js'
-import { type Route } from './+types/webauthn.registration.ts'
+} from './utils.server.ts'
 
 export async function loader({ request }: Route.LoaderArgs) {
 	const userId = await requireUserId(request)
@@ -63,12 +62,6 @@ export async function action({ request }: Route.ActionArgs) {
 		}
 
 		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(
@@ -97,7 +90,7 @@ export async function action({ request }: Route.ActionArgs) {
 		if (!verified || !registrationInfo) {
 			throw new Error('Registration verification failed')
 		}
-		const { credential, credentialDeviceType, credentialBackedUp } =
+		const { credential, credentialDeviceType, credentialBackedUp, aaguid } =
 			registrationInfo
 
 		const existingPasskey = await prisma.passkey.findUnique({

app/routes/_auth+/webauthn+/utils.server.ts

@@ -0,0 +1,92 @@
+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,
+		authenticatorSelection: {
+			residentKey: 'preferred',
+			userVerification: 'preferred',
+		},
+	} as const
+}