epic-stack icon indicating copy to clipboard operation
epic-stack copied to clipboard

Upgrade react router and add auth middleware

Open kentcdodds opened this issue 2 months ago • 8 comments

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

  1. Verify Login/Logout:
    • Navigate to /login and successfully log in.
    • Navigate to /settings/profile (should be accessible).
    • Log out.
  2. 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.
  3. Verify Protected Routes (Logged Out):
    • While logged out, try to access /settings/profile. You should be redirected to /login.
  4. Verify Anonymous Routes (Logged In):
    • While logged in, try to access /login or /signup. You should be redirected to /.
  5. Verify Reset Password Flow:
    • Initiate and complete a password reset flow.
  6. Verify Sitemap:
    • Navigate to /sitemap.xml and ensure it loads without errors.
  7. Run Tests:
    • Execute npm test to ensure all existing tests pass.

Checklist

  • [x] Tests updated
  • [ ] Docs updated

Screenshots


Open in Cursor Open in Web

kentcdodds avatar Sep 12 '25 16:09 kentcdodds