Upgrade react router and add auth middleware

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

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('/')
+}
+

app/routes/_auth+/auth.$provider.callback.test.ts

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

app/routes/_auth+/login.server.ts

@@ -9,6 +9,9 @@
 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]
 
 const verifiedTimeKey = 'verified-time'
 const unverifiedSessionIdKey = 'unverified-session-id'

app/routes/_auth+/login.tsx

@@ -11,7 +11,7 @@
 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'
 import {
 	ProviderConnectionForm,
 	providerNames,
@@ -37,13 +37,11 @@
 	options: z.object({ challenge: z.string() }),
 }) 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, {

app/routes/_auth+/onboarding.server.ts

@@ -3,6 +3,9 @@
 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]
 
 export async function handleVerification({ submission }: VerifyFunctionArgs) {
 	invariant(

app/routes/_auth+/onboarding.tsx

@@ -7,12 +7,7 @@ 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'
 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 +37,6 @@ const SignupFormSchema = z
 	.and(PasswordAndConfirmPasswordSchema)
 
 async function requireOnboardingEmail(request: Request) {
-	await requireAnonymous(request)
 	const verifySession = await verifySessionStorage.getSession(
 		request.headers.get('cookie'),
 	)

app/routes/_auth+/onboarding_.$provider.server.ts

@@ -1,19 +1,3 @@
-import { invariant } from '@epic-web/invariant'
-import { redirect } from 'react-router'
-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 async function handleVerification({ submission }: VerifyFunctionArgs) {
-	invariant(
-		submission.status === 'success',
-		'Submission should be successful by now',
-	)
-	const verifySession = await verifySessionStorage.getSession()
-	verifySession.set(onboardingEmailSessionKey, submission.value.target)
-	return redirect('/onboarding', {
-		headers: {
-			'set-cookie': await verifySessionStorage.commitSession(verifySession),
-		},
-	})
-}
+export const middleware = [requireAnonymousMiddleware]

app/routes/_auth+/onboarding_.$provider.tsx

@@ -17,11 +17,7 @@ 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'
 import { ProviderNameSchema } from '#app/utils/connections.tsx'
 import { prisma } from '#app/utils/db.server.ts'
 import { useIsPending } from '#app/utils/misc.tsx'
@@ -53,7 +49,6 @@ async function requireData({
 	request: Request
 	params: Params
 }) {
-	await requireAnonymous(request)
 	const verifySession = await verifySessionStorage.getSession(
 		request.headers.get('cookie'),
 	)

app/routes/_auth+/reset-password.server.ts

@@ -4,6 +4,9 @@
 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]
 
 export async function handleVerification({ submission }: VerifyFunctionArgs) {
 	invariant(

app/routes/_auth+/reset-password.tsx

@@ -5,11 +5,7 @@ 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'
 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 +20,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'),
 	)

app/routes/_auth+/signup.server.ts

@@ -0,0 +1,3 @@
+import { requireAnonymousMiddleware } from '#app/middleware.server.ts'
+
+export const middleware = [requireAnonymousMiddleware]

app/routes/_auth+/signup.tsx

@@ -8,7 +8,6 @@
 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,
@@ -29,8 +28,7 @@
 	email: EmailSchema,
 })
 
 export async function loader({ request }: Route.LoaderArgs) {
-	await requireAnonymous(request)
 	return null
 }
 

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

app/routes/settings+/profile.server.ts

@@ -0,0 +1,3 @@
+import { requireUserMiddleware } from '#app/middleware.server.ts'
+
+export const middleware = [requireUserMiddleware]

app/routes/settings+/profile.tsx

@@ -4,7 +4,7 @@ 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'
@@ -18,10 +18,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 })

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>