Cannot POST /api/auth/callback/credentials

I was having the same issue, but I found a solution today. Here are the general steps I took:

1. Add an id property to the Credential provider
2. Use signIn in my form instead of action and method

Example pages/api/[...nextAuth].js

const options = {
  // Configure one or more authentication providers
  providers: [
    Providers.Credentials({
      id: "username-login", // <- add this line
      name: "Login",
      authorize: async (credentials) => {
        const user = {};
        return Promise.resolve(user);
      },
      credentials: {
        username: { label: "Username", type: "text ", placeholder: "username" },
        password: {
          label: "Password",
          type: "password",
          placeholder: "a-really-long-password",
        },
      },
    }),
  ],
  pages: {
    signIn: "/login",
  },
};

Then in pages/login.js:

import { useState } from "react";
import Layout from "@components/layout";
import { signIn, getSession } from "next-auth/client";

export default function Login() {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    // "username-login" matches the id for the credential
    signIn("username-login", { username, password });
  };

  return (
        <form onSubmit={handleSubmit}>
          <div>
            <label htmlFor="username">Username</label>
            <input
              id="username"
              name="username"
              type="text"
              placeholder="Username"
              onChange={(e) => setUsername(e.target.value)}
              value={username}
            />
          </div>
          <div>
            <label htmlFor="password">Password</label>
            <input
              id="password"
              name="password"
              type="password"
              placeholder="Password"
              onChange={(e) => setPassword(e.target.value)}
              value={password}
            />
          </div>
          <button type="submit">
            Login
          </button>
        </form>
  );
}

I’m using a custom express server with next-auth. It works now.

1. add route for post method and hand it to next.js

// server.js
       :
  const nextApp = next({ dev });
  const handle = nextApp.getRequestHandler();
       :
  app.get('*', (req, res) => {
    return handle(req, res);
  });
  // ↓↓↓ add route for post method
  app.post('*', (req, res) => {
    return handle(req, res);
  });
  // ↑↑↑ add route for post method
       :

2. set jwt: true

// /pages/api/auth/[...nextauth].js
         :
  session: {
    // ↓↓↓ add 
    jwt: true,
    // ↑↑↑ add
  },
         :

3. set bodyParser: false

// /pages/api/auth/[...nextauth].js
         :
// ↓↓↓ add config export
export const config = {
  api: {
    bodyParser: false,
  },
}
// ↑↑↑ add config export
export default (req, res) => NextAuth(req, res, options)

because I already use bodyParser on express.

// server.js
       :
  app.use(bodyParser.urlencoded({extended: true}));
  app.use(bodyParser.json());
       :