Is this a good way to handle headers?

[seloner]

Hello I need to pass the jwt token into the headers for every request that needs authentication.
I have a graphql client and I need to set the headers so that can happen. I ended with that solution .I put the code below in the _app js file . What do you think ?

useEffect(() => {
		async function handleAuthHeaders() {
			const session = await getSession();
			if (session?.accessToken) {
				graphqlClient.setHeader('Authorization', `Bearer ${session.accessToken}`);
			}
		}
		handleAuthHeaders();
	}, []);

[balazsorban44]

So if you call getSession() without a SessionProvider, it will make a new request to /api/auth/session every time your _app rerenders.
I would wrap your _app in SessionProvider and create a hook for your graphqlClient like so:

// _app.jsx
import { SessionProvider } from "next-auth/client"

export default function App({ Component, pageProps: {session, ...pageProps} }) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps}/>
    </SessionProvider/>
  )
}

And use the following hook when you need to make requests to GraphQL

// hooks/useClient.js
import * as React from "React"
import { useSession } from "next-auth/client"

export default function useClient() {
  const accessToken = useSession()[0]?.accessToken
  const graphqlClient = useGraphQLClient() // Not sure how you get your graphql client
  React.useEffect(() => {
    if (accessToken) {
      graphqlClient.setHeader('Authorization', `Bearer ${accessToken}`);
    }
  }, [accessToken])
  return graphqlClient
}

useSession will prefer getting the session value from the SessionProvider and occasionally update it from /api/auth/session, thus reducing unnecessary network traffic.

Remember, since getting session is an async operation, in the beginning, the returned graphql client won't have the right header. You have to make sure to postpone requests that must have this header until the user is logged in and accessToken have been set.

How to do this depends on how you use the graphql client in your code.

[seloner]

Thanks for your help!!!
I think the useEffect will run one time only when app mounts because it has zero dependencies?Am I wrong?

Sorry I forgot to mention that I am using Session Provider in the _app.js file .
My issue with your approach is that I need to use the graphql client outside of React so I just want to be able to import the client from a file and not getting it through a react hook .

export const graphqlClient = new GraphQLClient(getApi());

So I want to import it from the file and then set the headers ,that's why I used getSession

[balazsorban44]

If you use the graphql client on backend not on behalf of the user, I would actually suggest using client_credentials grant type, and some kind of an access token caching mechanism.
https://www.oauth.com/oauth2-servers/access-tokens/client-credentials/

Created an example. How to fetch access_token that is cached until it is expired, using client_credentials: https://gist.github.com/balazsorban44/badea7e350637bc9b42bae4b36ced1e8

NOTE: Again, only use this if you need to fetch data that is not on behalf of the user. If you need that, you are going to have to keep continue using getSession()

For Next.js API routes, I came up with this very fast, let me know what you think!:

import {getSession} from "next-auth/client"
import GraphQLClient from "lib/graphql"

export async function withAuth(handler) {
  return function (req, res) {
    const session = await getSession(req)
    if (!session) {
      res.status(401)
      return res.end("Unauthorized")
    }
    req.session = session
    return handler(req, res)
  }
}

export async function withGraphQL(handler) {
  return withAuth((req, res) => {
    /**
     * So depending on your requirements, you could also receive `accessToken`
     * with the above mentioned `client_credentials` technique instead.
     */
    const client = new GraphQLClient({
      headers: {
        Authorization: `Bearer ${req.session.accessToken}`
      }
    })
    req.client = client
    return handler(req, res)
  })
}


// This is the main API handler, the two other functions can be extracted to another file for reuse
export default withGraphQL(async (req, res) => {
  req.client // this is an authorized client
  const { data }  = await req.client.request(`GRAPHQL QUERY`, {})
  res.json(data)
})

about useEffect, I suggest reading this: https://overreacted.io/a-complete-guide-to-useeffect/

[seloner]

Τhanks for your time and your help. I am using strapi for the backend and it just generates the graphql resolvers .
Nice idea with the high order functions . Are you suggesting using them in server side props I guess right?
I am building an ecommerce app so I need to use getStaticProps in some pages so getServerSide props is not always an option for me .For example in the home page I need to static generate featured products etc.
So I need to set the Auth Headers in the client side in some cases.
I have read the article about use effect I it is a really good article !
What do you think is the issue with my implementation ?getSession is going to get called one time because the effect is going to run once .