Apollo Server - Cookies not storing in browser

Help
1

I have setup a basic Apollo Server with dummy data to test using Redis for session storage. When a session is run, the cookie is not being stored in the browser.

This issue seems to pop up a bit. The most comprehensive direction for solutions I found was here and here, notably comments provided by cheapsteak and @Chang. Code is below.

//////////////
// index.js
//////////////

const { ApolloServer, gql } = require("apollo-server-express")
const express = require("express")
const session = require("express-session")
const redis = require("redis")
const connectRedis = require("connect-redis")

// Dummy data
const user = {
	username: "Jenny",
	password: "123123",
}

// GraphQL
const typeDefs = gql`
	type User {
		id: ID!
		username: String!
	}
	type Query {
		user: User
	}
`
const resolvers = {
	Query: {
		user: async (_, __, context) => {
			try {
				const { req } = context
				req.session.userId = "test"
				return user
			} catch (error) {
				return error
			}
		},
	},
}

// Cors options
const corsOptions = {
	origin: "https://studio.apollographql.com",
	credentials: true,
}

// Express app
const app = express()
app.use(express.json())
app.set("trust proxy", 1)

// Redis
const RedisStore = connectRedis(session)
const redisClient = redis.createClient()

// Express session
app.use(
	session({
		store: new RedisStore({ client: redisClient }),
		name: "myName",
		secret: "mySecret",
		saveUninitialized: false,
		resave: false,
		cookie: {
			secure: process.env.NODE_ENV === "production",
			httpOnly: true,
			maxAge: 1000 * 60 * 30,
			sameSite: true,
		},
	})
)

// Apollo Server instance
const server = new ApolloServer({
	typeDefs,
	resolvers,
	context: ({ req, res }) => ({ req, res }),
})

// Start Apollo server
;(async function startExpressApolloServer() {
	await server.start()
	server.applyMiddleware({ app, cors: corsOptions })
})()

// Listen for connections
app.listen(4000, console.log("Server started on port: 4000"))


//////////////
// package.json
//////////////

{
	"scripts": {
		"dev": "nodemon index.js"
	},
	"dependencies": {
		"apollo-server-core": "^3.6.1",
		"apollo-server-express": "^3.6.1",
		"connect-redis": "^6.0.0",
		"express": "^4.17.2",
		"express-session": "^1.17.2",
		"graphql": "^16.2.0",
		"redis": "^3.1.2",
	},
	"devDependencies": {
		"nodemon": "^2.0.15",
	}
}

Redis is running fine and a key is getting stored when queries are run. In the cookie options I have tried various value configurations for the secure and sameSite properties. With the current configuration below, the response headers return:

Set-Cookie: myName=s:v0udE14MRFpvYXu4y6GoQGI7UVVnjmeH.g/n6bLEX68YwJEJSlm59vs6M5jz1cvN4zLM6XSQOO+A; Path=/; Expires=Tue, 18 Jan 2022 12:49:36 GMT; HttpOnly; SameSite=Strict

The above response comes with a warning which reads - This attempt to set a cookie by a Set-Cookie header was blocked due to user preferences.

I know this topic is covered ground but I can’t seem to get a working solution or fully understand the cause of the problem.

My thanks in advance.

2

For those interested, I managed to get the cookie to be saved in the browser. The steps taken -

  • In Chrome I set * “Block third-party cookies” to disabled;
  • In index.js I changed the cookie options for secure and sameSite as follows;
cookie: {
	secure: true,
	// secure: process.env.NODE_ENV === "production",
	httpOnly: true,
	maxAge: 1000 * 60 * 30,
	sameSite: "none",
	// sameSite: true,
},

I’m not sure how Apollo Server Explorer works such that this updated configuration is successful in saving the cookie.

1 Like