During operation, invoking the next-auth function Signout() in production will direct the user to "localhost:3000" regardless of whether a callbackUrl is provided

Question

During operation, invoking the next-auth function Signout() in production will direct the user to "localhost:3000" regardless of whether a callbackUrl is provided

After successfully deploying my Next.js app to AWS Amplify and setting up my environment variables correctly (including APP_URL and NEXTAUTH_URL, which are the same), I encountered an issue when attempting to sign out using credentials from MongoDB Atlas. Instead of being redirected appropriately, I found myself redirected to localhost:3000.

Upon inspecting the Network tab of DevTools, I noticed a call named 'signout' with a 200 response and a Payload that seemed fine:

csrfToken: 20dc1de55c4e40c7c0ac8d3ce675bff4522ba665d79e04c9da00f6365a23c30c
callbackUrl:
json: true

However, the Request Headers of this 'signout' call indicated an issue with the 'cookies' entry:

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

Following the 'signout' call, I observed another call named 'localhost' being repeated intermittently while the page was open, using headers that pointed to a localhost URL:

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

Despite my environment variables being correctly set in AWS Amplify, with NEXT_PUBLIC_APP_URL and NEXT_PUBLIC_NEXTAUTH_URL both pointing to the same URL, the issue persisted.

Even after simplifying my Signout() function and verifying the environment variables by logging them, the issue remained unresolved. I attempted different approaches such as changing the callbackUrl and calling Signout() without any parameters, but to no avail.

I thoroughly checked my codebase for any references to localhost:3000, including the env.local file that was not pushed to Github, but found nothing. I also tried suggested solutions from GitHub threads, but none of them addressed the problem.

Despite creating a new AWS Amplify app to eliminate cached files, the issue of being redirected to localhost:3000 persisted in production. This redirection was puzzling considering the absence of any localhost references in my code.

For further examination, my repository can be found here (Master branch is being deployed): https://github.com/joaotextor/trading-center

Live preview and credentials are available in the Github Repository to prevent this question from being flagged as spam. Your help is appreciated!

javascript next.js aws-amplify production-environment next-auth

Answer 1

Answer №1

Upon careful investigation of the code, I reached a conclusion that the next-auth redirect, callbackUrl, and cookie setting were experiencing bugs. However, I was able to find a workaround to address this issue.

Before I delve into the solution that I applied, let me first outline the bug that I encountered:

The bug became apparent to me when I utilized the redirect() callback within the [...nextauth].js file.

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

The baseUrl value was returning as http://localhost:3000

Additionally, I experimented with setting useSecureCookies to "true" and programmatically setting the callback-url cookie in 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, despite configuring the setup in this manner, the cookie value persisted as 'http://localhost:3000'!

This led me to realize that if the redirect URL was localhost, I should have been redirected to it when signing in, not just when signing out.

Recalling a past issue with the redirect in the SignIn() function during system development, I remembered implementing a workaround using the useRouter from next/router.

Subsequently, I applied a similar fix to the SignOut function by setting the redirect prop to 'false' and utilizing router.push() to navigate to the desired path:

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

Following these adjustments, everything functioned as intended.

Answer 2

Upon careful investigation of the code, I reached a conclusion that the next-auth redirect, callbackUrl, and cookie setting were experiencing bugs. However, I was able to find a workaround to address this issue.

Before I delve into the solution that I applied, let me first outline the bug that I encountered:

The bug became apparent to me when I utilized the redirect() callback within the [...nextauth].js file.

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

The baseUrl value was returning as http://localhost:3000

Additionally, I experimented with setting useSecureCookies to "true" and programmatically setting the callback-url cookie in 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, despite configuring the setup in this manner, the cookie value persisted as 'http://localhost:3000'!

This led me to realize that if the redirect URL was localhost, I should have been redirected to it when signing in, not just when signing out.

Recalling a past issue with the redirect in the SignIn() function during system development, I remembered implementing a workaround using the useRouter from next/router.

Subsequently, I applied a similar fix to the SignOut function by setting the redirect prop to 'false' and utilizing router.push() to navigate to the desired path:

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

Following these adjustments, everything functioned as intended.

Answer 3

Answer №2

Dealing with a similar error, I found that my issue was due to the incorrect environment variable being set to

NEXTAUTH_URL=http://localhost:3000

Once I corrected it to

NEXTAUTH_URL=https://example.com

the problem was resolved for me.

Answer 4

Dealing with a similar error, I found that my issue was due to the incorrect environment variable being set to

NEXTAUTH_URL=http://localhost:3000

Once I corrected it to

NEXTAUTH_URL=https://example.com

the problem was resolved for me.

During operation, invoking the next-auth function Signout() in production will direct the user to "localhost:3000" regardless of whether a callbackUrl is provided

Answer №1

Answer №2

Similar questions

Within Vuex, the object store.state.activities contains a specific key labeled "list" which initially holds an array of three items. However, when attempting to access store.state.activities.list directly, an empty array

Why isn't the program recording user input in the console when the form is submitted?

Show the button's value on the text box using JavaScript

Create a WebGL object remotely on the server

Struggling to Make Div Refresh with jQuery/JS in my Rails Application

Transitioning from Event-driven Object Oriented design to Redux structure

Adding External JS Files to a Node.js Project

Cannot retrieve Global variables when using chrome.tabs.executescript in Chrome 55

Encountering an issue where the getServerSession function consistently returns null within API route handlers in Next.js 13.5.2 when utilizing NextAuth for

Exploring the implementation of --history-api-fallback in webpack

Drop down calendar in Javascript

Utilize Javascript to establish a fresh attribute by analyzing other attributes contained in an array within the object

Guide to switching content within a DIV when the up and down buttons are pressed using JavaScript and jQuery

Tips for accessing $parent of ng-repeat from ng-include

Tips for sending an email to an address from a user input field in React.js/Express.js

Server-side props become inaccessible on the client side due to middleware usage

Can you clarify the dissimilarity between `knex().select("id").from("users")` and `knex("users").select("id")` in Knex?

What is the best way to conceal two Bootstrap divs that should not both be visible at the same time?

Switching the theme color from drab grey to vibrant blue

Viewing a Google Charts graph upon the loading of a web page