Help Needed: NextAuth Login Page Not Making Requests to Node.js-Express Backend

[wichapad]

Please help me; I can't find a solution. The issue arises from my backend, which is built with Node.js and Express. I have set up SSL/TLS for HTTPS, but when I created the login page on the frontend using NextAuth, it doesn't make a request to the backend at all. How can I resolve this?

[...next-auth]/route.js

import NextAuth from "next-auth/next";
import CredentialsProvider from "next-auth/providers/credentials";


const handle = NextAuth({
  providers: [
    CredentialsProvider({
      name: "Credentials",
      credentials: {
        username: { label: "Username", type: "username" },
        password: { label: "Password", type: "password" },
      },
      async authorize(credentials) {
        console.log(credentials);
        try {
          const res = await fetch("https://localhost:5500/auth/login", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              username: credentials.username,
              password: credentials.password,
            }),
          });

          if (!res.ok) {
            throw new Error("Login failed");
          }
          const user = await res.json();
          if (user) {
            return user;
          } else {
            return null;
          }
        } catch (error) {
          throw new Error("login failed");
        }
      },
    }),
  ],
  callbacks: {
    async jwt({ token, user }) {
      if (user) {
        token.accessToken = user.token;
      }
      return token;
    },

    async session({ session, token }) {
      session.accessToken = token.accessToken;
      return session;
    },
  },
  pages: {
    signIn: "/login",
  },
});

export { handle as GET, handle as POST };

login/page.js

"use client";

import { useState } from "react";
import { signIn } from "next-auth/react";
import { useRouter } from "next/navigation";

const LoginPage = () => {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const router = useRouter();

  const handleSubmit = async (e) => {
    e.preventDefault();
    const result = await signIn("credentials", {
      redirect: false,
      username,
      password,
    });
   
    if (!result.error) {
      router.push("/");
    } else {
      console.log("login failed");
    }
  };


  return (
    // โครงสร้างรวม form ของ login
    <div className="container_form">
      <div className="header_form">
        {" "}
        {/* หัวเรื่อง form */}
        <h1>Warehouse</h1>
      </div>
      {/* ช่อง input ใส่ค่า username และ password */}
      <form className="input_form" onSubmit={handleSubmit}>
        <div>
          <div className="input_form_header">
            <label>Username</label>
          </div>
          <input
            type="text"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
          />
        </div>
        <div>
          <div className="input_form_header">
            <label>Password</label>
          </div>

          <input
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>
        {/* {errorMessage && <p className="error_message">{errorMessage}</p>} */}
        {/* ปุ่ม Login */}
        <div className="button_form">
          <button type="submit">Login</button>
        </div>
      </form>
    </div>
  );
};

export default LoginPage;

console.log credentials:

GET /api/auth/csrf 200 in 112ms
{
  redirect: 'false',
  username: 'admin',
  password: 'admin@1234',
  csrfToken: '8d58727d694aba5f2353373737bc75656bcd1c5aa738465f639ea9786582502e',
  callbackUrl: 'http://localhost:3000/login',
  json: 'true'
}
 POST /api/auth/callback/credentials 401 in 72ms