Graphene-Django not Sending HTTPOnly JWT Cookie to React-Apollo - cookies

Question

Hi so I've been making an app using Django and Graphene for a GraphQL server that will be accessed by a React client using Apollo. I'm using graphql_jwt for authentication.
I have set up my GraphQL server and the client code to read the JWT but I've learned that localStorage is not safe enough and neither is a cookie. I managed to find a way to set an HTTPOnly cookie when making the tokenAuth request and the cookie persists and is functional in GraphiQL (localhost:8000).
I managed to do this with jwt_cookie decorator from graphql_jwt.decorators
from django.contrib import admin
from django.urls import path
from graphene_django.views import GraphQLView
from django.views.decorators.csrf import csrf_exempt
from graphql_jwt.decorators import jwt_cookie
urlpatterns = [
path('admin/', admin.site.urls),
path('graphql/', jwt_cookie(csrf_exempt(GraphQLView.as_view(graphiql=True))))
]
Unfortunately, when I call the tokenAuth endpoint from Apollo (localhost:3000) it is neither setting the cookie nor is can I access it from my afterware (makes sense now that I think about it). Neither the same-origin or include credentials work in the server HttpLink or the ApolloClient itself.
import {
ApolloClient,
gql,
ApolloProvider,
HttpLink,
from,
useQuery,
ApolloLink
} from '#apollo/client';
import { onError } from '#apollo/client/link/error';
import { setContext } from 'apollo-link-context';
const errorLink = onError(({ graphQLErrors, networkError }) => {
if (graphQLErrors) {
graphQLErrors.forEach(({ message }) => {
console.log(message);
});
}
if (networkError) {
console.log(networkError.message)
}
});
const afterwareLink = new ApolloLink((operation, forward) => {
return forward(operation).map(response => {
const context = operation.getContext();
const { response: { headers } } = context;
console.log(headers);
return response;
});
});
const link = from([
errorLink,
setContext((operation) => {
console.log("HITTING SET CONTEXT");
// const token = localStorage.getItem('authToken');
const token = Cookies.get('authToken');
console.log(token);
return {
headers: {
Authorization: token ? `JWT ${token}` : ''
}
}
}),
afterwareLink,
new HttpLink({ uri: 'http://localhost:8000/graphql/' })
]);
const client = new ApolloClient({
link,
cache,
typeDefs,
credentials: 'include'
});
Please ignore the refreshToken and authToken values. I set them with the js-cookie package. But as you can see the Headers are empty and weren't set on login on the client but they were on the server.
QUESTION:
How do I pass the jwt response headers to the frontend?

Answer 1

SO I was able to resolve this. I posted my resolution on Github
https://github.com/flavors/django-graphql-jwt/issues/191