Stuck with Next Auth authorize part. Error: Action api with HTTP GET is not supported by NextAuth.js

Question

I'm getting a strange error for the past few days. Unable to authenticate my Next.js app with credentials.

As far as I know everything is correct according to the doc.

I'm also unable to see a network request in my chrome dev tools.

import NextAuth from "next-auth";
import CredentialProvider from "next-auth/providers/credentials";
import { signOut,useSession,signIn } from 'next-auth/react';
import { axios } from 'axios';
import { API_URL } from "../../../helpers/api/mutations";

export default NextAuth({
  providers: [
    CredentialProvider({
      name: "credentials",
      credentials: {
        username: {
          label: "Email",
          type: "text",
          placeholder: "[email protected]"
        },
        password: {
          label: "Password",
          type: "password"
        }},
        // My authorize function where I called my graphql mutation for token and session.
        async authorize(credentials,req) {
            const {data} = await axios({
              url: API_URL,
              method: 'post',
              data: {
               query: `mutation {
                login(
                   mobileNumber: "4738291046",
                  mobileCountryCode: "00",
                  password: "admin123"
                ) {
                  expiresAt
                  accessToken
                }
              }`
              }
             })
              .then(res => {
               console.log(res.data);
              })
              .catch(err => {
               console.log(err.message);
              });

              if (data) {
                console.log(data,'dataaa');
                return data
              }
              else {
                return null
              }
        }
    }),
  ],
  callbacks: {
    jwt: ({ token, user }) => {
      // first time jwt callback is run, user object is available
      if (user) {
        token.id = user.id;
      }

      return token;
    },
    session: ({ session, token }) => {
      if (token) {
        session.id = token.id;
      }

      return session;
    },
  },
   secret: "test",
   jwt: {
       secret:"test",
       encryption: true,
   },
   pages: {
    signIn: "api/auth/sigin",
  },
});

Answer 1

I ran into this because I forgot the leading / in my custom signIn page value:

pages: {
  signIn: "/api/auth/sigin",
}

Answer 2

The problem may be related on how you have handled async/await in the authorize function.

Try to change it like this:

async authorize(credentials,req) {
    try {
        const { data } = await axios({
            url: API_URL,
            method: 'post',
            data: {
                query: `mutation {
                    login(
                    mobileNumber: "4738291046",
                    mobileCountryCode: "00",
                    password: "admin123"
                    ) {
                    expiresAt
                    accessToken
                    }
                }`
            }
        })

        if (data) {
            console.log(data,'dataaa');
            return data
        }
        else {
            return null
        }
    } catch (err) {
        return null
    }
}