In production, calling in next-auth function Signout(), with or without callbackUrl, always brings the user to "localhost:3000"

Question

I deployed my Next.js app to AWS Amplify, set my environment variables correctly (including APP_URL and NEXTAUTH_URL, which are the same btw), and despite the fact I can sign in using credentials (from MongoDB Atlas), when I click the sign out button I get redirected to localhost:3000.

On Network tab of DevTools, I get a call named 'signout' with a 200 response with this Payload, which is OK:

csrfToken: 20dc1de55c4e40c7c0ac8d3ce675bff4522ba665d79e04c9da00f6365a23c30c
callbackUrl: https://tradingcenter.joaotextor.com
json: true

However, on the Request Headers of my 'signout' call I notice this 'cookies' entry:

cookie: (...) next-auth.callback-url=http%3A%2F%2Flocalhost%3A3000 (...)

After this 'signout' call, I get another one named 'localhost', that keeps repeating from time to time while the page is opened, with these headers:

General
Request URL: http://localhost:3000/
Referrer Policy: strict-origin-when-cross-origin
Request Headers
Provisional headers are shown Learn more
sec-ch-ua: "Not_A Brand";v="99", "Google Chrome";v="109", "Chromium";v="109"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

My environment variables on AWS Amplify are like this (I know, there's no point in having two for the same url):

NEXT_PUBLIC_APP_URL https://tradingcenter.joaotextor.com NEXT_PUBLIC_NEXTAUTH_URL https://tradingcenter.joaotextor.com

My Signout() function is very simple:

<MenuItem onClick={() => {
  console.log(process.env.NEXT_PUBLIC_APP_URL)
  signOut({callbackUrl: process.env.NEXT_PUBLIC_APP_URL})
  }
}>
    Logout
</MenuItem>

I placed that console.log there just to make sure it was being grabbed from the env variables I setup on Amplify, and yes, it is showing on console.

I already tried to pass '/' as callbackUrl and also call Signout() without any params (which would be fine) but it doesn't work. It seems the problem is not in the callback itself.

I already checked, using the find tool on VS Code, and there's nothing related to localhost:3000 there anymore. Even my env.local (which is not pushed to Github and therefore not read by Amplify when cloning and deploying the app) does not have the localhost url.

Already tried this and this. Didn't work.

I removed my Amplify app and created a new one (So I could avoid any unwanted cached files) and the problem still persists.

Since there's no localhost:3000 reference in my code, how come does it redirect me to it in production?

This is my repository, for further examination (Master branch is the one being deployed): https://github.com/joaotextor/trading-center

The live preview and credentials are on the Github Repository so stackoverflow does not flag this question as a spam.

Thanks in advance!

Answer 1

After debugging the code, I came the following conclusion: next-auth redirect / callbackUrl / cookie setting is bugged. So I manage to workaround this bug.

But before I explain how I 'fixed' this, let me lay out this bug:

I figured out the problem by using the redirect() callback on [...nextauth].js file.

callbacks: {
  async redirect({ url, baseURl }) {
    console.log(`URL: ${url}`)
    console.log(`BASEURL: ${baseUrl}`)
  }
}

The baseUrl returns http://localhost:3000

Also, I tried setting useSecureCookies to "true" and set the callback-url cookie manually inside the nextauth options:

  useSecureCookies: true,
  
  cookies: {
    callbackUrl: {
      name: '__Secure-next-auth.callback-url',
      options: {
        sameSite: 'lax',
        path: 'https://tradingcenter.joaotextor.com',
        secure: true
      }
    }
  }

To my surprise, even with this setup the cookie value is set to 'http://localhost:3000'!

Then I noticed something: If the redirect url is set to localhost, how come I'm not being redirected to it when I signin, but only when I signout?

Then I remembered I was having a problem with redirect on SignIn() function in way back when I was developing the system, and I made a workaround using useRouter from next/router.

Then, I applied the same fix on SignOut, just by setting the redirect prop to 'false' and using router.push() to the desired path:

<MenuItem onClick={() => {
  signOut({redirect: false})
  router.push(process.env.NEXT_PUBLIC_NEXTAUTH_URL)
}}>Logout</MenuItem>

And there you go. Everything worked as expected.