Merge branch 'epicweb-dev:main' into main

Author: AdityaKirad

.vscode/remix.code-snippets

@@ -77,4 +77,4 @@
 			"}",
 		],
 	},
-}
+}

app/components/ui/button.tsx

@@ -5,7 +5,7 @@ import * as React from 'react'
 import { cn } from '#app/utils/misc.tsx'
 
 const buttonVariants = cva(
-	'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors outline-none focus-visible:ring-2 focus-within:ring-2 ring-ring ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+	'inline-flex items-center justify-center rounded-md text-sm font-medium outline-none ring-ring ring-offset-2 ring-offset-background transition-colors focus-within:ring-2 focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50',
 	{
 		variants: {
 			variant: {

app/entry.server.tsx

@@ -1,8 +1,8 @@
 import { PassThrough } from 'node:stream'
+import { styleText } from 'node:util'
+import { contentSecurity } from '@nichtsam/helmet/content'
 import { createReadableStreamFromReadable } from '@react-router/node'
-
 import * as Sentry from '@sentry/node'
-import chalk from 'chalk'
 import { isbot } from 'isbot'
 import { renderToPipeableStream } from 'react-dom/server'
 import {
@@ -21,6 +21,8 @@ export const streamTimeout = 5000
 init()
 global.ENV = getEnv()
 
+const MODE = process.env.NODE_ENV ?? 'development'
+
 type DocRequestArgs = Parameters<HandleDocumentRequestFunction>
 
 export default async function handleRequest(...args: DocRequestArgs) {
@@ -65,6 +67,33 @@ export default async function handleRequest(...args: DocRequestArgs) {
 					const body = new PassThrough()
 					responseHeaders.set('Content-Type', 'text/html')
 					responseHeaders.append('Server-Timing', timings.toString())
+
+					contentSecurity(responseHeaders, {
+						crossOriginEmbedderPolicy: false,
+						contentSecurityPolicy: {
+							// NOTE: Remove reportOnly when you're ready to enforce this CSP
+							reportOnly: true,
+							directives: {
+								fetch: {
+									'connect-src': [
+										MODE === 'development' ? 'ws:' : undefined,
+										process.env.SENTRY_DSN ? '*.sentry.io' : undefined,
+										"'self'",
+									],
+									'font-src': ["'self'"],
+									'frame-src': ["'self'"],
+									'img-src': ["'self'", 'data:'],
+									'script-src': [
+										"'strict-dynamic'",
+										"'self'",
+										`'nonce-${nonce}'`,
+									],
+									'script-src-attr': [`'nonce-${nonce}'`],
+								},
+							},
+						},
+					})
+
 					resolve(
 						new Response(createReadableStreamFromReadable(body), {
 							headers: responseHeaders,
@@ -107,7 +136,7 @@ export function handleError(
 		return
 	}
 	if (error instanceof Error) {
-		console.error(chalk.red(error.stack))
+		console.error(styleText('red', String(error.stack)))
 		void Sentry.captureException(error)
 	} else {
 		console.error(error)

app/routes/_auth+/login.tsx

@@ -1,20 +1,23 @@
 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 {
 	ProviderConnectionForm,
 	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' }]
 }

app/routes/_auth+/signup.tsx

@@ -8,6 +8,7 @@ import { z } from 'zod'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
 import { ErrorList, Field } from '#app/components/forms.tsx'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
+import { requireAnonymous } from '#app/utils/auth.server.ts'
 import {
 	ProviderConnectionForm,
 	providerNames,
@@ -28,6 +29,11 @@ const SignupSchema = z.object({
 	email: EmailSchema,
 })
 
+export async function loader({ request }: Route.LoaderArgs) {
+	await requireAnonymous(request)
+	return null
+}
+
 export async function action({ request }: Route.ActionArgs) {
 	const formData = await request.formData()
 

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 } },
+		)
+	}
+}