Hey guys!

Please I have an issue with my next-auth in my project. Everything works fine while using the default next-auth login page, and I am able to use my credentials. But once I try using a custom login page, I keep getting an error after I submit the form saying:

http://localhost:3000/api/auth/error?error=Unexpected%20end%20of%20JSON%20input

This is my onSubmit function:

const onSubmitForm = (e: React.FormEvent) => {
    e.preventDefault();
    signIn("credentials", {
      userName,
      pass,
    });
  };

This is my login route.ts config:

import { signJwtAccessToken } from "@/lib/jwt";
import prisma from "@/lib/prisma";
import * as bcrypt from "bcrypt";

interface RequestBody {
  username: string;
  password: string;
}
export async function POST(request: Request) {
  const body: RequestBody = await request.json();

  const user = await prisma.user.findFirst({
    where: {
      email: body.username,
    },
  });

  if (user && (await bcrypt.compare(body.password, user.password))) {
    const { password, ...userWithoutPass } = user;
    const accessToken = signJwtAccessToken(userWithoutPass);
    const result = {
      ...userWithoutPass,
      accessToken,
    };
    return new Response(JSON.stringify(result));
  } else return new Response(JSON.stringify(null));
}

I would appreciate if anyone can help out with this. If there's any other thing I need to provide for context, please let me know. Thank you!