Error: This action with HTTP GET is not supported by NextAuth.js

[fasilminale]

Question 💬

Unable to authenticate my Next.js app with credentials. Error: This action with HTTP GET is not supported by NextAuth.js

As far as I know everything is correct according to the doc. and it was working too. it suddenly start returning this error.

{
  "name": "materio-mui-react-nextjs-admin-template-free",
  "description": "Most Powerful & Comprehensive Free MUI React NextJS Admin Dashboard Template built for developers! 🚀",
  "license": "MIT",
  "version": "1.0.0",
  "author": {
    "name": "IWorkplc",
    "url": "https://iworkplc.com/"
  },
  "bugs": {
    "url": "https://github.com/themeselection/materio-mui-react-nextjs-admin-template-free/issues"
  },
  "private": false,
  "repository": {
    "type": "git",
    "url": "https://github.com/themeselection/materio-mui-react-nextjs-admin-template-free.git"
  },
  "homepage": "https://themeselection.com/products/materio-free-mui-react-nextjs-admin-template/",
  "keywords": [
    "react",
    "javascript",
  ],
  "scripts": {
    "info": "next info",
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "export": "next export",
    "lint": "eslint --fix \"src/**/*.{js,jsx}\"",
    "format": "prettier --write \"src/**/*.{js,jsx}\"",
    "postinstall": "patch-package"
  },
  "dependencies": {
    "@emotion/cache": "^11.6.0",
    "@emotion/react": "^11.7.0",
    "@emotion/server": "^11.4.0",
    "@emotion/styled": "^11.6.0",
    "@iconify/react": "^4.0.0",
    "@material-ui/icons": "^4.11.3",
    "@mui/icons-material": "^5.10.15",
    "@mui/lab": "^5.0.0-alpha.70",
    "@mui/material": "^5.4.3",
    "@popperjs/core": "^2.11.2",
    "@react-oauth/google": "^0.5.0",
    "@reduxjs/toolkit": "^1.9.0",
    "apexcharts-clevision": "3.28.5",
    "axios": "^1.2.0",
    "apisauce": "^2.1.6",
    "babel-eslint": "^10.1.0",
    "clsx": "^1.1.1",
    "formik": "^2.2.9",
    "mdi-material-ui": "^7.1.0",
    "moment": "^2.29.4",
    "next": "12.3.1",
    "next-auth": "^4.14.0",
    "nprogress": "^0.2.0",
    "react": "17.0.2",
    "react-apexcharts": "^1.3.9",
    "react-datepicker": "^4.5.0",
    "react-dom": "17.0.2",
    "react-perfect-scrollbar": "^1.5.8",
    "react-popper": "^2.2.5",
    "react-redux": "^8.0.5",
    "react-toastify": "^9.1.1",
    "react-use-websocket": "^4.2.0",
    "redux-logger": "^3.0.6",
    "socket.io-client": "^4.5.4",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "eslint": "^7.32.0",
    "eslint-config-next": "12.0.4",
    "eslint-config-prettier": "^8.3.0",
    "eslint-import-resolver-alias": "^1.1.2",
    "eslint-import-resolver-typescript": "^2.5.0",
    "eslint-plugin-import": "^2.25.4",
    "next-transpile-modules": "^9.0.0",
    "patch-package": "^6.5.0",
    "postinstall-postinstall": "^2.1.0",
    "prettier": "2.5.1"
  }
}

import NextAuth from 'next-auth'
import GoogleProvider from 'next-auth/providers/google'
import { getToken } from 'next-auth/jwt'

export const authOptions = {
  // Configure one or more authentication providers
  // debug: true,
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
      authorization: {
        params: {
          scope:
            'openid email profile https://www.googleapis.com/auth/gmail.compose https://www.googleapis.com/auth/gmail.modify'
        }
      },
      idToken: true
    }),
    {
      clientId: process.env.QUICK_BOOKS_CLIENT_ID,
      clientSecret: process.env.QUICK_BOOKS_CLIENT_SECRET,
      id: 'quickbooks',
      name: 'QuickBooks',
      type: 'oauth',
      wellKnown: 'https://developer.api.intuit.com/.well-known/openid_sandbox_configuration',
      authorization: { params: { scope: 'com.intuit.quickbooks.accounting openid profile email phone address' } },
      userinfo: {
        async request(context) {
          return await context.client.userinfo(context.tokens.access_token)
        }
      },

      idToken: true,
      checks: ['pkce', 'state'],
      profile(profile) {
        return {
          id: profile.sub,
          name: profile.name,
          email: profile.email,
          image: profile.picture
        }
      }
    },
    // ...add more providers here
    {
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
      id: 'googledrive',
      name: 'Google Drive',
      type: 'oauth',
      wellKnown: 'https://accounts.google.com/.well-known/openid-configuration',
      authorization: {
        params: {
          scope:
            'openid email profile https://www.googleapis.com/auth/drive.file https://www.googleapis.com/auth/drive.resource'
        }
      },
      idToken: true,
      checks: ['pkce', 'state'],

      profile(profile) {
        return {
          id: profile.sub,
          name: profile.name,
          email: profile.email,
          image: profile.picture
        }
      }
    }
  ],
  callbacks: {
    async session({ session, token, user }) {
      session.user.id = token?.id
      session.accessToken = token?.accessToken
      session.provider = token?.account?.provider
      return session
    },
    async jwt({ token, user, account, profile, isNewUser }) {
      if (user) {
        token.user = user
      }
      if (account) {
        token.account = account
      }
      return token
    }
  }
}

export default NextAuth(authOptions)

[...nextauth].js is inside pages/api/auth

this is the url: http://localhost:3000/api/auth/callback/google/?state="" ....

How to reproduce ☕️

.

Contributing 🙌🏽

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

[fasilminale]

@yuvrajmahalle what's your nextjs vertion?

[fasilminale]

when i sign in it redirect me to this url and then the error will be returned.

http://localhost:3000/api/auth/callback/google/?state="..."&code="..."&scope=email%20profile%20openid%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fgmail.compose%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fgmail.modify&authuser=0&prompt=consent

[fasilminale]

i'm not in an organisztion proxy network.

[yuvrajmahalle]

Not sure, give it a try by upgrading your auth-next version to the latest.

[fasilminale]

i tried that too. but it didn't fix it.

[fasilminale]

@balazsorban44 Could you please assist us? I've been stuck with this problem for three days now.

[balazsorban44]

Should be fixed already on 4.18.6. Need a minimal reproduction. A public GitHub repository, with only dependencies/code that clearly shows the issue.

Here is a deployed version, using next-auth@latest: https://next-auth-example.vercel.app, working fine.

[balazsorban44]

We cannot recreate the issue with the provided information. Please add a reproduction in order for us to be able to investigate.

Why was this issue marked with the incomplete label?

To be able to investigate, we need access to a reproduction to identify what triggered the issue. We prefer a link to a public GitHub repository (template), but you can also use a tool like CodeSandbox or StackBlitz.

To make sure the issue is resolved as quickly as possible, please make sure that the reproduction is as minimal as possible. This means that you should remove unnecessary code, files, and dependencies that do not contribute to the issue.

Please test your reproduction against the latest version of NextAuth.js (next-auth@latest) to make sure your issue has not already been fixed.

I added a link, why was it still marked?

Ensure the link is pointing to a codebase that is accessible (e.g. not a private repository). "example.com", "n/a", "will add later", etc. are not acceptable links -- we need to see a public codebase. See the above section for accepted links.

What happens if I don't provide a sufficient minimal reproduction?

Issues with the incomplete label that receives no meaningful activity (e.g. new comments with a reproduction link) are automatically closed and locked after 30 days.

If your issue has not been resolved in that time and it has been closed/locked, please open a new issue with the required reproduction.

I did not open this issue, but it is relevant to me, what can I do to help?

Anyone experiencing the same issue is welcome to provide a minimal reproduction following the above steps. Furthermore, you can upvote the issue using the 👍 reaction on the topmost comment (please do not comment "I have the same issue" without repro steps). Then, we can sort issues by votes to prioritize.

I think my reproduction is good enough, why aren't you looking into it quicker?

We look into every NextAuth.js issue and constantly monitor open issues for new comments.

However, sometimes we might miss one or two. We apologize, and kindly ask you to refrain from tagging core maintainers, as that will usually not result in increased priority.

Upvoting issues to show your interest will help us prioritize and address them as quickly as possible. That said, every issue is important to us, and if an issue gets closed by accident, we encourage you to open a new one linking to the old issue and we will look into it.

Useful Resources

• How to create a Minimal, Complete, and Verifiable example
• Reporting a NextAuth.js bug
• How to Contribute to Open Source (Next.js)

[IceToast]

We cannot recreate the issue with the provided information. Please add a reproduction in order for us to be able to investigate.

I've created a small repo that has the same issue as described here. I removed all code that is not really necessary but still maintain a rather realistic app base.
It's using NextJS 13.0.6 and Next-Auth 4.18.6.

https://github.com/IceToast/next-auth-issue

Repro Steps:

• Clone Repo
• Fill necessary environment variables (use the .env.example file)
• Run prisma db push
• Start the NextJS development server
• Go to http://localhost:3000
• Try to login via the google OAuth Button (You may add any other Provider)

If there is anything you need, please let me know

[balazsorban44]

@IceToast so first of all, directly modifying the session token might have unforeseen consequences, https://github.com/IceToast/next-auth-issue/blob/9152da4aff2e02c16e6f28c9bf360e8ba83c6316/src/pages/api/auth/%5B...nextauth%5D.js#L128

like you totally ignore the prefixing for increased security:

next-auth/packages/next-auth/src/core/lib/cookie.ts

Line 61 in 875f79d

name: `${cookiePrefix}next-auth.session-token`,

(There is a reason that messing with the cookies and using the credentials provider with a database is not recommended.)

The "minimal" reproduction was also very bloated, looks like you just linked to your full project. Keep in mind that it increases the time for triaging.

Anyway, I created my own reproduction and could not find an issue: https://github.com/balazsorban44/next-auth-6045

Still waiting for a proper reproduction from anyone reporting here. Happy to look into it, if there is a reasonable reproduction to investigate.

[IceToast]

so first of all, directly modifying the session token might have unforeseen consequences,

Thanks for looking into it. Yes i'm aware that messing with the session token does have its consequences, however it has nothing to do with what this bug is about.

The "minimal" reproduction was also very bloated, looks like you just linked to your full project. Keep in mind that it increases the time for triaging

The reproduction is indeed a copy of a project of mine with all not necessary code removed. I will gladly make it more minimalistic if you wish. I will edit this post when it's done.

Edit:
@balazsorban44 I've updated the repo https://github.com/IceToast/next-auth-issue to be more minimalistic like you asked.

[IceToast]

Anyway, I created my own reproduction and could not find an issue: https://github.com/balazsorban44/next-auth-6045

@balazsorban44
I've tried your reproduction on my local and a dedicated remote machine (for science) with the github and google provider. I've also tried my repro, that is using a database session with the prisma adapter, with the google and github providers. Same issue. I double checked that my package managers do not use a local cache of a broken version.
I hope that information may help you a little bit.

Have a nice weekend!

[hvitis]

I'm having a similar issue, so far half of the problem was caching cookies on vercel. When it comes to the second part, I'm still investigating it but the bug is on vercels production which doesn't give much debugging insights.

[balazsorban44]

Hi, #6132 (comment) could you test out this version to see if it fixes your issue? If it does, it will be included in the next release once the PR is merged!

[quanglam2807]

@balazsorban44 I confirm. I fixed the issue for me (upgraded from 4.18.6)

[IceToast]

@balazsorban44 I can also confirm that this fix works!

[balazsorban44]

New stable release will come out soon with this. Thanks for confirming.

We will have to add proper fully covering tests at some point. 🙃

[IceToast]

New stable release will come out soon with this. Thanks for confirming.

We will have to add proper fully covering tests at some point. 🙃

Thanks for your time to investigate and fix!

[balazsorban44]

4.18.7 is out with this fixed.

[JadYaghi]

I have gotten this problem in V4.19.2

[ks-krimi]

I have gotten this problem in V4.19.2

@JadYaghi make sure you typed the correct link
for example: http://localhost:3000/api/auth/signin

I use "next-auth": "^4.20.1" and it works perfectly

[hifilorau]

Im getting this error now, but only in production using next-auth 4.22.1 it happens with both my GoogleProvider and also when doing a custom credentials provider. But both work fine in dev but are breaking in production. Am using next 13 but have all my auth running through pages router and not app router.

[zarif-al]

Im getting this error now, but only in production using next-auth 4.22.1 it happens with both my GoogleProvider and also when doing a custom credentials provider. But both work fine in dev but are breaking in production. Am using next 13 but have all my auth running through pages router and not app router.

I'm facing the same issue. Using

• "next": "13.4.3",
• "next-auth": "^4.22.1",

Our project is still using pages directory

[Got-crypto]

I just came across this error. At first, I thought It was because my environment variables were not loaded since I forgot to add them in next.config.js file, but the error persisted. I checked the URL on which the error was and Immediately noticed that the URLs I provided in Google Cloud and in which my server was running on were not matching. I provided "http://localhost:3000" and my next.js server was running on "http://localhost:3001". After fixing that, everything worked fine.

• "next-auth": "^4.22.1"