http://localhost:3000/api/auth/error re-direct

[Yeonggul]

I wrote the code in the app/api/auth/[...nextauth]/route.ts path.

`// app/api/auth/[...nextauth]/route.ts
import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import axios from "axios";
import { NextAuthOptions } from "next-auth";

export const authOptions: NextAuthOptions = {
providers: [
CredentialsProvider({
name: "Credentials",
credentials: {
id: { label: "ID", type: "text", placeholder: "User ID" },
password: {
label: "Password",
type: "password",
placeholder: "Password",
},
},
async authorize(credentials, req) {
try {
const response = await axios.post(
${process.env.NEXT_PUBLIC_BACKEND_URL}/api/auth/login,
null,
{ params: { id: credentials?.id, password: credentials?.password } }
);

      const user = response.data;

      if (user) {
        return user;
      } else {
        return null;
      }
    } catch (error) {
      console.error("Login error:", error);
      return null;
    }
  },
}),

],
callbacks: {
async jwt({ token, user }) {
if (user) {
token.id = user.userId;
token.userLevel = user.userLevel;
}
return token;
},
async session({ session, token }) {
session.user.id = token.id;
session.user.userLevel = token.userLevel;
return session;
},
},
pages: {
signIn: "/auth/login",
error: "/auth/error",
},
};

const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };
`
``

Next, we will try to log in...

`//src\app\auth\login\page.tsx
"use client";
import { signIn } from "next-auth/react";
import Button from "@/components/Button";
import Input from "@/components/Input";
import Link from "next/link";
import { useRouter } from "next/navigation";
import React, { useState } from "react";
import { FieldValues, SubmitHandler, useForm } from "react-hook-form";

const LoginPage = () => {
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const router = useRouter();

const {
register,
handleSubmit,
formState: { errors },
} = useForm({
defaultValues: { userId: "", password: "" },
});

const onSubmit: SubmitHandler = async (body) => {
setIsLoading(true);
setError(null);

try {
  const result = await signIn("credentials", {
    redirect: false,
    id: body.userId,
    password: body.password,
  });

  if (result?.ok) {
    // 로그인 성공 시
    router.push("/");
  } else {
    // 로그인 실패 시
    setError(result?.error || "An unexpected error occurred");
  }
} catch (error) {
  console.error("Login error", error);
  setError("An unexpected error occurred");
} finally {
  setIsLoading(false);
}

};`

However, when I log in, I am redirected to http://localhost:3000/api/auth/error with a GET http://localhost:3000/api/auth/error 404 (Not Found) error in the console window... What is the problem? ;(

The settings are as follows

#.env

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your_secret
JWT_SECRET="jwt-secret"

`// next.config.mjs
/** @type {import('next').NextConfig} /
const nextConfig = {
reactStrictMode: false,
async rewrites() {
return [
{
source: "/api/:path",
destination: "http://localhost:8080/api/:path*",
},
];
},
};

export default nextConfig;
`

please help me
It still can't be resolved