Refactor: Improve middleware and context usage

cursoragent · kentcdodds · cursoragent · commit ff7fc729a655 · 2025-09-12T17:02:35.000Z
This commit refactors middleware and context usage for better code organization and clarity. It also includes minor updates to documentation and tests.

Co-authored-by: me &lt;me@kentcdodds.com&gt;
diff --git a/app/context.ts b/app/context.ts
@@ -2,4 +2,3 @@ import { createContext } from 'react-router'
 
 // Holds the authenticated user's ID for routes protected by middleware
 export const userIdContext = createContext<string | null>(null)
-
diff --git a/app/middleware.server.ts b/app/middleware.server.ts
@@ -1,35 +1,39 @@
 import { redirect, type MiddlewareFunction } from 'react-router'
+import { userIdContext } from '#app/context.ts'
 import { prisma } from '#app/utils/db.server.ts'
 import { authSessionStorage } from '#app/utils/session.server.ts'
-import { userIdContext } from '#app/context.ts'
 
 export const requireUserMiddleware: MiddlewareFunction = async ({
- 	request,
- 	context,
+	request,
+	context,
 }) => {
- 	const cookie = request.headers.get('cookie')
- 	const session = await authSessionStorage.getSession(cookie)
- 	const sessionId = session.get('sessionId') as string | undefined
- 	if (!sessionId) throw redirect(`/login?redirectTo=${encodeURIComponent(new URL(request.url).pathname)}`)
+	const cookie = request.headers.get('cookie')
+	const session = await authSessionStorage.getSession(cookie)
+	const sessionId = session.get('sessionId') as string | undefined
+	if (!sessionId)
+		throw redirect(
+			`/login?redirectTo=${encodeURIComponent(new URL(request.url).pathname)}`,
+		)
 
- 	const sessionRecord = await prisma.session.findUnique({
- 		select: { userId: true, expirationDate: true },
- 		where: { id: sessionId },
- 	})
+	const sessionRecord = await prisma.session.findUnique({
+		select: { userId: true, expirationDate: true },
+		where: { id: sessionId },
+	})
 
- 	if (!sessionRecord || sessionRecord.expirationDate < new Date()) {
- 		throw redirect(`/login?redirectTo=${encodeURIComponent(new URL(request.url).pathname)}`)
- 	}
+	if (!sessionRecord || sessionRecord.expirationDate < new Date()) {
+		throw redirect(
+			`/login?redirectTo=${encodeURIComponent(new URL(request.url).pathname)}`,
+		)
+	}
 
- 	context.set(userIdContext, sessionRecord.userId)
+	context.set(userIdContext, sessionRecord.userId)
 }
 
 export const requireAnonymousMiddleware: MiddlewareFunction = async ({
- 	request,
+	request,
 }) => {
- 	const cookie = request.headers.get('cookie')
- 	const session = await authSessionStorage.getSession(cookie)
- 	const sessionId = session.get('sessionId') as string | undefined
- 	if (sessionId) throw redirect('/')
+	const cookie = request.headers.get('cookie')
+	const session = await authSessionStorage.getSession(cookie)
+	const sessionId = session.get('sessionId') as string | undefined
+	if (sessionId) throw redirect('/')
 }
-
diff --git a/app/routes/_auth+/auth.$provider.callback.test.ts b/app/routes/_auth+/auth.$provider.callback.test.ts
@@ -2,8 +2,8 @@ import { invariant } from '@epic-web/invariant'
 import { faker } from '@faker-js/faker'
 import { SetCookie } from '@mjackson/headers'
 import { http } from 'msw'
-import { afterEach, expect, test } from 'vitest'
 import { RouterContextProvider } from 'react-router'
+import { afterEach, expect, test } from 'vitest'
 import { twoFAVerificationType } from '#app/routes/settings+/profile.two-factor.tsx'
 import { getSessionExpirationDate, sessionKey } from '#app/utils/auth.server.ts'
 import { GITHUB_PROVIDER_NAME } from '#app/utils/connections.tsx'
@@ -26,9 +26,11 @@ afterEach(async () => {
 
 test('a new user goes to onboarding', async () => {
 	const request = await setupRequest()
-	const response = await loader({ request, params: PARAMS, context: new RouterContextProvider() as any }).catch(
-		(e) => e,
-	)
+	const response = await loader({
+		request,
+		params: PARAMS,
+		context: new RouterContextProvider() as any,
+	}).catch((e) => e)
 	expect(response).toHaveRedirect('/onboarding/github')
 })
 
@@ -40,9 +42,11 @@ test('when auth fails, send the user to login with a toast', async () => {
 		}),
 	)
 	const request = await setupRequest()
-	const response = await loader({ request, params: PARAMS, context: new RouterContextProvider() as any }).catch(
-		(e) => e,
-	)
+	const response = await loader({
+		request,
+		params: PARAMS,
+		context: new RouterContextProvider() as any,
+	}).catch((e) => e)
 	invariant(response instanceof Response, 'response should be a Response')
 	expect(response).toHaveRedirect('/login')
 	await expect(response).toSendToast(
@@ -61,7 +65,11 @@ test('when a user is logged in, it creates the connection', async () => {
 		sessionId: session.id,
 		code: githubUser.code,
 	})
-	const response = await loader({ request, params: PARAMS, context: new RouterContextProvider() as any })
+	const response = await loader({
+		request,
+		params: PARAMS,
+		context: new RouterContextProvider() as any,
+	})
 	expect(response).toHaveRedirect('/settings/profile/connections')
 	await expect(response).toSendToast(
 		expect.objectContaining({
@@ -97,7 +105,11 @@ test(`when a user is logged in and has already connected, it doesn't do anything
 		sessionId: session.id,
 		code: githubUser.code,
 	})
-	const response = await loader({ request, params: PARAMS, context: new RouterContextProvider() as any })
+	const response = await loader({
+		request,
+		params: PARAMS,
+		context: new RouterContextProvider() as any,
+	})
 	expect(response).toHaveRedirect('/settings/profile/connections')
 	await expect(response).toSendToast(
 		expect.objectContaining({
@@ -112,7 +124,11 @@ test('when a user exists with the same email, create connection and make session
 	const email = githubUser.primaryEmail.toLowerCase()
 	const { userId } = await setupUser({ ...createUser(), email })
 	const request = await setupRequest({ code: githubUser.code })
-	const response = await loader({ request, params: PARAMS, context: new RouterContextProvider() as any })
+	const response = await loader({
+		request,
+		params: PARAMS,
+		context: new RouterContextProvider() as any,
+	})
 
 	expect(response).toHaveRedirect('/')
 
@@ -156,7 +172,11 @@ test('gives an error if the account is already connected to another user', async
 		sessionId: session.id,
 		code: githubUser.code,
 	})
-	const response = await loader({ request, params: PARAMS, context: new RouterContextProvider() as any })
+	const response = await loader({
+		request,
+		params: PARAMS,
+		context: new RouterContextProvider() as any,
+	})
 	expect(response).toHaveRedirect('/settings/profile/connections')
 	await expect(response).toSendToast(
 		expect.objectContaining({
@@ -179,7 +199,11 @@ test('if a user is not logged in, but the connection exists, make a session', as
 		},
 	})
 	const request = await setupRequest({ code: githubUser.code })
-	const response = await loader({ request, params: PARAMS, context: new RouterContextProvider() as any })
+	const response = await loader({
+		request,
+		params: PARAMS,
+		context: new RouterContextProvider() as any,
+	})
 	expect(response).toHaveRedirect('/')
 	await expect(response).toHaveSessionForUser(userId)
 })
@@ -203,7 +227,11 @@ test('if a user is not logged in, but the connection exists and they have enable
 		},
 	})
 	const request = await setupRequest({ code: githubUser.code })
-	const response = await loader({ request, params: PARAMS, context: new RouterContextProvider() as any })
+	const response = await loader({
+		request,
+		params: PARAMS,
+		context: new RouterContextProvider() as any,
+	})
 	const searchParams = new URLSearchParams({
 		type: twoFAVerificationType,
 		target: userId,
diff --git a/app/routes/_auth+/login.server.ts b/app/routes/_auth+/login.server.ts
@@ -1,6 +1,7 @@
 import { invariant } from '@epic-web/invariant'
 import { redirect } from 'react-router'
 import { safeRedirect } from 'remix-utils/safe-redirect'
+import { requireAnonymousMiddleware } from '#app/middleware.server.ts'
 import { twoFAVerificationType } from '#app/routes/settings+/profile.two-factor.tsx'
 import { getUserId, sessionKey } from '#app/utils/auth.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
@@ -9,7 +10,6 @@ import { authSessionStorage } from '#app/utils/session.server.ts'
 import { redirectWithToast } from '#app/utils/toast.server.ts'
 import { verifySessionStorage } from '#app/utils/verification.server.ts'
 import { getRedirectToUrl, type VerifyFunctionArgs } from './verify.server.ts'
-import { requireAnonymousMiddleware } from '#app/middleware.server.ts'
 
 export const middleware = [requireAnonymousMiddleware]
 
diff --git a/app/routes/_auth+/onboarding.server.ts b/app/routes/_auth+/onboarding.server.ts
@@ -1,9 +1,9 @@
 import { invariant } from '@epic-web/invariant'
 import { redirect } from 'react-router'
+import { requireAnonymousMiddleware } from '#app/middleware.server.ts'
 import { verifySessionStorage } from '#app/utils/verification.server.ts'
 import { onboardingEmailSessionKey } from './onboarding.tsx'
 import { type VerifyFunctionArgs } from './verify.server.ts'
-import { requireAnonymousMiddleware } from '#app/middleware.server.ts'
 
 export const middleware = [requireAnonymousMiddleware]
 
diff --git a/app/routes/_auth+/onboarding.tsx b/app/routes/_auth+/onboarding.tsx
@@ -7,7 +7,11 @@ import { z } from 'zod'
 import { CheckboxField, ErrorList, Field } from '#app/components/forms.tsx'
 import { Spacer } from '#app/components/spacer.tsx'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
-import { checkIsCommonPassword, sessionKey, signup } from '#app/utils/auth.server.ts'
+import {
+	checkIsCommonPassword,
+	sessionKey,
+	signup,
+} from '#app/utils/auth.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
 import { checkHoneypot } from '#app/utils/honeypot.server.ts'
 import { useIsPending } from '#app/utils/misc.tsx'
diff --git a/app/routes/_auth+/reset-password.server.ts b/app/routes/_auth+/reset-password.server.ts
@@ -1,10 +1,10 @@
 import { invariant } from '@epic-web/invariant'
 import { data, redirect } from 'react-router'
+import { requireAnonymousMiddleware } from '#app/middleware.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
 import { verifySessionStorage } from '#app/utils/verification.server.ts'
 import { resetPasswordUsernameSessionKey } from './reset-password.tsx'
 import { type VerifyFunctionArgs } from './verify.server.ts'
-import { requireAnonymousMiddleware } from '#app/middleware.server.ts'
 
 export const middleware = [requireAnonymousMiddleware]
 
diff --git a/app/routes/_auth+/reset-password.tsx b/app/routes/_auth+/reset-password.tsx
@@ -5,7 +5,10 @@ import { data, redirect, Form } from 'react-router'
 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 { checkIsCommonPassword, resetUserPassword } from '#app/utils/auth.server.ts'
+import {
+	checkIsCommonPassword,
+	resetUserPassword,
+} from '#app/utils/auth.server.ts'
 import { useIsPending } from '#app/utils/misc.tsx'
 import { PasswordAndConfirmPasswordSchema } from '#app/utils/user-validation.ts'
 import { verifySessionStorage } from '#app/utils/verification.server.ts'
diff --git a/app/routes/_auth+/signup.server.ts b/app/routes/_auth+/signup.server.ts
@@ -1,3 +1,3 @@
 import { requireAnonymousMiddleware } from '#app/middleware.server.ts'
 
-export const middleware = [requireAnonymousMiddleware]
+export const middleware = [requireAnonymousMiddleware]
diff --git a/app/routes/_seo+/sitemap[.]xml.ts b/app/routes/_seo+/sitemap[.]xml.ts
@@ -1,12 +1,21 @@
 import { generateSitemap } from '@nasa-gcn/remix-seo'
-import { type ServerBuild, RouterContextProvider, createContext } from 'react-router'
+import {
+	type ServerBuild,
+	type RouterContextProvider,
+	createContext,
+} from 'react-router'
 import { getDomainUrl } from '#app/utils/misc.tsx'
 import { type Route } from './+types/sitemap[.]xml.ts'
 // recreate context key to match the one set in server getLoadContext
-export const serverBuildContext = createContext<Promise<{ error: unknown; build: ServerBuild }> | null>(null)
+export const serverBuildContext = createContext<Promise<{
+	error: unknown
+	build: ServerBuild
+}> | null>(null)
 
 export async function loader({ request, context }: Route.LoaderArgs) {
-	const serverBuild = (await (context as Readonly<RouterContextProvider>).get(serverBuildContext)) as { build: ServerBuild }
+	const serverBuild = (await (context as Readonly<RouterContextProvider>).get(
+		serverBuildContext,
+	)) as { build: ServerBuild }
 
 	// TODO: This is typeerror is coming up since of the remix-run/server-runtime package. We might need to remove/update that one.
 	// @ts-expect-error
diff --git a/app/routes/settings+/profile.server.ts b/app/routes/settings+/profile.server.ts
@@ -1,3 +1,3 @@
 import { requireUserMiddleware } from '#app/middleware.server.ts'
 
-export const middleware = [requireUserMiddleware]
+export const middleware = [requireUserMiddleware]
diff --git a/app/routes/users+/index.tsx b/app/routes/users+/index.tsx
@@ -70,7 +70,7 @@ export default function UsersRoute({ loaderData }: Route.ComponentProps) {
 						<p>No users found</p>
 					)
 				) : loaderData.status === 'error' ? (
-					<ErrorList errors={["There was an error parsing the results"]} />
+					<ErrorList errors={['There was an error parsing the results']} />
 				) : null}
 			</main>
 		</div>
diff --git a/app/utils/cache.server.ts b/app/utils/cache.server.ts
@@ -1,5 +1,6 @@
 import fs from 'node:fs'
 import path from 'node:path'
+import { DatabaseSync } from 'node:sqlite'
 import {
 	cachified as baseCachified,
 	verboseReporter,
@@ -13,7 +14,6 @@ import {
 } from '@epic-web/cachified'
 import { remember } from '@epic-web/remember'
 import { LRUCache } from 'lru-cache'
-import { DatabaseSync } from 'node:sqlite'
 import { z } from 'zod'
 import { updatePrimaryCacheValue } from '#app/routes/admin+/cache_.sqlite.server.ts'
 import { getInstanceInfo, getInstanceInfoSync } from './litefs.server.ts'
diff --git a/docs/database.md b/docs/database.md
@@ -300,7 +300,6 @@ You've got a few options:
      re-generating the migration after fixing the error.
 3. If you do care about the data and don't have a backup, you can follow these
    steps:
-
    1. Comment out the
       [`exec` section from `litefs.yml` file](https://github.com/epicweb-dev/epic-stack/blob/main/other/litefs.yml#L31-L37).
 
diff --git a/docs/decisions/039-passkeys.md b/docs/decisions/039-passkeys.md
diff --git a/docs/decisions/043-pwnedpasswords.md b/docs/decisions/043-pwnedpasswords.md
diff --git a/docs/decisions/044-rr-devtools.md b/docs/decisions/044-rr-devtools.md
diff --git a/prisma/dev.db b/prisma/dev.db
diff --git a/server/index.ts b/server/index.ts
diff --git a/tests/e2e/search.test.ts b/tests/e2e/search.test.ts

Original file line number	Diff line number	Diff line change
`@@ -2,4 +2,3 @@ import { createContext } from 'react-router'`
`2`	`2`
`3`	`3`	`// Holds the authenticated user's ID for routes protected by middleware`
`4`	`4`	`export const userIdContext = createContext<string \| null>(null)`
`5`		`-`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`import { requireAnonymousMiddleware } from '#app/middleware.server.ts'`
`2`	`2`
`3`		`-export const middleware = [requireAnonymousMiddleware]`
	`3`	`+export const middleware = [requireAnonymousMiddleware]`