next-auth: login function redirects to /api/auth/error

I'm having a problem where NextAuth always returns to the error page

It should return a user as per my code below:
./app/account/login/page.tsx

"use client";
import React, { useState } from "react";
import { useRouter } from "next/navigation";
import SubmitButton from "@/components/SubmitButton";
import { signIn } from "next-auth/react";
const Login = () => {
const router = useRouter();
const [formSubmitting, setFormSubmitting] = useState(false);
const handleFormSubmit = async (event: any) => {
setFormSubmitting(true);
event.preventDefault();
try {
const res = await signIn("credentials", {
email: "john@gmail.com",
password: "1234",
redirect: false,
});
console.log(res);
}
catch(err) {
console.error(err);
}
};
return (
<section id="login" className="flex items-center justify-center h-[100vh]">
<div className="form-wrapper min-w-[300px] rounded-md">
<h3 className="block mb-6 text-xl font-bold text-gray-900">Login</h3>
<form onSubmit={handleFormSubmit}>
<div className="mb-6">
<label
htmlFor="email"
className="block mb-2 text-sm font-medium text-gray-900"
>
Your email
</label>
<input
type="email"
id="email"
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
placeholder="name@plator.com"
required
/>
</div>
<div className="mb-6">
<label
htmlFor="password"
className="block mb-2 text-sm font-medium text-gray-900"
>
Your password
</label>
<input
type="password"
id="password"
className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
required
/>
</div>
<div className="flex items-start mb-6">
<div className="flex items-center h-5">
<input
id="remember"
type="checkbox"
value=""
className="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300"
/>
</div>
<label
htmlFor="remember"
className="ml-2 text-sm font-medium text-gray-900"
>
Remember me
</label>
</div>
<div className="flex items-start mb-6">
<a className="text-sm font-medium text-blue-700" href="#">
Reset my password
</a>
</div>
{/* <button
type="submit"
className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full px-5 py-2.5 text-center"
>
Login
</button> */}
<div className="flex items-center">
<SubmitButton
isSubmitting={formSubmitting}
onSubmittingLabel={"Logging In"}
label={"Login"}
/>
</div>
</form>
</div>
</section>
);
};
export default Login;

and ./app/api/auth/[...nextauth].ts

import NextAuth, { NextAuthOptions } from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
const authOptions: NextAuthOptions = {
session: {
strategy: "jwt",
},
providers: [
CredentialsProvider({
id: "credentials",
name: "Credentials",
type: "credentials",
credentials: {
username: { type: "text", label: "Username" },
password: { type: "text", label: "Password" },
},
authorize(credentials, req) {
//I'm setting it to always return user
return {
id: "1234",
name: "John Doe",
email: "john@gmail.com",
role: "admin",
};
},
}),
],
pages: {
signIn: "/account/login",
error: "/account/login",
// signOut: '/auth/signout'
},
callbacks: {
async signIn(user) {
console.log("user: " + user);
if (!user) return "/account/login?status=fail";
return "/";
},
},
};
export default NextAuth(authOptions);

I have followed this link https://next-auth.js.org/configuration/providers/credentials , since I am a beginner in Next Auth, I am not sure what is wrong.

Since you are using Next.js 13 app router, you need to configure NextAuth as follows:

// app/api/auth/[...nextauth]/route.ts

import NextAuth from "next-auth"

const handler = NextAuth({
  ...
})

export { handler as GET, handler as POST }

https://next-auth.js.org/configuration/initialization#route-handlers-app