Credentials Provider session always return null
So im trying to make the login page work with email and password from the DB and when i click to submit the values im always having the session as null. This is what im doing:
So on my signin page i invoke the signIn method:
result returns:
CredentialsProvider({
name: "Credentials",
credentials: {},
async authorize(credentials: any) {
//check user
const user: any = await prisma.user.findUnique({
where: {
email: credentials.email,
},
});
if (!user) {
throw new Error("No user found");
}
console.log("user credentials", user);
const checkPassword = await compare(
credentials.password,
user?.password
);
console.log("user?.password", user?.password);
if (!checkPassword || user.email !== credentials.email) {
throw new Error("Password or Email dont match");
}
return user;
},
}),
],
// Include user.id on session
callbacks: {
session({ session, user }) {
if (session.user) {
session.user.id = user.id;
}
return session;
},
},
session: {
strategy: "jwt",
},
},
jwt: {
secret: "test",
},
secret: "test",
// pages: {
// signIn: "/",
// newUser: "/signin",
// signOut: "/signout",
// error: '/error'
// },
CredentialsProvider({
name: "Credentials",
credentials: {},
async authorize(credentials: any) {
//check user
const user: any = await prisma.user.findUnique({
where: {
email: credentials.email,
},
});
if (!user) {
throw new Error("No user found");
}
console.log("user credentials", user);
const checkPassword = await compare(
credentials.password,
user?.password
);
console.log("user?.password", user?.password);
if (!checkPassword || user.email !== credentials.email) {
throw new Error("Password or Email dont match");
}
return user;
},
}),
],
// Include user.id on session
callbacks: {
session({ session, user }) {
if (session.user) {
session.user.id = user.id;
}
return session;
},
},
session: {
strategy: "jwt",
},
},
jwt: {
secret: "test",
},
secret: "test",
// pages: {
// signIn: "/",
// newUser: "/signin",
// signOut: "/signout",
// error: '/error'
// },
async function onSubmitLoginValues(values: LoginValuesProps): Promise<any> {
const result = await signIn("credentials", {
email: values?.email,
password: values?.password,
redirect: false,
callbackUrl: "/",
});
console.log("result", result);
if (result?.ok) router.push("/");
return result;
}
async function onSubmitLoginValues(values: LoginValuesProps): Promise<any> {
const result = await signIn("credentials", {
email: values?.email,
password: values?.password,
redirect: false,
callbackUrl: "/",
});
console.log("result", result);
if (result?.ok) router.push("/");
return result;
}
error: null
ok: true
status: 200
url: "http://localhost:3000/"
error: null
ok: true
status: 200
url: "http://localhost:3000/"
3 Replies
On getServerSideProps i tried to call it in two different ways:
Did some research but none of this approches worked for me. If anyone faced a similar problem, i would be very grateful since i have been debugging this since yesterday 😦
export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
const session = await getServerAuthSession(ctx);
if (!session) {
return {
redirect: { destination: "/signin", permanent: false },
};
}
return {
props: {
session,
},
};
//OR
console.log("ctx", ctx);
const response = await fetch("http://localhost:3000/api/auth", {
method: "GET",
credentials: "include",
//@ts-ignore
headers: {
Cookie: ctx.req.headers.cookie,
},
});
console.log("RESPOSNDE", response.json());
if (!response) {
return {
redirect: { destination: "/signin", permanent: false },
};
}
const data = await response.json();
return { props: { data } };
};
export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
const session = await getServerAuthSession(ctx);
if (!session) {
return {
redirect: { destination: "/signin", permanent: false },
};
}
return {
props: {
session,
},
};
//OR
console.log("ctx", ctx);
const response = await fetch("http://localhost:3000/api/auth", {
method: "GET",
credentials: "include",
//@ts-ignore
headers: {
Cookie: ctx.req.headers.cookie,
},
});
console.log("RESPOSNDE", response.json());
if (!response) {
return {
redirect: { destination: "/signin", permanent: false },
};
}
const data = await response.json();
return { props: { data } };
};
Your callbacks are wrong
how can i fix them then ?
Alright so it seems cleaning all the junk actually solved the problem;
And it works
export const authOptions: NextAuthOptions = {
//Configure one or more authentication providers
adapter: PrismaAdapter(prisma),
providers: [
DiscordProvider({
clientId: env.DISCORD_CLIENT_ID,
clientSecret: env.DISCORD_CLIENT_SECRET,
}),
GoogleProvider({
clientId: env.GOOGLE_CLIENT_ID,
clientSecret: env.GOOGLE_CLIENT_SECRET,
}),
GithubProvider({
clientId: env.GITHUB_CLIENT_ID,
clientSecret: env.GITHUB_CLIENT_SECRET,
}),
CredentialsProvider({
name: "Credentials",
credentials: {
email: {
label: "email",
type: "email",
placeholder: "[email protected]",
},
password: {
label: "password",
type: "password",
},
},
async authorize(credentials: any) {
//check user
const user: any = await prisma.user.findUnique({
where: {
email: credentials.email,
},
});
if (!user) {
throw new Error("No user found");
}
console.log("user credentials", user);
const checkPassword = await compare(
credentials.password,
user?.password
);
console.log("user?.password", user?.password);
if (!checkPassword || user.email !== credentials.email) {
throw new Error("Password or Email dont match");
}
return user;
},
}),
],
secret: env.NEXTAUTH_SECRET,
session: {
strategy: "jwt",
},
pages: {
signIn: "/signin",
newUser: "/",
signOut: "/signout",
error: "/error",
},
};
export const authOptions: NextAuthOptions = {
//Configure one or more authentication providers
adapter: PrismaAdapter(prisma),
providers: [
DiscordProvider({
clientId: env.DISCORD_CLIENT_ID,
clientSecret: env.DISCORD_CLIENT_SECRET,
}),
GoogleProvider({
clientId: env.GOOGLE_CLIENT_ID,
clientSecret: env.GOOGLE_CLIENT_SECRET,
}),
GithubProvider({
clientId: env.GITHUB_CLIENT_ID,
clientSecret: env.GITHUB_CLIENT_SECRET,
}),
CredentialsProvider({
name: "Credentials",
credentials: {
email: {
label: "email",
type: "email",
placeholder: "[email protected]",
},
password: {
label: "password",
type: "password",
},
},
async authorize(credentials: any) {
//check user
const user: any = await prisma.user.findUnique({
where: {
email: credentials.email,
},
});
if (!user) {
throw new Error("No user found");
}
console.log("user credentials", user);
const checkPassword = await compare(
credentials.password,
user?.password
);
console.log("user?.password", user?.password);
if (!checkPassword || user.email !== credentials.email) {
throw new Error("Password or Email dont match");
}
return user;
},
}),
],
secret: env.NEXTAUTH_SECRET,
session: {
strategy: "jwt",
},
pages: {
signIn: "/signin",
newUser: "/",
signOut: "/signout",
error: "/error",
},
};