Issue
Hi stackoverflow community,
I need some help pls,
I have a GraphQL data source, I'm using apollo client to pull those data. I am currently working on my login function; I am using next-auth credential provider: [Edited code below with the fetch call to graphql ]
import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
export default NextAuth({
session: {
strategy: 'jwt',
},
callbacks: {
async jwt({ token, user}: any) {
if(user?._id) token._id = user._id;
return token;
},
async session({ session, token}: any) {
if(token?._id) session.user._id = token._id;
return session;
},
},
providers: [
CredentialsProvider({
async authorize(credentials: any) {
const query = `query User($email: String!) { user(email: $email) { id, username, email, password, }}`;
const response: any = await fetch('http://localhost:4000/graphql', {
method: "POST",
headers: {"Content-Type": "application/json","Accept": "application/json", },
body: JSON.stringify({query, variables: { email: credentials.email }})
});
const {data}: any = await response.json();
if(data) {
return {
_id: data.user.id,
name: data.user.username,
email: data.user.email,
};
}
throw new Error("Invalid email or password");
},
}),
],
});
Here's my getUser hook [ Commenting this out since this is no longer relevant
// import { useQuery, gql } from '@apollo/client';
// const Get_User = gql`
// query User($email: String!) {
// user(email: $email) {
// id
// username
// email
// password
// }
// }
// `;
// export default function getUser(email: any) {
// const { error, data } = useQuery(Get_User, {variables: {email}});
// return {
// error,
// data,
// }
// }
I've verified that my next-auth endpoint is working by commenting out the GraphQL getUser and changing the if statement comparing to itself (credential.password === credential.password) and returning a statically written data back.
data inside credentials object is passing and accessing the values correctly.
[YES I WAS :( ] I think I am violating some react hooks law here, but I can't quite figure out how to address this, any enlightenment would be greatly appreciated. Thanks in advance! ^-^
So now it seems like theres something wrong with my fetch timings as it won't return my user details as expected even though my fetch request is working if tested on another page.
Solution
So yeh to summarize all a stupid mistake and wrong understanding of how the technology I'm using is supposed to do, I thought I could just execute useQuery
from apollo library as a next-auth providers that lead to me violating react's hook policy, what I should've done was to fetch to graphql directly either by using another library like axios
or simply the fetch api
here's my final code
import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
export default NextAuth({
session: {
strategy: 'jwt',
},
callbacks: {
async jwt({ token, user}) {
if(user?._id) token._id = user._id;
return token;
},
async session({ session, token}) {
if(token?._id) session.user._id = token._id;
return session;
},
},
providers: [
CredentialsProvider({
async authorize(credentials) {
const query = `query Users {
users {
id
username
email
password
}
}`;
const response = await fetch('http://localhost:4000/graphql', {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({query})
});
const { data } = await response.json();
const user = await data.users.find((dat) => dat.email === credentials.email);
if(user && user.password === credentials.password) {
return {
_id: user._id,
name: user.username,
email: user.email,
};
}
throw new Error("Invalid email or password");
},
}),
],
});
so yeh, I wasn't sure if this what @michel meant so I'll just put this as my answer instead. cheers!
Answered By - Carl Nierves
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.