Apollo setup client headers from NextAuth
Unanswered
Ninhache posted this in #help-forum
NinhacheOP
Hi,
I'm trying to use Apollo client to make graphql queries but I'm pretty stuck :
I can't setup the authorization header because i can't have access to my JWT, stored in my session..
I've looked through some solutions.. but no one has sense :
- LocalStorage isnt accessible
- Cookies shouldnt be used like that
Someone have an idea to make this possible ?
I'm trying to use Apollo client to make graphql queries but I'm pretty stuck :
I can't setup the authorization header because i can't have access to my JWT, stored in my session..
I've looked through some solutions.. but no one has sense :
- LocalStorage isnt accessible
- Cookies shouldnt be used like that
Someone have an idea to make this possible ?
24 Replies
are you trying to make requests from server components? where are you storing the auth session token?
NinhacheOP
In the session, and yes that's what i'm trying to do..
may i've to use a route.js?
NinhacheOP
anyways, my client is already defined.. i don't know how i'm supposed to update the header..
NinhacheOP
Apparently i could change like that :
import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client';
import { setContext } from '@apollo/client/link/context';
const httpLink = createHttpLink({ uri: '/graphql' });
const authLink = setContext((_, { headers }) => {
const token = localStorage.getItem('token');
return {
headers: {
...headers,
authorization: token ? `Bearer ${token}` : '',
},
};
});
const client = new ApolloClient({
link: authLink.concat(httpLink),
cache: new InMemoryCache(),
});
// To update the headers later, you can create a new link with updated headers
const newAuthLink = setContext((_, { headers }) => {
const newHeader = 'new header value';
return {
headers: {
...headers,
'new-header': newHeader,
},
};
});
// Then set the new link as the client's link
client.setLink(newAuthLink.concat(httpLink));
but the problem is still the same.. I can't get my jwt :^)
Ocicat
"Cookies shouldnt be used like that"
what is the resoning about that if the cookies are send as
HttpOnly
?also is the JWT token available in the
headers
?NinhacheOP
which headers?
Ocicat
const authLink = setContext((_, { headers }) => {
There is a headers object passed
NinhacheOP
"Apparently".. idk if it would've work
Ocicat
let me check a few things
NinhacheOP
Thanks :/
Ocicat
actually yes you can store the JWT token in a session/localstorage and retrieve it. Not sure if its the best practice now though.
However you need to retrieve it from the session:
https://next-auth.js.org/configuration/options#session
Have you explored this config? It should be available in the session
https://next-auth.js.org/configuration/options#session
Have you explored this config? It should be available in the session
NinhacheOP
I've done this really badly imo
But i'm using session rn
Ocicat
you can configure the session key and retrieve it
there is also the callbacks that you can use to retrieve the jwt
https://next-auth.js.org/configuration/options#callbacks
https://next-auth.js.org/configuration/options#callbacks
NinhacheOP
These callback can be usefull right but i was still a bit lock, but thanks both of you anyways <3
I mean where is the session stored? you need it in a cookie so you can read it from the server
you can then use
next/headers
to read the cookie and add it to the headers of the requestNinhacheOP
Mh may i'm wrong then, im gonna loonk after.. launch time rn