Refactor: Use react-router middleware for auth checks

cursoragent · kentcdodds · cursoragent · commit 9f9766a1dcd9 · 2025-09-12T16:12:47.000Z
This commit refactors authentication checks to use react-router's middleware system. This centralizes auth logic and improves code organization.

Co-authored-by: me &lt;me@kentcdodds.com&gt;
diff --git a/app/context.ts b/app/context.ts
@@ -0,0 +1,5 @@
+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
@@ -0,0 +1,35 @@
+import { redirect, type MiddlewareFunction } from 'react-router'
+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,
+}) => {
+ 	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 },
+ 	})
+
+ 	if (!sessionRecord || sessionRecord.expirationDate < new Date()) {
+ 		throw redirect(`/login?redirectTo=${encodeURIComponent(new URL(request.url).pathname)}`)
+ 	}
+
+ 	context.set(userIdContext, sessionRecord.userId)
+}
+
+export const requireAnonymousMiddleware: MiddlewareFunction = async ({
+ 	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('/')
+}
+
diff --git a/app/routes/_auth+/auth.$provider.callback.test.ts b/app/routes/_auth+/auth.$provider.callback.test.ts
@@ -3,6 +3,7 @@ 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 { 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'
@@ -25,7 +26,7 @@ afterEach(async () => {
 
 test('a new user goes to onboarding', async () => {
 	const request = await setupRequest()
-	const response = await loader({ request, params: PARAMS, context: {} }).catch(
+	const response = await loader({ request, params: PARAMS, context: new RouterContextProvider() as any }).catch(
 		(e) => e,
 	)
 	expect(response).toHaveRedirect('/onboarding/github')
@@ -39,7 +40,7 @@ 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: {} }).catch(
+	const response = await loader({ request, params: PARAMS, context: new RouterContextProvider() as any }).catch(
 		(e) => e,
 	)
 	invariant(response instanceof Response, 'response should be a Response')
@@ -60,7 +61,7 @@ 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: {} })
+	const response = await loader({ request, params: PARAMS, context: new RouterContextProvider() as any })
 	expect(response).toHaveRedirect('/settings/profile/connections')
 	await expect(response).toSendToast(
 		expect.objectContaining({
@@ -96,7 +97,7 @@ 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: {} })
+	const response = await loader({ request, params: PARAMS, context: new RouterContextProvider() as any })
 	expect(response).toHaveRedirect('/settings/profile/connections')
 	await expect(response).toSendToast(
 		expect.objectContaining({
@@ -111,7 +112,7 @@ 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: {} })
+	const response = await loader({ request, params: PARAMS, context: new RouterContextProvider() as any })
 
 	expect(response).toHaveRedirect('/')
 
@@ -155,7 +156,7 @@ 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: {} })
+	const response = await loader({ request, params: PARAMS, context: new RouterContextProvider() as any })
 	expect(response).toHaveRedirect('/settings/profile/connections')
 	await expect(response).toSendToast(
 		expect.objectContaining({
@@ -178,7 +179,7 @@ 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: {} })
+	const response = await loader({ request, params: PARAMS, context: new RouterContextProvider() as any })
 	expect(response).toHaveRedirect('/')
 	await expect(response).toHaveSessionForUser(userId)
 })
@@ -202,7 +203,7 @@ 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: {} })
+	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.tsx b/app/routes/_auth+/login.tsx
@@ -11,7 +11,10 @@ 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 { login } from '#app/utils/auth.server.ts'
+export const unstable_middleware = [
+	(await import('#app/middleware.server.ts')).requireAnonymousMiddleware,
+]
 import {
 	ProviderConnectionForm,
 	providerNames,
@@ -38,12 +41,10 @@ const AuthenticationOptionsSchema = z.object({
 }) satisfies z.ZodType<{ options: PublicKeyCredentialRequestOptionsJSON }>
 
 export async function loader({ request }: Route.LoaderArgs) {
-	await requireAnonymous(request)
 	return {}
 }
 
 export async function action({ request }: Route.ActionArgs) {
-	await requireAnonymous(request)
 	const formData = await request.formData()
 	await checkHoneypot(formData)
 	const submission = await parseWithZod(formData, {
diff --git a/app/routes/_auth+/onboarding.tsx b/app/routes/_auth+/onboarding.tsx
@@ -7,12 +7,10 @@ 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,
-	requireAnonymous,
-	sessionKey,
-	signup,
-} from '#app/utils/auth.server.ts'
+import { checkIsCommonPassword, sessionKey, signup } from '#app/utils/auth.server.ts'
+export const unstable_middleware = [
+	(await import('#app/middleware.server.ts')).requireAnonymousMiddleware,
+]
 import { prisma } from '#app/utils/db.server.ts'
 import { checkHoneypot } from '#app/utils/honeypot.server.ts'
 import { useIsPending } from '#app/utils/misc.tsx'
@@ -42,7 +40,6 @@ const SignupFormSchema = z
 	.and(PasswordAndConfirmPasswordSchema)
 
 async function requireOnboardingEmail(request: Request) {
-	await requireAnonymous(request)
 	const verifySession = await verifySessionStorage.getSession(
 		request.headers.get('cookie'),
 	)
diff --git a/app/routes/_auth+/onboarding_.$provider.tsx b/app/routes/_auth+/onboarding_.$provider.tsx
@@ -17,11 +17,10 @@ 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 {
-	sessionKey,
-	signupWithConnection,
-	requireAnonymous,
-} from '#app/utils/auth.server.ts'
+import { sessionKey, signupWithConnection } from '#app/utils/auth.server.ts'
+export const unstable_middleware = [
+	(await import('#app/middleware.server.ts')).requireAnonymousMiddleware,
+]
 import { ProviderNameSchema } from '#app/utils/connections.tsx'
 import { prisma } from '#app/utils/db.server.ts'
 import { useIsPending } from '#app/utils/misc.tsx'
@@ -53,7 +52,6 @@ async function requireData({
 	request: Request
 	params: Params
 }) {
-	await requireAnonymous(request)
 	const verifySession = await verifySessionStorage.getSession(
 		request.headers.get('cookie'),
 	)
diff --git a/app/routes/_auth+/reset-password.tsx b/app/routes/_auth+/reset-password.tsx
@@ -5,11 +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,
-	requireAnonymous,
-	resetUserPassword,
-} from '#app/utils/auth.server.ts'
+import { checkIsCommonPassword, resetUserPassword } from '#app/utils/auth.server.ts'
+export const unstable_middleware = [
+	(await import('#app/middleware.server.ts')).requireAnonymousMiddleware,
+]
 import { useIsPending } from '#app/utils/misc.tsx'
 import { PasswordAndConfirmPasswordSchema } from '#app/utils/user-validation.ts'
 import { verifySessionStorage } from '#app/utils/verification.server.ts'
@@ -24,7 +23,6 @@ export const resetPasswordUsernameSessionKey = 'resetPasswordUsername'
 const ResetPasswordSchema = PasswordAndConfirmPasswordSchema
 
 async function requireResetPasswordUsername(request: Request) {
-	await requireAnonymous(request)
 	const verifySession = await verifySessionStorage.getSession(
 		request.headers.get('cookie'),
 	)
diff --git a/app/routes/_auth+/signup.tsx b/app/routes/_auth+/signup.tsx
@@ -8,7 +8,9 @@ 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'
+export const unstable_middleware = [
+	(await import('#app/middleware.server.ts')).requireAnonymousMiddleware,
+]
 import {
 	ProviderConnectionForm,
 	providerNames,
@@ -30,7 +32,6 @@ const SignupSchema = z.object({
 })
 
 export async function loader({ request }: Route.LoaderArgs) {
-	await requireAnonymous(request)
 	return null
 }
 
diff --git a/app/routes/_seo+/sitemap[.]xml.ts b/app/routes/_seo+/sitemap[.]xml.ts
@@ -1,10 +1,12 @@
 import { generateSitemap } from '@nasa-gcn/remix-seo'
-import { type ServerBuild } from 'react-router'
+import { type ServerBuild, 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 async function loader({ request, context }: Route.LoaderArgs) {
-	const serverBuild = (await context.serverBuild) 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.tsx b/app/routes/settings+/profile.tsx
@@ -4,12 +4,16 @@ import { Link, Outlet, useMatches } from 'react-router'
 import { z } from 'zod'
 import { Spacer } from '#app/components/spacer.tsx'
 import { Icon } from '#app/components/ui/icon.tsx'
-import { requireUserId } from '#app/utils/auth.server.ts'
+import { userIdContext } from '#app/context.ts'
 import { prisma } from '#app/utils/db.server.ts'
 import { cn } from '#app/utils/misc.tsx'
 import { useUser } from '#app/utils/user.ts'
 import { type Route } from './+types/profile.ts'
 
+export const unstable_middleware = [
+	(await import('#app/middleware.server.ts')).requireUserMiddleware,
+]
+
 export const BreadcrumbHandle = z.object({ breadcrumb: z.any() })
 export type BreadcrumbHandle = z.infer<typeof BreadcrumbHandle>
 
@@ -18,10 +22,11 @@ export const handle: BreadcrumbHandle & SEOHandle = {
 	getSitemapEntries: () => null,
 }
 
-export async function loader({ request }: Route.LoaderArgs) {
-	const userId = await requireUserId(request)
+export async function loader({ context }: Route.LoaderArgs) {
+	const userId = context.get(userIdContext) as string | null
+	invariantResponse(Boolean(userId), 'Unauthorized', { status: 401 })
 	const user = await prisma.user.findUnique({
-		where: { id: userId },
+		where: { id: userId as string },
 		select: { username: true },
 	})
 	invariantResponse(user, 'User not found', { status: 404 })
diff --git a/app/routes/users+/index.tsx b/app/routes/users+/index.tsx
@@ -1,4 +1,4 @@
-import { searchUsers } from '@prisma/client/sql'
+// using $queryRawUnsafe for LIKE query construction
 import { Img } from 'openimg/react'
 import { redirect, Link } from 'react-router'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
@@ -15,7 +15,10 @@ export async function loader({ request }: Route.LoaderArgs) {
 	}
 
 	const like = `%${searchTerm ?? ''}%`
-	const users = await prisma.$queryRawTyped(searchUsers(like))
+	const users = await prisma.$queryRawUnsafe<{ id: string; username: string; name: string | null; imageObjectKey: string | null }[]>(
+		`SELECT id, username, name, (SELECT "objectKey" FROM "Image" WHERE "userId" = "User"."id" LIMIT 1) as "imageObjectKey" FROM "User" WHERE username ILIKE $1 OR name ILIKE $1 ORDER BY username ASC`,
+		like,
+	)
 	return { status: 'idle', users } as const
 }
 
@@ -49,7 +52,7 @@ export default function UsersRoute({ loaderData }: Route.ComponentProps) {
 									>
 										<Img
 											alt={user.name ?? user.username}
-											src={getUserImgSrc(user.imageObjectKey)}
+											src={getUserImgSrc(user.imageObjectKey ?? undefined)}
 											className="size-16 rounded-full"
 											width={256}
 											height={256}
@@ -70,7 +73,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/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
diff --git a/react-router.config.ts b/react-router.config.ts
diff --git a/server/index.ts b/server/index.ts
