Upgrade react router and add auth middleware #1040

kentcdodds · 2025-09-12T16:13:07Z

Summary

This PR upgrades React Router to version 7.9.0 and implements its new middleware feature for authentication. This change centralizes requireUser and requireAnonymous checks into dedicated middleware functions, replacing scattered direct calls in various routes.

Key changes include:

Upgrading all @react-router/* and react-router packages.
Enabling the v8_middleware feature flag.
Introducing app/middleware.server.ts with requireUserMiddleware and requireAnonymousMiddleware.
Updating settings+/profile.tsx to use requireUserMiddleware.
Updating _auth+/login.tsx, _auth+/signup.tsx, _auth+/onboarding.tsx, _auth+/onboarding_.$provider.tsx, and _auth+/reset-password.tsx to use requireAnonymousMiddleware.
Adjusting server/index.ts to provide the RouterContextProvider for middleware context.
Updating _seo+/sitemap[.]xml.ts to read the build from the new context.
Updating _auth+/auth.$provider.callback.test.ts to pass the correct context type.
Minor type cleanup in users+/index.tsx.

Test Plan

Verify Login/Logout:
- Navigate to /login and successfully log in.
- Navigate to /settings/profile (should be accessible).
- Log out.
Verify Signup/Onboarding:
- Navigate to /signup and successfully create a new account, completing the onboarding flow.
- Navigate to /settings/profile (should be accessible).
- Log out.
Verify Protected Routes (Logged Out):
- While logged out, try to access /settings/profile. You should be redirected to /login.
Verify Anonymous Routes (Logged In):
- While logged in, try to access /login or /signup. You should be redirected to /.
Verify Reset Password Flow:
- Initiate and complete a password reset flow.
Verify Sitemap:
- Navigate to /sitemap.xml and ensure it loads without errors.
Run Tests:
- Execute npm test to ensure all existing tests pass.

Checklist

Tests updated
Docs updated

Screenshots

This commit refactors authentication checks to use react-router's middleware system. This centralizes auth logic and improves code organization. Co-authored-by: me <[email protected]>

cursor · 2025-09-12T16:13:09Z

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
_{Learn more about Cursor Agents}

kentcdodds · 2025-09-12T16:19:56Z

@cursor, the CI build has an error. Please fix this:

✗ Build failed in 1.40s
[commonjs--resolver] Server-only module referenced by client

'#app/middleware.server.ts' imported by route 'app/routes/settings+/profile.tsx'

React Router automatically removes server-code from these exports:
loader, action, middleware, headers

But other route exports in 'app/routes/settings+/profile.tsx' depend on '#app/middleware.server.ts'.

See https://remix.run/docs/en/main/guides/vite#splitting-up-client-and-server-code

cursor · 2025-09-12T16:20:01Z

Working on it! I'll start making changes in this branch.

kentcdodds · 2025-09-12T16:22:52Z

app/routes/_auth+/login.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 = [


@cursor, I don't think this is unstable. Should we remove the prefix?

Working on it! I'll start making changes in this branch.

Co-authored-by: me <[email protected]>

kentcdodds · 2025-09-12T16:24:42Z

app/routes/users+/index.tsx

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


@cursor, don't do this. Instead, run the setup script which will generate the prisma typed sql. This change should be unnecessary once you do that.

I updated the application to align with recent framework changes by migrating middleware exports from unstable_middleware to middleware across several route modules. Additionally, I enhanced data access safety by replacing an unsafe raw SQL query with a typed Prisma SQL function for user searches.

Middleware API Update: I updated the middleware export name from unstable_middleware to middleware in several server-side route modules, including app/routes/_auth+/login.server.ts, app/routes/_auth+/onboarding.server.ts, app/routes/_auth+/onboarding_.$provider.server.ts, app/routes/_auth+/reset-password.server.ts, app/routes/_auth+/signup.server.ts, and app/routes/settings+/profile.server.ts.

Removed Client-Side Middleware: I removed the unstable_middleware export entirely from client-side route modules app/routes/_auth+/onboarding.tsx and app/routes/_auth+/reset-password.tsx, as middleware is typically a server-side concept.

Typed Prisma SQL Query: In app/routes/users+/index.tsx, I replaced the prisma.$queryRawUnsafe call for searching users with a type-safe prisma.$queryRawTyped(searchUsers(like)). I also added an import for searchUsers from @prisma/client/sql to leverage this new typed query functionality, improving query safety and maintainability.

Image Source Type Refinement: In app/routes/users+/index.tsx, I simplified the getUserImgSrc call by removing the ?? undefined fallback for user.imageObjectKey, as the type system now correctly handles null values for the image object key.

_{Learn more about Cursor Agents}

Co-authored-by: me <[email protected]>

Refactor: Use `prisma.$queryRawTyped` for user search Co-authored-by: me <[email protected]>

kentcdodds

@cursor Could you make sure to run linting with --fix, formatting, type checking, testing, and the build?

cursor · 2025-09-12T16:43:23Z

I performed a series of refactors primarily focused on enhancing code readability and consistency across the codebase. This involved reordering imports, standardizing formatting for function calls and complex types, and cleaning up documentation to improve clarity and maintainability.

I reordered and grouped imports in several files, including app/middleware.server.ts, app/routes/_auth+/login.server.ts, and app/utils/cache.server.ts, to maintain a consistent import style.
I improved readability by formatting multiline function calls, such as loader invocations in app/routes/_auth+/auth.$provider.callback.test.ts, and complex type definitions in app/routes/_seo+/sitemap[.]xml.ts and server/index.ts.
I removed extraneous blank lines within bullet points and paragraphs in various markdown documentation files (e.g., docs/database.md, docs/decisions/044-rr-devtools.md) for better conciseness.

6 tasks completed

_{Learn more about Cursor Agents}

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 <[email protected]>

kentcdodds · 2025-09-12T19:17:54Z

@cursor, several of the playwright tests are failing in CI with the following output. Please fix:

8 failed
[chromium] › tests/e2e/2fa.test.ts:5:1 › Users can add 2FA to their account and use it when logging in
[chromium] › tests/e2e/onboarding.test.ts:147:1 › completes onboarding after GitHub OAuth given valid user details
[chromium] › tests/e2e/passkey.test.ts:22:1 › Users can register and use passkeys ──────────────
[chromium] › tests/e2e/passkey.test.ts:131:1 › Failed passkey verification shows error ─────────
[chromium] › tests/e2e/settings-profile.test.ts:10:1 › Users can update their basic info ───────
[chromium] › tests/e2e/settings-profile.test.ts:24:1 › Users can update their password ─────────
[chromium] › tests/e2e/settings-profile.test.ts:55:1 › Users can update their profile photo ────
[chromium] › tests/e2e/settings-profile.test.ts:93:1 › Users can change their email address ────
16 passed (6.3m)
Error: Process completed with exit code 1.

cursor · 2025-09-12T19:17:59Z

I refactored the serverBuildContext by moving its definition to a dedicated file to improve modularity and organization. This context is crucial for sharing server build information with loaders, such as for sitemap generation.

I moved the serverBuildContext definition from server/index.ts to a new, dedicated file: server/router-context.ts.
I updated server/index.ts to import serverBuildContext from the newly created server/router-context.ts file.
I created server/router-context.ts to centralize the serverBuildContext, which provides a shared context for passing ServerBuild data to loaders.

_{Learn more about Cursor Agents}

cursor · 2025-09-12T19:18:41Z

app/middleware.server.ts

+}) => {
+	const cookie = request.headers.get('cookie')
+	const session = await authSessionStorage.getSession(cookie)
+	const sessionId = session.get('sessionId') as string | undefined


Bug: Inconsistent Session Key Causes Authentication Issues

The middleware functions in app/middleware.server.ts use a hardcoded 'sessionId' string for session retrieval. This is inconsistent with the sessionKey constant used throughout the rest of the authentication system, causing authentication failures and incorrect route protection.

cursor · 2025-09-12T19:18:41Z

app/routes/_seo+/sitemap[.]xml.ts

+export const serverBuildContext = createContext<Promise<{
+	error: unknown
+	build: ServerBuild
+}> | null>(null)


Bug: Sitemap Route Fails to Access Server Build Context

The sitemap[.]xml.ts route defines its own serverBuildContext instead of importing the one created in server/index.ts. React Router contexts rely on object identity, so this separate context instance prevents the sitemap from accessing the serverBuild data set by the server.

Co-authored-by: me <[email protected]>

hilja · 2025-09-16T09:46:06Z

app/routes/_seo+/sitemap[.]xml.ts


 export async function loader({ request, context }: Route.LoaderArgs) {
-	const serverBuild = (await context.serverBuild) as { build: ServerBuild }
+	const serverBuild = (await (context as Readonly<RouterContextProvider>).get(


Does this actually work?

I think the routes can accessed like this if I'm not mistaken:

const { routes } = await import('virtual:react-router/server-build')

The loadContext can be ditched completely.

hilja · 2025-09-16T09:48:48Z

app/routes/_seo+/sitemap[.]xml.ts

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


Could use this modified version https://gist.github.com/hilja/5e6f6ec6a86a3e06113501f8d60e20a4

kentcdodds · 2025-09-17T00:04:07Z

@cursor, could you review the comments and try to get things working. Don't worry about the modified seo suggestion. We can look into that in another PR.

cursor · 2025-09-17T00:04:12Z

Background Agent has finished! You can now access it through Cursor.

_{Learn more about Cursor Agents}

Refactor: Use react-router middleware for auth checks

9f9766a

This commit refactors authentication checks to use react-router's middleware system. This centralizes auth logic and improves code organization. Co-authored-by: me <[email protected]>

kentcdodds commented Sep 12, 2025

View reviewed changes

Checkpoint before follow-up message

05e00cf

Co-authored-by: me <[email protected]>

kentcdodds commented Sep 12, 2025

View reviewed changes

cursoragent and others added 2 commits September 12, 2025 16:24

Refactor: Apply requireAnonymousMiddleware to auth routes

1e86901

Co-authored-by: me <[email protected]>

Refactor: Use middleware instead of unstable_middleware

d0db7c6

Refactor: Use `prisma.$queryRawTyped` for user search Co-authored-by: me <[email protected]>

kentcdodds commented Sep 12, 2025

View reviewed changes

Refactor: Improve middleware and context usage

ff7fc72

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 <[email protected]>

kentcdodds marked this pull request as ready for review September 12, 2025 19:15

cursor bot reviewed Sep 12, 2025

View reviewed changes

Extract router context to separate file

426b315

Co-authored-by: me <[email protected]>

hilja reviewed Sep 16, 2025

View reviewed changes

Upgrade react router and add auth middleware #1040

Are you sure you want to change the base?

Upgrade react router and add auth middleware #1040

Uh oh!

Conversation

kentcdodds commented Sep 12, 2025

Summary

Test Plan

Checklist

Screenshots

Uh oh!

cursor bot commented Sep 12, 2025

Uh oh!

kentcdodds commented Sep 12, 2025

Uh oh!

cursor bot commented Sep 12, 2025

Uh oh!

kentcdodds Sep 12, 2025

Choose a reason for hiding this comment

Uh oh!

cursor bot Sep 12, 2025

Choose a reason for hiding this comment

Uh oh!

kentcdodds Sep 12, 2025

Choose a reason for hiding this comment

Uh oh!

cursor bot Sep 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kentcdodds left a comment

Choose a reason for hiding this comment

Uh oh!

cursor bot commented Sep 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kentcdodds commented Sep 12, 2025

Uh oh!

cursor bot commented Sep 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cursor bot Sep 12, 2025

Choose a reason for hiding this comment

Bug: Inconsistent Session Key Causes Authentication Issues

Uh oh!

cursor bot Sep 12, 2025

Choose a reason for hiding this comment

Bug: Sitemap Route Fails to Access Server Build Context

Uh oh!

hilja Sep 16, 2025

Choose a reason for hiding this comment

Uh oh!

hilja Sep 16, 2025

Choose a reason for hiding this comment

Uh oh!

kentcdodds commented Sep 17, 2025

Uh oh!

cursor bot commented Sep 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

cursor bot Sep 12, 2025 •

edited

Loading

cursor bot commented Sep 12, 2025 •

edited

Loading

cursor bot commented Sep 12, 2025 •

edited

Loading

cursor bot commented Sep 17, 2025 •

edited

Loading