CSRF Problem on NextJs 13.4

[Sepehrworklife]

Question 💬

I do check next-auth with NextJs v12 and v13 separately, as you may know, v12 uses the pages directory and v13 uses the app directory. next-auth sign-in works perfectly on v12 but not on v13.
the question is why at NextJs v12 when I try to sign-in everything works fine but on v13 the page redirects to http://localhost:3000/api/auth/signin?csrf=true.
It should be mentioned that I check Nextjs v13 on both the production and development environments. and this problem occurs only in the development environment.
Something to be mentioned:

1. I did try with and without env variables like: NEXTAUTH_URL, NEXTAUTH_SECRET
2. I did try run a development server with local-ssl-proxy

I will appreciate any answers ❤️

How to reproduce ☕️

Install a new Nextjs project and next-auth beside it.
npx [email protected]
cd project-folder
npm i next-auth
create a new file at: /src/app/api/auth/[...nextauth]/route.ts
Add code like the example provided by the next-auth with a few changes.

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import FacebookProvider from "next-auth/providers/facebook";
import GithubProvider from "next-auth/providers/github";
import TwitterProvider from "next-auth/providers/twitter";
import Auth0Provider from "next-auth/providers/auth0";
import Credentials from "next-auth/providers/credentials";
// import AppleProvider from "next-auth/providers/apple"
// import EmailProvider from "next-auth/providers/email"

// For more information on each option (and a full list of options) go to
// https://next-auth.js.org/configuration/options
export const authOptions = {
  // https://next-auth.js.org/configuration/providers/oauth
  providers: [
    /* EmailProvider({
         server: process.env.EMAIL_SERVER,
         from: process.env.EMAIL_FROM,
       }),
    // Temporarily removing the Apple provider from the demo site as the
    // callback URL for it needs updating due to Vercel changing domains

    Providers.Apple({
      clientId: process.env.APPLE_ID,
      clientSecret: {
        appleId: process.env.APPLE_ID,
        teamId: process.env.APPLE_TEAM_ID,
        privateKey: process.env.APPLE_PRIVATE_KEY,
        keyId: process.env.APPLE_KEY_ID,
      },
    }),
    */
    Credentials({
      id: "t",
      name: "asd",
      type: "credentials",
      credentials: {
        mobile: { label: "mobile", type: "text" },
      },
      async authorize(credentials, req) {
        return { id: 1, name: "test", email: "test", image: "x" };
      },
    }),

    FacebookProvider({
      clientId: process.env.FACEBOOK_ID,
      clientSecret: process.env.FACEBOOK_SECRET,
    }),
    GithubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
    GoogleProvider({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET,
    }),
    TwitterProvider({
      clientId: process.env.TWITTER_ID,
      clientSecret: process.env.TWITTER_SECRET,
    }),
    Auth0Provider({
      clientId: process.env.AUTH0_ID,
      clientSecret: process.env.AUTH0_SECRET,
      issuer: process.env.AUTH0_ISSUER,
    }),
  ],
  theme: {
    colorScheme: "light",
  },
  callbacks: {
    async jwt({ token }) {
      token.userRole = "admin";
      return token;
    },
  },
};
const handler = NextAuth(authOptions);

export {handler as GET, handler as POST};

run the development server: npm run dev
go to http://localhost:3000/api/auth/signin
try to log in with credentials and you can see that page redirects to http://localhost:3000/api/auth/signin?csrf=true

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

[Yavonix]

There seems to be an issue reading request headers in node 18 + nextJS 13 on the GET route handler. See here. I believe next-auth is failing to read the request cookies due to an issue in nextjs, therefore it is unable to validate the csrf token and redirects to the sign in page with a new csrf token. Updating my node version from v18.1.0 to v20.4.0 resolved the issue for me 🎉✨.

[ashick1234]

Hi above issue after login screen take too many time to load next page?

[rahul-reveation]

I upgraded to v20.6.0 and I still see the same issue.

[Amama-Fatima]

Same. I am on v20.11.0 and the issue persists. Did you find any solution?

[zahidh1626]

after a long time of headache. it works when upgrading to node v20.7.0

[Sepehrworklife]

Long long [...., long] time of headache.
I appreciate your help.
Thanks!

[petermazzocco]

I am on version 20.9.0 and this is occuring

[onipun]

I'm on version 20.9.0 too.

so this is the login page.

when i click the signin button or any other provider it will redirect to port 80.

so if i want to test full flow, is it mandatory to deploy to varcel first? not sure is there stated in document to deploy in order to test

[turbowars]

I am on Node: v21.6.1 and Next js: 14. Should I be downgrading to make it work? :(

[aomini]

Since, it's a CSRF error the most possible cause is due cross-site integration. If you have your NEXTAUTH_URL to be different than the page domain from where you're doing signin() then it occurs.

[Shahriar-Shakil]

removing NEXTAUTH_URL from my env file solve my issue

[gino8080]

this should be the accepted answer!