[auth][error] CredentialsSignin: Auth.js
Unanswered
Sun bear posted this in #help-forum
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
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't have an account? <span className="underline">Register</span></Link>
</form>
{error && <p style={{ color: "red" }}>{error}</p>}
</div>
)
}
export default LoginThis are my route.js and my login page