For typescript/graphql-auth example, what is the right way to set the "Authorization" header on the client?

[lumenwrites]

Hello! I'm using a modified prisma-examples/typescript/graphql-auth as a backend for my app. Prisma/Nexus/Apollo on the backend, Next.js/React/Apollo on the frontend. I'm trying to figure out how to make authorization work in my app, and I'm looking for some help.

In the README of this example it says:

Using the GraphQL Playground, the Authorization header can be configured in the HTTP HEADERS tab in the bottom-left corner of the GraphQL Playground. The values for the HTTP headers are defined in JSON format. Note that the authentication token needs to be sent with the Bearer -prefix:

{
  "Authorization": "Bearer __YOUR_TOKEN__"
}

And if I make a query from the GraphQL Playground (setting the "Authorization" header manually), it works well. I'm also successfully able to send login/signup information from the client, and backend sends me back the generated tokens. I have also set up the apollo client to send the existing headers along with every request (but I don't know enough to figure out where they're coming from, and how to set them correctly).

I think I'm almost there, all I need is to figure out how to store the tokens into the headers (after the client has sent the email/password to the server, and received the generated token back).

Can someone help me to figure out how it's done? I can't just use localStorage or cookies, because next.js renders the website on server, and I can't seem to figure out another way to do this. I've read something about setting "HttpOnly" cookies on the server side, but I can't figure out how to do it in this scenario - my server is just a GraphQL endpoint, it can respond to graphql queries, but I don't know if it'll be able to set the cookies somehow.

My code for the project is here.

Backend:

• nexus queries and mutations are here. On sign up or login they take email/password and send back the tokens.
• I'm extracting "Authorization" header and using shield to check whether the user is logged in here.

Frontend:

• Apollo client is set up to send the headers to the backend here.
• Login form component that is making sign up and login queries is here. It's receiving back the data that contains the token. I'm guessing I'd have to save the token into the headers in this file, or on the backend somehow.

I'm new at this stuff and I'm stuck, I'd really appreciate some advice!