I’m having an issue with the login using credentials (i.e., email and password) because when I submit the email and password, it seems that the user object is not returned. Right now, I’m not using a database; it’s just a user object that verifies if the correct email and password were entered. What I want is for the user object to be returned and the sessionStatus to change to authenticated when the login is verified, using nextAuth. This is the file where the login is performed with Providers (Google works fine).
//api/auth/[nextauth]/route.js
import NextAuth from "next-auth"
import { MongoDBAdapter } from "@next-auth/mongodb-adapter";
import clientPromise from "@/libs/mongodb";
import CredentialsProvider from "next-auth/providers/credentials";
import Auth0Provider from "next-auth/providers/auth0";
import { dateNowUnix } from "@/utils/dates";
import GoogleProvider from "next-auth/providers/google";
//import User from "@/models/usuarios";
export const authOptions = {
secret: process.env.NEXTAUTH_SECRET, //process.env.BASE_SECRET,
adapter: MongoDBAdapter(clientPromise),
session: { jwt: true }, // Use JSON Web Tokens for session instead of database sessions.
events: {
signIn: async (ctx) => {
//when sign in, update db with last sign in time
const { user, isNewUser } = ctx;
try {
if (isNewUser) {
user.roles = ["usuario"]; //user
user.createdAt = dateNowUnix();
user.updatedAt = dateNowUnix();
user.lastLogin = dateNowUnix();
} else {
user.lastLogin = dateNowUnix();
}
// Save the updated user to the database
/*const client = await clientPromise;
await client
.db()
.collection("users") //users
.updateOne({ email: user.email }, { $set: user });*/
console.log("prueba existosa");
console.log(`${user.email} logged in`);
//console.log(`${user.email} logged in and updated in DB =>`);
} catch (error) {
console.log(`Error udating user ${user.email} in signinevent:`, error);
}
},
},
// Configure one or more authentication providers
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET
}),
CredentialsProvider({
type: "credentials",
credentials: {
email: { label: "Email", type: "email" },
password: { label: "Password", type: "password" },
},
authorize(credentials, req){
const user = {id: "1", name: "isabel", email: "isa@mail.com", password: "12345", roles: ["usuario"] }
if(credentials?.email === user.email && credentials?.password === user.password){
return user;
}else{
return null;
}
}
}),
// TODO: Aqui va el otro provider
// ...add more providers here
],
// A database is optional, but required to persist accounts in a database
callbacks: {
async jwt({ token}) {
token.userRole = "usuario"
//admin
return token
},
async session({ session, token }) {
console.log(session)
try {
const client = await clientPromise;
const user = await client
.db()
.collection("users") //users
.findOne({ email: session.user.email });
// Add the user's role to the session object
session.user.roles = user.roles;
return Promise.resolve(session);
} catch (error) {
return Promise.reject(error);
}
},
},
}
const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };
The code for the signIn form.
"use client"
import Link from "next/link"
import Image from 'next/image';
import CustomButton from '@/components/CustomButton';
import {signIn, useSession} from 'next-auth/react'
import { Navbar2 } from "@/components";
import { useRouter } from "next/navigation";
import React, {FormEventHandler, useEffect, useState} from "react";
import CustomAlert from '@/components/CustomAlert';
export default function Form(){
// const session = useSession();
const router = useRouter();
const { data: session, status: sessionStatus } = useSession();
const [alertMessage, setAlertMessage] = useState(""); // Mensaje de alerta
const [isVisible, setIsVisible] = useState(false);
useEffect(() => {
if (sessionStatus === "authenticated") {
if(session?.user?.role === "usuario"){
router.replace("/usuario");
}else if(session?.user?.role === "terapeuta"){
router.replace("/terapeuta");
}else if(session?.user?.role === "admin"){
router.replace("/admin");
}
}else{
router.replace("/signin");
}
}, [sessionStatus, router, session]);
//const [userInfo, setUserInfo] = useState({email: "", password: ""});
const handleSubmit/*: FormEventHandler<HTMLFormElement>*/ = async (e: any) => { //async (e: any)
e.preventDefault();
const email = e.target[0].value;
const password = e.target[1].value;
//console.log(userInfo);
/*const res= await signIn ('credentials', {
email: userInfo.email,
password: userInfo.password,
redirect: false,
});*/
const res = await signIn('credentials', { //signIn('credentials',
email,
password,
redirect: false,
});
console.log(res);
console.log(sessionStatus);
if (res?.error ) { //
setAlertMessage("Contraseña y/o correo eléctronico incorrecto");
setIsVisible(true);
//if (res?.url) router.replace("/usuario");
}
};
if (sessionStatus === "loading") {
return <h1>Loading...</h1>;
}
return(
<>
<Navbar2 />
<main className="flex flex-col justify-center items-center w-full flex-1 bg-[#F5FFFC]">
<br /><br /><br /><br />
<div className="flex max-w-3xl yellowContainer"> {/*div principal */}
{/*Sección de iniciar sesión*/}
<div className="logoContainer">
<Image
src="/atomo.png"
alt="atomo"
width={80}
height={48}
className="object-contain mx-auto logoSignIn"
/>
<div className="divYellowContainer"><h1 className="text-3xl font-bold text-center titleSignIn">Iniciar Sesión</h1><br />
<div className="flex flex-col w-full pl-4">
<form className="flex flex-col items-center w-full" onSubmit={handleSubmit}>
<input type="email" /*value={userInfo.email} onChange={({target}) => setUserInfo({ ...userInfo, email: target.value})}*/ className="bg-white rounded-lg outline-none text-base h-12 pl-2 w-3/4 input" placeholder="Correo" />
<br />
<input type="password" /*value={userInfo.password} onChange={({target}) => setUserInfo({ ...userInfo, password: target.value})}*/ className="bg-white rounded-lg outline-none text-base h-12 pl-2 w-3/4 input" placeholder="Contraseña" />
<CustomButton
btnType="submit"
title="Iniciar Sesión"
containerStyles="text-white rounded-full bg-[#FC83A1] hover:bg-[#E55E7F] font-medium mt-10 textButton"
/>
</form><br />
<div className="flex justify-between">
<p className="text-black text-[17px] font-medium prSignIn">¿No tienes cuenta? <Link href="/signup" className="text-[#E55E7F]">Regístrate</Link></p>
<p className="text-black text-[17px] font-medium prSignIn"><Link href="" className="text-[#E55E7F]">¿Olvidaste tu contraseña?</Link></p>
</div>
{/* Renderizar alerta */}
{isVisible && (
<CustomAlert
status="warning"
variant="subtle"
title="Error"
description={alertMessage}
setIsVisible={setIsVisible}
/>
)}
</div>
</div>
<div className="flex flex-nowrap items-center justify-center">
<div className="border-2 border-[#FC83A1] inline-block mb-2 pinkLine"></div>
<p className="text-black text-[15px] font-bold">O</p>
<div className="border-2 border-[#FC83A1] inline-block mb-2 pinkLine"></div>
</div>
<br />
<div className="flex justify-center my-2">
<button onClick={() => signIn('google', { callbackUrl: '/usuario' })} /*'/terapeuta' */ className="flex items-center justify-center w-[299px] h-[59px]
border-2 border-[#FFFFFF] bg-[#FFFFFF] rounded px-2 py-2 font-light text-center"> <Image
src="/buscar.png"
alt="mental"
width={40}
height={40}
className="mr-2 googleLogo"
/>Continuar con Google</button> {/*'google', { callbackUrl: '/dashboard' }*/ }
</div> <br />
<br />
</div>
</div> <br />
</main>
</>
)
}
I aprecciate the help :((