Implementing next-auth with graphql apollo for seamless data retrieval

Question

Implementing next-auth with graphql apollo for seamless data retrieval

Hello everyone on stackoverflow,

I could really use some assistance, please.

Currently, I am dealing with a GraphQL data source and utilizing apollo client to fetch that data. Specifically, I am focusing on my login function where I am incorporating the next-auth credential provider: [Modified code below showing 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 is my getUser hook [Omitted this section as it is not relevant anymore]

// 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 have confirmed that my next-auth endpoint is operational by disabling the GraphQL getUser and adjusting the if statement comparison to itself (credential.password === credential.password), returning static data instead.

The values within the credentials object are accessible correctly.

[YES I WAS :( ] I believe I may be breaching some rules regarding react hooks here, but I am struggling to pinpoint the issue. Any insights would be greatly appreciated. Thank you in advance! ^-^

It appears there might be an issue with the timing of my fetch calls as the user details are not being returned as expected, even though the fetch request works when tested on another page.

typescript next.js graphql apollo-client next-auth

Answer 1

Answer №1

If you are utilizing a hook within a function that is not a React component, such as when your GetUser function returns an object rather than components, it may cause issues. Additionally, keep in mind that useQuery operates asynchronously, meaning the function will not immediately return data.

To address this, consider utilizing client.query within a function where client represents your Apollo client object. Alternatively, you can use useQuery within an actual React component to ensure proper execution.

Answer 2

If you are utilizing a hook within a function that is not a React component, such as when your GetUser function returns an object rather than components, it may cause issues. Additionally, keep in mind that useQuery operates asynchronously, meaning the function will not immediately return data.

To address this, consider utilizing client.query within a function where client represents your Apollo client object. Alternatively, you can use useQuery within an actual React component to ensure proper execution.

Answer 3

Answer №2

In summary, I made a mistake by misunderstanding how the technology I was using should function. I incorrectly assumed that I could simply execute useQuery from the Apollo library as a next-auth provider, which led to me violating React's hook policy. What I should have done is directly fetch data from GraphQL either using another library like axios or the fetch api. Here is 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");
        },
    }),
],
});

I wanted to clarify my understanding based on @michel's guidance. This is my revised answer. Thank you!

Answer 4

In summary, I made a mistake by misunderstanding how the technology I was using should function. I incorrectly assumed that I could simply execute useQuery from the Apollo library as a next-auth provider, which led to me violating React's hook policy. What I should have done is directly fetch data from GraphQL either using another library like axios or the fetch api. Here is 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");
        },
    }),
],
});

I wanted to clarify my understanding based on @michel's guidance. This is my revised answer. Thank you!

Implementing next-auth with graphql apollo for seamless data retrieval

Answer №1

Answer №2

Similar questions

Nested Tagged Union Types in Typescript

Incorporate keyboard input functionality into an object wrapper

During the build process, the parameters in Next.js are not accessible

The observed function remains untouched

What are the steps to conducting authenticated Supabase queries through a NextJS api route?

When a parameter is passed into a React-Query function with an undefined value, it can lead to the API returning a 404 error

Incorporating the Observable Type into a TypeScript Interface

The 'get' property in the class 'ToastInjector' cannot be assigned to the 'get' property in its base class 'Injector'

Utilizing DataLoader in tandem with Mongoose: A comprehensive guide

Error in next.js when navigating to a different route with incorrect image being

Tips for omitting the trailing slash from a specific route in Next.js

Creating a Record instance consisting of a specific key and its corresponding value

mongodb is experiencing issues with the findOneAndUpdate operation

Issue: Module './App' not found in webpackSolution: Check if the module path is

Error in TypeScript: Module 'stytch' and its corresponding type declarations could not be located. (Error code: ts(2307))

Should we utilize the component @Input as a parameter for the injected service constructor, or should we opt for the ServiceFactory

How to customize the button color in a Next.js application

Developing Graph-QL for Microsoft Azure // Issue importing "okhttp3.Request"

Encountered a build issue in nextjs: identified a page lacking a default export of a React Component

The error message "TypeError: addNewUser is not a function in React.js onSubmit