Redirect URL not updating correctly in browser after successful redirect

[ameer-clara]

Link to the code that reproduces this issue

https://github.com/renanleonel/next-auth-v5-middleware

To Reproduce

1. Start the application in development mode (next dev)
2. Log in on http://localhost:3000/ (using test@test.com/aaaaaaaa)
3. After successful login, the page redirects to http://localhost:3000/protected

Current vs. Expected behavior

Following the steps from the previous section, I expected the URL in the browser to update to http://localhost:3000/protected after the successful redirect. However, the URL remains as http://localhost:3000/ even though the /protected page is rendered correctly.

This issue was not present in Next.js version 14.1.1. The problem seems to have been introduced in a later release.

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 20.6.0: Sun Nov  6 23:17:00 PST 2022; root:xnu-7195.141.46~1/RELEASE_X86_64
  Available memory (MB): 16384
  Available CPU cores: 8
Binaries:
  Node: 18.17.0
  npm: 9.6.7
  Yarn: 1.22.5
  pnpm: 9.1.1
Relevant Packages:
  next: 14.2.3 // Latest available version is detected (14.2.3).
  eslint-config-next: 14.1.0
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.4.5
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Navigation, Parallel & Intercepting Routes

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local), Vercel (Deployed)

Additional context

I tested my reproduction against releases, and the first one that introduced the bug was "14.2.0-canary.0", reverting to "14.1.2" resolves the issue.

Based on the release notes for Next.js 14.2.0, some changes that could potentially be related to this redirect URL issue are:

provide interception rewrites to edge runtime: #61414
fix navigation issue when dynamic param casing changes: #61726
ensure mpa navigations to the same URL work after restoring from bfcache: #63155
fix router crash on revalidate + popstate: #62383

These changes involve interception routes, navigation with dynamic parameters, bfcache restoration, and router fixes around revalidation/popstate which may have unintentionally impacted the redirect URL behavior.

[ztanner]

Hi @ameer-clara -- I cannot reproduce the issue you're describing. Here's a video of me running your reproduction below.

CleanShot.2024-05-18.at.12.28.10.mp4

Your reproduction also doesn't make use of interception routes. Did you provide the correct link?

Have you tried clearing your .next folder? What browser are you using?

[ameer-clara]

Thanks for your prompt response and posting the video. That is the expected behavior. The issue occurs when you update to release >14.1.2.

bug.mov

See attached video of the reproduction and fix when reverted to an earlier version.

[ztanner]

Thanks for your prompt response and posting the video. That is the expected behavior. The issue occurs when you update to release >14.1.2.

bug.mov

See attached video of the reproduction and fix when reverted to an earlier version.

Sorry, I didn’t realize the repro was pinned to the working version. We’ll take a look!

[ulasdemirci0]

The issue was related to update procedure.
I resolved it by moving my src folder to a freshly installed Next.js project and manually adding my other node modules using pnpm add.

Surprisingly, this fixed the problem.

You can use same procedure for your project, then manually add required modules and move your src folder completely.

And never use again pnpm update or npm update..

[ameer-clara]

@ulasdemirci0 thanks for sharing your fix. If i go through this pain, will it fix the vercel deployment too?

[ulasdemirci0]

@ulasdemirci0 thanks for sharing your fix. If i go through this pain, will it fix the vercel deployment too?

I don't have a clue, my project still in development stage on localhost...

But it's the only decent fix I found since 3 days.

Even you delete everything and just install from fresh package.json doesn't work. I moved my source to fresh installed nextjs.

It's really weird bug also I found other issues on github this bug didn't solved since nextjs 12

[ulasdemirci0]

I guess i found the main reason of this bug...

If you delete layout.tsx at root of your project nested layouts works but redirect function doesn't.

[zaru]

I am experiencing the same issue. My reproduction code works fine with version 14.1.3, but Parallel Routes do not function correctly in version 14.2.2.

Here is the sample repository:
https://github.com/zaru/nextjs-parallel-routes-issue-65936

2024-05-20.10.34.41.mov

same issue: #65411

[ztanner]

Hi @ameer-clara --

Upon closer inspection of the reproduction, it seems like next-auth is conflicting with your middleware redirect.

I was able to get it to work by updating your signIn and signOut methods as follows:

export async function login(prevState: any, formData: FormData) {
  // ...existing code
  await signIn('credentials', { redirectTo: '/protected', email, password })
  // ...existing code
}

export async function logout() {
  await signOut({ redirectTo: '/' })
}

Here's what's happening:

• you submit the sign in form
• the signIn server action from next-auth is redirecting to / by default when no redirectTo is specified (source)
• importantly: at this point, the router has already received a response from the server, indicating it's on the / page.
• Next.js will fire off an intra-app request to / since that's what the redirect told it to do, but because the user is now authenticated, your middleware signaled it to instead forward the request to /protected
• The signIn request to / returns the page data for /protected, hence the UI updating, but not the URL.

I think the right way to fix this is to prevent next-auth from redirecting the server action handler to the / page, as your intended behavior is to redirect to /protected.

I'm going to close this issue as I believe this is behaving as expected, and will separately look into the other linked issues in this thread, as I suspect they're different.

[ameer-clara]

@ztanner Appreciate your super fast turnaround on this and for your detailed message and explanation. Your fix works, however, i also see a 303 in the logs as well as the root url not updating. I will post an updated repo and video to highlight the problem. Thanks again

[CrewS]

Encountered the same problem, the rewrite method in next.config.js was abnormal