menu

Apollo

A community of developers, designers and others who love Apollo and GraphQL. 🚀

Channels
# All channels
view-forward
# General
view-forward
# Apollo Angular
view-forward
# Announcements
view-forward
# Apollo Android
view-forward
# Apollo Client
view-forward
# Apollo iOS
view-forward
# Apollo Link
view-forward
# Apollo Link Rest
view-forward
# Local State
view-forward
# Apollo Studio
view-forward
# Apollo Server
view-forward
# Apollo Tooling
view-forward
# Contributing
view-forward
# Docs
view-forward
# Events
view-forward
# GraphQL Tools
view-forward
# Jobs
view-forward
# Random
view-forward
# React Apollo
view-forward
# Showcase
view-forward
# Subscriptions
view-forward
# Testing
view-forward
# Vue Apollo
view-forward
Team

SSR apollo link http not passing authentication cookies

March 24, 2019 at 11:44am
The Apollo community has a new home. This thread is preserved for historical purposes. The content of this conversation may be innaccurrate or out of date. Go to new community home →

SSR apollo link http not passing authentication cookies

March 24, 2019 at 11:44am
I have a nextjs app running on localhost:3000 and a graphql server running at localhost:8000. I have a login mutation that is writing a cookie to the response.
res.cookie("authentication", token, {
httpOnly: true,
maxAge: 1000 * 60 * 60 * 24 * 1
});
cors is set up on the graphql server with credentials: true and origin: 'http://localhost:3000'.
On the nextjs end I am setting up the apollo client as follows
return new ApolloClient({
connectToDevTools: process.browser,
ssrMode: !process.browser,
link: createHttpLink({
uri: 'http://localhost:8000/graphql',
credentials: 'include'
}),
cache: new InMemoryCache().restore(initialState || {}),
})
With this setup the authentication cookie is sent with requests to graphql but only when using clientside navigation. If I render a route directly from the server the cookie is not sent with the graphql request and I can therefore not determine whether the user is logged in or not.
I have managed to get this to work by including a customFetch implementation in the options for createHttpLink which internally takes the cookie header from the server side request and passes it through to the fetch.
return new ApolloClient({
connectToDevTools: process.browser,
ssrMode: !process.browser,
link: createHttpLink({
fetch: customFetch(headers),
uri: 'http://localhost:8000/graphql',
credentials: 'include'
}),
cache: new InMemoryCache().restore(initialState || {}),
})
const customFetch = headers => (uri, options) => {
options.headers.cookie = headers.cookie
return fetch(uri, options);
Is this the correct way of getting this to work? It does strike me as probably not.

August 7, 2019 at 1:52pm
have you fixed this?
  • reply
  • like

August 12, 2019 at 10:31am
Damn, I just opened Spectrum to ask exactly this same question.
Edited
  • reply
  • like

August 12, 2019 at 7:47pm
can you not get the cookies to pass to the back-end on every request? Or are you worried about the security issue like OP above? If it's the former, just follow [this example] (https://github.com/zeit/next.js/tree/master/examples/with-apollo) and use [email protected], [email protected], and import { getDataFromTree } from '/react-ssr'. If you get stuck check out my implementation [here] (https://github.com/NinjaOnRails/apollo-nextjs)
  • reply
  • like

August 13, 2019 at 9:58pm
I've fixed it for myself using the latest libraries [email protected], [email protected] and [email protected] Cookies are passed with every request, SSR working as expected and no errors. Code is here
  • reply
  • like

August 14, 2019 at 7:29am
I didn't use the custom fetch option I detailed originally in the end. I concat'd another link to the httpLink that added the cookie headers to the request. So I guess similar approach but different.
return new ApolloClient({
connectToDevTools: process.browser,
ssrMode: !process.browser, // Disables forceFetch on the server (so queries are only run once)
link: customLinkLink.concat(httpLink),
cache: new InMemoryCache().restore(initialState || {})
})
I'll check out your code to see if I can get rid of that logic too! Thanks!
  • reply
  • like

December 19, 2020 at 7:13am
Is there a sample application that includes the following topics? Can't understand how to adapt the "http-only cookie" using Next JS and Apollo?
  • reply
  • like