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

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