Manikandan
Manikandan

Reputation: 41

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

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",
  },
});

Upvotes: 4

Views: 22091

Answers (4)

piyush yadav
piyush yadav

Reputation: 71

Working Solution🔥

This problem only occur due to these problem listed below

  1. It should be "api/auth/signin" not "api/auth/sigin" Typo Mistake
  2. You api/[auth] folder should be in App directory for Nextjs13 directory and in pages directory in below 13 version of Nextjs

Upvotes: 2

jewcub
jewcub

Reputation: 21

Downgrading my versions of next and next-auth to [email protected] and [email protected] solved this for me as per this suggestion: https://stackoverflow.com/a/74171248

Upvotes: 0

ninsau
ninsau

Reputation: 1016

It's your file structure. Make sure that [...nextauth].ts is in the correct path /pages/api/auth/[...nextauth].ts

Upvotes: 18

user3838717
user3838717

Reputation: 41

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

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

Upvotes: 3

Related Questions