How to set Auth token cookie from GraphQL Mutation with Apollo - reactjs

Question

I'm using GraphQLServer from graphql-yoga to handle requests. My back-end is able to communicate with my React front-end at this point and I can make graphql queries and get the response just fine.
I was recently informed that I should be setting a cookie with the token, rather than returning it in the mutation response. So I'm trying to switch over but the cookie isn't being set by the mutation.
server.js (node)
import { GraphQLServer, PubSub } from 'graphql-yoga';
import {resolvers, fragmentReplacements} from './resolvers/index'
import prisma from './prisma'
const pubsub = new PubSub()
export default new GraphQLServer({
typeDefs: './src/schema.graphql',
resolvers,
context(request) {
return {
pubsub,
prisma,
request, //fragmentReplacements[], request, response
}
},
fragmentReplacements
});
Mutation.js (node)
export default {
async createUser(parent, args, {prisma, request}, info) {
const lastActive = new Date().toISOString()
const user = await prisma.mutation.createUser({ data: {...args.data, lastActive }})
const token = generateToken(user.id)
const options = {
maxAge: 1000 * 60 * 60 * 24, //expires in a day
// httpOnly: true, // cookie is only accessible by the server
// secure: process.env.NODE_ENV === 'prod', // only transferred over https
// sameSite: true, // only sent for requests to the same FQDN as the domain in the cookie
}
const cookie = request.response.cookie('token', token, options)
console.log(cookie)
return {user}
},
// more mutations...
console.log(cookie) outputs with the cookie attached
index.js (react)
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App';
import ApolloClient, { InMemoryCache, create } from 'apollo-boost';
import {ApolloProvider} from 'react-apollo'
const client = new ApolloClient({
uri: 'http://localhost:4000',
cache: new InMemoryCache(),
credentials: 'include',
request: async operation => {
operation.setContext({
fetchOptions: {
credentials: 'same-origin'
}
})
},
})
ReactDOM.render(
<ApolloProvider client={client}>
<App />
</ApolloProvider>,
document.getElementById('root'));
So my questions are:
Is there a better way to do authentication with GraphQL, or is setting the token with a cookie in the auth mutation suitable?
Assuming it's a decent approach, how can I set the cookie from the mutation?
Thanks for your time!

Answer 1

You need to include the credentials in the ApolloClient
fetchOptions: {
credentials: 'include'
}