React-Router V7 Framework Mode Sign Out Results In infinite loop with new middleware.

[keepforever]

Preliminary Checks

• I have reviewed the documentation: https://clerk.com/docs

• I have searched for existing issues: https://github.com/clerk/javascript/issues

• I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)

• This issue is not a question, general help request, or anything other than a bug report directly related to Clerk. Please ask questions in our Discord community: https://clerk.com/discord.

Reproduction

https://www.loom.com/share/d554502f9c0c4759992d22ce15e7eef7

Publishable key

pk_test_ZW5hYmxlZC1tdWxsZXQtNjQuY2xlcmsuYWNjb3VudHMuZGV2JA

Description

Steps to reproduce:

NOTE: I have enable the unstable_middleware future flag in react router (see react-router.config in the attached reop).

I understand that you guys probably havn't had time to account for this, but, I wanted to raise it because I'm excited to leverage the new middleware and I'll be blocked if there's an incompatibility with @clerk/react-router dep. I understand this might also not be a clerk issue, but, I wanted to raise it with y'all so you could maybe open communication with the react-router team about it?

1. Step 1 - Pull THIS REPO
2. Step 2 - Install deps
3. add necessary env variables
4. run the app
5. you might see the bug at this point.
6. If not, you should sign in, it will redirect you to /
   7 use the UserButton to sign out
7. Bug should occur now

Expected behavior:

I expect to be redirected to /sign-in after

Actual behavior:

An infinite loop inssues and the the url looks like:

http://localhost:5173/sign-in?return_to=%2Fsign-in%3Freturn_to%3D%252Fsign-in%253Freturn_to%253D%25252Fsign-in%25253Freturn_to%25253D%2525252Fsign-in%2525253Freturn_to%2525253D%252525252Fsign-in%252525253Freturn_to%252525253D%25252525252Fsign-in%25252525253Freturn_to%25252525253D%2525252525252Fsign-in%2525252525253Freturn_to%2525252525253D%252525252525252Fsign-in%252525252525253Freturn_to%252525252525253D%25252525252525252Fsign-in%25252525252525253Freturn_to%25252525252525253D%2525252525252525252Fsign-in%2525252525252525253Freturn_to%2525252525252525253D%252525252525252525252Fsign-in%252525252525252525253Freturn_to%252525252525252525253D%25252525252525252525252Fsign-in%25252525252525252525253Freturn_to%25252525252525252525253D%2525252525252525252525252Fsign-in%2525252525252525252525253Freturn_to%2525252525252525252525253D%252525252525252525252525252Fsign-in%252525252525252525252525253Freturn_to%252525252525252525252525253D%25252525252525252525252525252Fsign-in%25252525252525252525252525253Freturn_to%25252525252525252525252525253D%2525252525252525252525252525252Fsign-in%2525252525252525252525252525253Freturn_to%2525252525252525252525252525253D%252525252525252525252525252525252Fsign-in%252525252525252525252525252525253Freturn_to%252525252525252525252525252525253D%25252525252525252525252525252525252Fsign-in%25252525252525252525252525252525253Freturn_to%25252525252525252525252525252525253D%2525252525252525252525252525252525252Fsign-in%2525252525252525252525252525252525253Freturn_to%2525252525252525252525252525252525253D%252525252525252525252525252525252525252Fsign-in%252525252525252525252525252525252525253Freturn_to%252525252525252525252525252525252525253D%25252525252525252525252525252525252525252Fsign-in%25252525252525252525252525252525252525253Freturn_to%25252525252525252525252525252525252525253D%2525252525252525252525252525252525252525252Fsign-in%2525252525252525252525252525252525252525253Freturn_to%2525252525252525252525252525252525252525253D%252525252525252525252525252525252525252525252Fsign-in%252525252525252525252525252525252525252525253Freturn_to%252525252525252525252525252525252525252525253D%25252525252525252525252525252525252525252525252Fsign-in%25252525252525252525252525252525252525252525253Freturn_to%25252525252525252525252525252525252525252525253D%2525252525252525252525252525252525252525252525252Fsign-in%2525252525252525252525252525252525252525252525253Freturn_to%2525252525252525252525252525252525252525252525253D%252525252525252525252525252525252525252525252525252Fsign-in%252525252525252525252525252525252525252525252525253Freturn_to%252525252525252525252525252525252525252525252525253D%25252525252525252525252525252525252525252525252525252Fsign-in%25252525252525252525252525252525252525252525252525253Freturn_to%25252525252525252525252525252525252525252525252525253D%2525252525252525252525252525252525252525252525252525252Fsign-in%2525252525252525252525252525252525252525252525252525253Freturn_to%2525252525252525252525252525252525252525252525252525253D%252525252525252525252525252525252525252525252525252525252Fsign-in%252525252525252525252525252525252525252525252525252525253Freturn_to%252525252525252525252525252525252525252525252525252525253D%25252525252525252525252525252525252525252525252525252525252Fsign-in%25252525252525252525252525252525252525252525252525252525253Freturn_to%25252525252525252525252525252525252525252525252525252525253D%2525252525252525252525252525252525252525252525252525252525252Fsign-in%2525252525252525252525252525252525252525252525252525252525253Freturn_to%2525252525252525252525252525252525252525252525252525252525253D%252525252525252525252525252525252525252525252525252525252525252Fsign-in%252525252525252525252525252525252525252525252525252525252525253Freturn_to%252525252525252525252525252525252525252525252525252525252525253D%25252525252525252525252525252525252525252525252525252525252525252Fsign-in%25252525252525252525252525252525252525252525252525252525252525253Freturn_to%25252525252525252525252525252525252525252525252525252525252525253D%2525252525252525252525252525252525252525252525252525252525252525252Fsign-in%2525252525252525252525252525252525252525252525252525252525252525253Freturn_to%2525252525252525252525252525252525252525252525252525252525252525253D%252525252525252525252525252525252525252525252525252525252525252525252Fsign-in%252525252525252525252525252525252525252525252525252525252525252525253Freturn_to%252525252525252525252525252525252525252525252525252525252525252525253D%25252525252525252525252525252525252525252525252525252525252525252525252Fsign-in%25252525252525252525252525252525252525252525252525252525252525252525253Freturn_to%25252525252525252525252525252525252525252525252525252525252525252525253D%2525252525252525252525252525252525252525252525252525252525252525252525252Fsign-in%2525252525252525252525252525252525252525252525252525252525252525252525253Freturn_to%2525252525252525252525252525252525252525252525252525252525252525252525253D%252525252525252525252525252525252525252525252525252525252525252525252525252F

Environment

System:
    OS: macOS 15.3.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 32.51 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.14.0 - ~/.nvm/versions/node/v22.14.0/bin/node
    npm: 10.9.2 - ~/.nvm/versions/node/v22.14.0/bin/npm
    pnpm: 10.4.1 - ~/.nvm/versions/node/v22.14.0/bin/pnpm
    Watchman: 2025.02.17.00 - /opt/homebrew/bin/watchman
  Browsers:
    Brave Browser: 133.1.75.181
    Chrome: 133.0.6943.142
    Safari: 18.3
  npmPackages:
    @clerk/react-router: ^1.1.4 => 1.1.4 
    @react-router/dev: ^7.3.0 => 7.3.0 
    @react-router/node: ^7.3.0 => 7.3.0 
    @react-router/serve: ^7.3.0 => 7.3.0 
    @tailwindcss/vite: ^4.0.0 => 4.0.12 
    @types/node: ^20 => 20.17.23 
    @types/react: ^19.0.1 => 19.0.10 
    @types/react-dom: ^19.0.1 => 19.0.4 
    isbot: ^5.1.17 => 5.1.23 
    react: ^19.0.0 => 19.0.0 
    react-dom: ^19.0.0 => 19.0.0 
    react-router: ^7.3.0 => 7.3.0 
    react-router-devtools: ^1.1.0 => 1.1.6 
    tailwindcss: ^4.0.0 => 4.0.12 
    typescript: ^5.7.2 => 5.8.2 
    vite: ^5.4.11 => 5.4.14 
    vite-tsconfig-paths: ^5.1.4 => 5.1.4

[lasseklovstad]

I am also looking forward to using clerk with the new middleware! One thing i noticed in your repro is that rootAuthLoader is called in the root loader which will then run after the middlewares. shouldn't the rootAuthLoader run first before checking if the user is authenticated? Have you tried having rootAuthLoader function as a middleware before the authMiddleware?

[keepforever]

I think I may have figured out what was causing the infinite loop. I think it might be the fact I was throwing a redirect in my requireUserId helper function. I didn't think about what edge cases might be hit in the middleware paradigm.

I'll def report back here once I get back to that spike, but, I think this is still a good issue because the clerk docs should def recommend a pattern for middleware in react-router moving forward once it's stable.