Next.js Discord

Discord Forum

[auth][error] CredentialsSignin: Auth.js

Unanswered
Sun bear posted this in #help-forum
Open in Discord
Sun bearOP
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

3 Replies

Sun bearOP
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
This are my route.js and my login page