[auth][error] CredentialsSignin: Auth.js

[north cargo]

I am looking for some help im keep getting the error: [auth][error] CredentialsSignin: Read more at https://errors.authjs.dev#credentialssignin

if users try to sign in with a wrong password, its overflowwing the console.

I use Auth.js beta & next.js latest version.

How do i get rid of it

[fallen zinc]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[north cargo]

import NextAuth from 'next-auth';
import CredentialsProvider from 'next-auth/providers/credentials';
import bcrypt from 'bcryptjs';
import prisma from "@/lib/prisma"

  export const { handlers: {GET, POST }, signIn, signOut, auth } = NextAuth({
     providers: [
       CredentialsProvider({
         name: 'Credentials',
         credentials: {
           email: { label: "Email", type: "text" },
           password: { label: "Password", type: "password" }
         },
         async authorize(credentials) {
           // Find user by email
           const user = await prisma.user.findUnique({
             where: { email: credentials.email }
           });
           
           // Check if user exists and password matches
           if (user && bcrypt.compareSync(credentials.password, user.password)) {
             return { id: user.id, email: user.email };
           }
   
           // If no user or password mismatch, return null
           return null;
         }
       })
     ],
     pages: {
       signIn: '/login', // Custom login page
      //  error: '/error',  // Error page
     },
     session: {
       strategy: 'jwt',
     },
     callbacks: {
       async jwt({ token, user }) {
         if (user) {
           token.id = user.id;
         }
         return token;
       },
       async session({ session, token }) {
         if (token) {
           session.id = token.id;
         }
         return session;
       }
     }
    })

"use client"

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { signIn } from 'next-auth/react';
import Link from 'next/link';

function Login() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState("");  // State for storing error messages
  const [success, setSuccess] = useState(""); // State for storing success message
  const router = useRouter(); 

  const handleSubmit = async (e) => {
    e.preventDefault();

    // Clear previous error or success messages
    setError("");
    setSuccess("");

    const res = await signIn('credentials', {
      redirect: false,
      email,
      password
    });


    if (res?.error) {
       if (res.error === 'CredentialsSignin') {
        setError("Invalid email or password."); // Custom user-friendly message
      } else {
        setError(res.error); // Use the default error message if it's not a known error
      }
      console.error(res.error);
    } else {
      setSuccess("Logged in successfully!"); // Set the success message
      console.log("Logged in successfully!");
      router.push('/dashboard'); // Redirect to the dashboard
    }
  };

  return (
     <div className='ml-2'>
      <h1>Sign In</h1>
      <form onSubmit={handleSubmit}>
        <label>
          Email:
          <input onChange={(e) => setEmail(e.target.value)} type="email" required />
        </label>
        <label>
          Password:
          <input onChange={(e) => setPassword(e.target.value)} type="password" required />
        </label>
        <button className="bg-[#3995f8] text-white font-bold cursor-pointer px-6 py-2 ml-2" type="submit">Sign In</button>
        <br></br>
        <Link className="" href={'/register'}> Don&apos;t have an account? <span className="underline">Register</span></Link>
      </form>
      
      {error && <p style={{ color: "red" }}>{error}</p>}
    </div>
  )
}

export default Login