Apollo Client does not pass cookies

[serendipity1004]

I am currently using nextJS with apollo and it's completely unusable for me because the cookie is not passing in every request.

I would be much grateful if someone can just point me to right direction to pass cookies properly.

Even the apollo nextjs example is buggy itself https://github.com/adamsoffer/next-apollo-example

Even in that example, cookies are not being sent in the request.

I am trying every possible way of setting cookies in config without success.

Some people say swapping ApolloClient to ApolloBoost have solved it but neither of the packages work for me.

Below is an example of what I have tried

new ApolloClient({
        connectToDevTools: process.browser,
        ssrMode: !process.browser, // Disables forceFetch on the server (so queries are only run once)
        link: new HttpLink({
            uri: APOLLO_ENDPOINT, // Server URL (must be absolute)
            opts:{
                credentials:'include'
            },
            credentials: 'include', // Additional fetch() options like `credentials` or `headers`,
        }),
        cache: new InMemoryCache().restore(initialState || {}),
        fetchOptions:{
            credentials:'include'
        },
        credentials:'include'
    })

[serendipity1004]

I am using following dependencies

    "apollo-boost": "^0.1.22",
    "apollo-client": "^2.4.7",
    "apollo-link-context": "^1.0.10",
    "apollo-link-http": "^1.5.7",

[ahrbil]

I have the same issue with apolloboost the cookies not sent with the request

[antenando]

Same here

[piesrtasty]

Same here, anyone have any luck with this?

[ahrbil]

I think you need to verify your server the issue for me was the cors i was passing cors options in the wrong place now it works as expected

[igo]

@serendipity1004 works here. Doesn't it work during SSR or on client side?

[antenando]

Figured it out. credentials:'include' should be in the root of the config. Like,

new ApolloClient({
  credentials: 'include',
})

I was using inside of fetchOptions...

[RiChrisMurphy]

I'm pretty sure I'm still having this issue. My rest calls have cookies attached, however my graphql queries don't.

[calendee]

I'm having a similar problem, but I actually think it is a browser issue and nothing to do with the Apollo Client.

When I have my front-end hosted on Heroku like frontend.herokuapp.com and my yoga backend on something like backend.herokupapp.com, my Graphql queries will only retain the cookie if my browsers do NOT have "Disable 3rd Party Cookies" set or Safari's "Prevent Cross-site Tracking" enable.

It seems to me, the browser considers any cookie from different subdomain's to be 3rd party.

There are varying degrees of this:

Opera - Cookies blocked if "Block Third Party Cookies" enabled
Firefox - Cookies work even with Block Third Party Cookies - Trackers" enabled but blocked if "All third party cookies" is selected
Chrome - Cookies work unless "Block Third Party Cookies" enabled

[rrakso]

Hi, I found that when I want to make request with "Cookie" then apollo client is not sending it, but just when I change it to "Cookies" then everything is ok XD

[hallya]

Hi there,

I'm still having the issue here. I'm working with:

• Angular 7
• Apollo-client 2.4.7
• Chrome with cookie enabled and no extension

withCredentials is sets to true in my apollo.config.ts file:

    const uri = '/graphql';
    const link = httpLink.create({
      uri,
      withCredentials: true
    });

    apollo.create({
      link,
      cache: new InMemoryCache(),
      defaultOptions: {
        watchQuery: {
          errorPolicy: 'all'
        }
      },
      connectToDevTools: true
    });

Is there anybody that can tell us why ?

[TheoMer]

Hi, I found that when I want to make request with "Cookie" then apollo client is not sending it, but just when I change it to "Cookies" then everything is ok XD

@rrakso Did you mean like this?

headers: { cookies: ... }

[chaunceyau]

Anyone have any further insight?

[rrakso]

@TheoMer yup ;)

[chaunceyau]

@rrakso Could you provide a snippet of what is working for you?

[garmjs]

i'm using next-with-apollo and it's working, you can do something like this

// createClient.js
import ApolloClient from "apollo-boost";
import withData from "next-with-apollo";

const createClient = ({ headers }) => {
  return new ApolloClient({
    uri: process.env.ENDPOINT,
    request: operation => {
      operation.setContext({
        fetchOptions: {
          credentials: "include"
        },
        headers
      });
    }
  });
};

export default withData(createClient);

// index.js server
const cookieParser = require("cookie-parser");
require("dotenv").config({ path: "var.env" });
const createServer = require("./createServer");

const server = createServer();

server.express.use(cookieParser());

server.express.use((req, res, next) => {
  const { token } = req.cookies;
  console.log(token);
  next();
});

server.start(
  {
    cors: {
      credentials: true,
      origin: ["http://localhost:3000"] // frontend url.
    }
  },
  r => console.log(`Server is running on http://localhost:${r.port}`)
);

[engbrianlee]

Figured it out. credentials:'include' should be in the root of the config. Like,

new ApolloClient({
  credentials: 'include',
})

I was using inside of fetchOptions...

This also fixed my issue, the docs are a bit confusing as credentials: 'include' is nested under fetchOptions; putting in the root fixed my issue. Is there a reason why this option can be put in two places? Only the root worked for me and caused a lot of confusion

[MANTENN]

FYI: I'm using fetch, and axios, thats what's not setting the cookie header for me.

[neil-gebbie-smarterley]

I had to do this for our build a few days ago, here is how I did it - https://gist.github.com/neil-gebbie-smarterley/cd8356df4c786c4c9dacfc9d46e890ac

Our set it is:
Next/Apollo Client/Apollo Server/REST data source

It's basically just passing it through to the server, I'm not sure if the document.cookie is needed for subsequent requests, but it seems to be working ok for us, not in production yet, but it's passing cookies.

[wanzulfikri]

Oddly enough, what worked for me was to set an AuthLink with setContext from apollo-link-context and call localStorage.getItem("") within it like so:

const authLink = setContext((_, { headers }) => {
  const token = localStorage.getItem("");

  return {
    headers: {
      ...headers,
    }
  };
});

I'm not sure if this is a good workaround (maybe dangerous?); you'll be bombarded with reference errors as localStorage is not available when NextJS renders in server-side.

Edit: Eh...doesn't work on mobile.

[TheoMer]

This works for me:

  return new ApolloClient({
    uri: process.env.NODE_ENV === 'development' ? endpoint : prodEndpoint,
    request: operation => {
      operation.setContext({
        fetchOptions: {
          credentials: 'include',
        },
        headers: { cookie: headers && headers.cookie },
      });
    },
    .......
  });

[lawwantsin]

Put the credentials: "include" in your httpLink, like so.

const httpLink = createHttpLink({ uri,  credentials: 'include',
 });

Then put that in your ApolloClient. Worked finally without a bunch of custom stuff.

[NinjaOnRails]

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. I had to remove .restore(initialState || {}) so it's just cache: new InMemoryCache() and now it's fully working. Only thing still not working is Safari. Anyone fixed it for Safari?

[helfi92]

I'm pretty sure I'm still having this issue. My rest calls have cookies attached, however my graphql queries don't.

@RiChrisMurphy I'm seeing a similar issue. Were you able to find a fix for that?

[neil-gebbie-smarterley]

@helfi92 Have you tried any of the solutions in this thread?

[helfi92]

I think I understand what's happening. The client and server I'm working with are both subdomains of herokuapp (e.g.., ui.herokuapp.com and web-server.herokuapp.com). From https://devcenter.heroku.com/articles/cookies-and-herokuapp-com:

applications in the herokuapp.com domain are prevented from setting cookies for *.herokuapp.com

Using a custom domain will probably resolve the issue.

[juicycleff]

I've been trying in Razzle to no avail. Cookies are passed to playground very ok, but on razzle it's not

[neil-gebbie-smarterley]

@juicycleff What does your createApolloClient file look like?

Do you have a withApolloClient HOC?

[neil-gebbie-smarterley]

Hello @cyc1e from 2021 - we have been using my this in production since 2020, see the gist above for the implementation.

[gregg-cbs]

I ended up using Axios to make my queries. Its a hell of a learning curve using axios to run graph queries but now I have a product that works and businesses are using it :)

To be honest rest would have been way easier and quicker but we implemented graph in our back-end and pushed through with it. Its time consuming.

[hwillson]

There is a lot of history in this issue, and the problems listed head in all sorts of different directions. If anyone thinks this is still a problem in @apollo/client@latest, and can provide a small runnable reproduction, we'll take a closer look. Thanks!

[allanesquina]

Hi guys, same problem. It works in browser, but not on server side.

@apollo/client ^3.0.2
[email protected]

Apollo client credentials:

    const { HttpLink } = require('@apollo/client/link/http')
    return new HttpLink({
      uri: 'http://localhost:3000/api/graphql',
      credentials: 'same-origin',
    })

I can read the cookies in getServerSideProps but not from the Apollo-client call.

[allanesquina]

I'm using this example, you may use that to reproduce as it has the same issue.

https://github.com/vercel/next.js/tree/canary/examples/api-routes-apollo-server-and-client-auth

Try to use getServerSideProps to get data from a protected resolver.

I hope it helps.

[hwillson]

@allanesquina @apollo/[email protected] is a fairly old version of AC3; can you try with @apollo/client@latest? If that doesn't work, can you provide a small runnable reproduction that clearly demonstrates the issue you're seeing? The link you provided is for one of Next's demo apps. To be able to properly troubleshoot this, we'll need a focused reproduction that shows the problem. Thanks!

[allanesquina]

@hwillson I did some tests and I realized that the SchemaLink used to avoid network on SSR was missing the context.

 return new SchemaLink({ schema, context: { { req, res } })

So I'm passing the context all way down in getServerSideProps.

export async function getServerSideProps(context) {
  const client = initializeApollo(null, context);
...
}

The client.js file

import { useMemo } from "react";
import { ApolloClient, InMemoryCache } from "@apollo/client";
import merge from "deepmerge";

let apolloClient;

function createIsomorphLink(ctx) {
  if (typeof window === "undefined") {
    const { SchemaLink } = require("@apollo/client/link/schema");
    const { schema } = require("./schema");
    return new SchemaLink({ schema, context: ctx });
  } else {
    const { HttpLink } = require("@apollo/client/link/http");
    return new HttpLink({
      uri: "/api/graphql",
      credentials: "same-origin",
    });
  }
}

function createApolloClient(ctx) {
  return new ApolloClient({
    ssrMode: typeof window === "undefined",
    link: createIsomorphLink(ctx),
    cache: new InMemoryCache(),
  });
}

export function initializeApollo(initialState = null, ctx) {
  const _apolloClient = apolloClient ?? createApolloClient(ctx);

  // If your page has Next.js data fetching methods that use Apollo Client, the initial state
  // get hydrated here
  if (initialState) {
    // Get existing cache, loaded during client side data fetching
    const existingCache = _apolloClient.extract();

    // Merge the existing cache into data passed from getStaticProps/getServerSideProps
    const data = merge(initialState, existingCache);

    // Restore the cache with the merged data
    _apolloClient.cache.restore(data);
  }
  // For SSG and SSR always create a new Apollo Client
  if (typeof window === "undefined") return _apolloClient;
  // Create the Apollo Client once in the client
  if (!apolloClient) apolloClient = _apolloClient;

  return _apolloClient;
}

export function useApollo(initialState) {
  const store = useMemo(() => initializeApollo(initialState), [initialState]);
  return store;
}

It solves the issue using the SchemaLink but I couldn't make it work with HttpLink on server side. Maybe if I create a custom header on ApolloClient with Set-Cookie property to propagate the cookie but I'm not sure if it's gonna work.

Just an update: I'm using @apollo/client: latest now.

[ryanagillie]

Heyo! I was running into the issue of apollo-client sending / setting cookies client side fine, but was getting problems with it server side. I use an afterware server-side to set cookies. Here's my fix with typescript:

import {
  ApolloClient, ApolloLink, HttpLink, InMemoryCache, gql,
} from '@apollo/client';
import { NormalizedCacheObject } from '@apollo/client/cache';
import { GetServerSidePropsContext } from 'next';
import { useMemo } from 'react';

const createClient = (ctx?: GetServerSidePropsContext) => {
  const setCookiesAfterware = new ApolloLink((operation, forward) => forward(operation).map((response) => {
    ctx?.res.setHeader('set-cookie', operation.getContext().response.headers.raw()['set-cookie'] || '');
    return response;
  }));

  return new ApolloClient({
    link: setCookiesAfterware.concat(new HttpLink({ uri: 'http://localhost/graphql', headers: { cookie: ctx.req.headers.cookie } })),
    cache: new InMemoryCache(),
  });
};

let client: ApolloClient<NormalizedCacheObject> | undefined;
const initializeClient = (initialState?: NormalizedCacheObject, ctx?: GetServerSidePropsContext) => {
  const apolloClient = client ?? createClient(ctx);

  if (initialState) {
    const prevState = apolloClient.extract();

    apolloClient.restore({ ...prevState, ...initialState, ...{ ROOT_QUERY: { ...prevState.ROOT_QUERY, ...initialState.ROOT_QUERY } } });
  }

  if (typeof window === 'undefined') return apolloClient;

  client ??= apolloClient;

  return client;
};

const useClient = (initialState?: NormalizedCacheObject) => useMemo(() => initializeClient(initialState), [initialState]);
const getClient = (ctx: GetServerSidePropsContext) => initializeClient(undefined, ctx);

export { gql, useClient };
export default getClient;

[allanesquina]

Thx @rag4214, now it made sense, I have to set the headers to forward the cookies to the API.

[theneshofficial]

Heyo! I was running into the issue of apollo-client sending / setting cookies client side fine, but was getting problems with it server side. I use an afterware server-side to set cookies. Here's my fix with typescript:

import {
  ApolloClient, ApolloLink, HttpLink, InMemoryCache, gql,
} from '@apollo/client';
import { NormalizedCacheObject } from '@apollo/client/cache';
import { GetServerSidePropsContext } from 'next';
import { useMemo } from 'react';

const createClient = (ctx?: GetServerSidePropsContext) => {
  const setCookiesAfterware = new ApolloLink((operation, forward) => forward(operation).map((response) => {
    ctx?.res.setHeader('set-cookie', operation.getContext().response.headers.raw()['set-cookie'] || '');
    return response;
  }));

  return new ApolloClient({
    link: setCookiesAfterware.concat(new HttpLink({ uri: 'http://localhost/graphql', headers: { cookie: ctx.req.headers.cookie } })),
    cache: new InMemoryCache(),
  });
};

let client: ApolloClient<NormalizedCacheObject> | undefined;
const initializeClient = (initialState?: NormalizedCacheObject, ctx?: GetServerSidePropsContext) => {
  const apolloClient = client ?? createClient(ctx);

  if (initialState) {
    const prevState = apolloClient.extract();

    apolloClient.restore({ ...prevState, ...initialState, ...{ ROOT_QUERY: { ...prevState.ROOT_QUERY, ...initialState.ROOT_QUERY } } });
  }

  if (typeof window === 'undefined') return apolloClient;

  client ??= apolloClient;

  return client;
};

const useClient = (initialState?: NormalizedCacheObject) => useMemo(() => initializeClient(initialState), [initialState]);
const getClient = (ctx: GetServerSidePropsContext) => initializeClient(undefined, ctx);

export { gql, useClient };
export default getClient;

This worked for me. Thanks @rag4214

[gregg-cbs]

Add cookie to getServerSideProps on a page by page basis

Easy quick method to add cookie is to pass context.

export async function getServerSideProps(context) {
  const user = await client.query({
    query: GET_COOKIE_USER,
    context: {
      headers: {
        cookie: context.req.headers.cookie
      }
    }
  });

  return {
    props: {
      user: user.data.currentUser
    }
 };
}

If client side is not storing cookie on login or whatever

adding credentials property seems to do the trick

const httpLink = new HttpLink({ 
  uri: "http://localhost:3000/graphql",
  credentials: 'include' // allows cookies
});

The docs are here:
https://www.apollographql.com/docs/react/networking/authentication/#cookie

[alanyong91]

Add cookie to getServerSideProps on a page by page basis

Easy quick method to add cookie is to pass context.

@gregg-cbs I believe this is what we want to avoid (although this is what I do now). Repetitive code in many pages is a bad practice. Need to find a solution for this.

[gregg-cbs]

@alanyong91 We definitely want cookies to be something that happens naturally.
But unfortunately thats what I could offer to those who are desperate and need cookies to make requests.

What solutions can you think of that would be good to try? I think together as a community we can come up with an ideal solution and if not make it ourselves we can propose it to next and or apollo.

[HasanYousef]

Guys the problem that we are new to Next.js or any SSR (server side rendering) you guys are using.
For example my SSR code was calling an Apollo query which needs to send a cookie for authentication to access data, This is totally stupid and doesn't make any sense. All the queries in the SSR side should only ask for public data (queries don't need any type of authentication or sending cookies).

[nenadfilipovic]

This is example with nextjs apollo ssr codegen,

 const {
    props: { apolloState, data, error },
  } = await ssrGetOwnSettings.getServerPage(
    { variables: { where: { id } } },
    context,
  );

initiate client,

const createApolloClient = (context: Context) => {
  return new ApolloClient({
    cache: new InMemoryCache(),
    connectToDevTools: isDevelopment,
    ssrMode: typeof window === 'undefined',
    link: createHttpLink({
      uri: `${appConfig.baseUrl}${appConfig.apiUrl}`,
      headers: { cookie: context?.req?.headers.cookie },
    }),
  });
};

[Kaherdin]

I try almost everything, but it still doesn't work for me... I can only making work with httponly = false cookie :

//ApolloClient
  const httpLink = createHttpLink({
    uri: API_URL,
  });

 
  const authLink = setContext((_, { headers }) => {
    // This work only with httpOnly = false
    const token = Cookies.get('token')
   
    // return the headers to the context so httpLink can read them
    return {
      headers: {
        ...headers,
        authorization: token ? `Bearer ${token}` : "",
      }
    }
  });
  
  const client = new ApolloClient({
    link: authLink.concat(httpLink),
    cache: new InMemoryCache(),
  });

If I try to add credentials:"include" to my httpLink, I get : The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

I setup my cookie using /api/login

const data = await strapiRes.json();
    if (strapiRes.ok) {
      // Set Cookie
      res.setHeader(
        "Set-Cookie",
        cookie.serialize("token", data.jwt, {
          httpOnly: false,
          secure: process.env.NODE_ENV !== "development",
          maxAge: 60 * 60 * 24 * 7, // 1 week
          sameSite: "strict",
          path: "/",
        })
      );

[mbrowne]

@Kaherdin yes, that's an HTTP security limitation—your server can't send the wildcard * for the allowed origin if you want it to accept cookies.

One solution (not the most secure) is to pass true instead of * as the origin setting for the cors middleware in your node server that's running Apollo Server:

app.use(cors({
    credentials: true,
    // allow all origins
    origin: true,
}))

The more secure way is to check the origin against a whitelist, as explained here:
https://www.npmjs.com/package/cors#configuring-cors-w-dynamic-origin

I also found that in my case, since I'm using apollo-server-express, I had to pass in the corsOptions to the applyMiddleware function instead of using cors on the express server directly, or else it wasn't picking them up. I'm not sure if this is necessary on the latest version, but in any case this is what worked for me:

const corsOptions = {
    credentials: true,
    // allow all origins
    origin: true,
}

apolloServer.applyMiddleware({
    app: server,
    cors: corsOptions,
})

[dclipca]

In my case I was using a custom link and had to add custom fetchOptions in it:

const httpLink = new HttpLink({
  uri: "http://localhost:4000/query",
  fetchOptions: {
    credentials: "include",
  },
});
const link = from([errorLink, httpLink]);
const graphqlClient = new ApolloClient({
  link,
  cache: new InMemoryCache(),
  credentials: "include",
});

[mbrowne]

@dclipca FYI I think that because you're using a custom link, the second credentials: "include" (the one you're passing directly to ApplloClient) is not needed.

[sterlingbm]

My problem was with Apollo Studio. Solution for me was a combination of the following.

index.ts (in apollo server):

import * as cookieParser from "cookie-parser";

const startServer = async () => {  
    const app = express();
    app.use(cookieParser());
    
        let corsOptions = { 
        origin: "https://studio.apollographql.com",
        credentials: true,
      };
      
          const server = new ApolloServer({ 
        schema: genSchema() as any,
        context: ({req, res}) => { 
            return {
                 req,
                 res
            }
        }, 
    });
      
      await server.start();
    server.applyMiddleware({ app, cors: corsOptions }); 

In resolver response that sets the token:

context.res.cookie('token', response.accessToken, { secure: true, sameSite: 'None', httpOnly: true, maxAge: 60000000 });

Studio Settings:

[jamesdh]

For a bit more context, I'm experiencing this specifically in Safari (15.5), w/ "Prevent cross-site tracking" enabled, while doing local development on http://myapp.local. My GraphQL API is served from the domain http://api.myapp.local. The cookies are assigned the domain .myapp.local

Doing either of the following DOES work:

• Use Chrome/Firefox
• Disable "Prevent cross-site tracking"

I realize a number of the comments on this issue are likely about diverging issues, with many being simply misconfiguration issues. But I suspect a number of people are experiencing this issue due to some combination of issues with Safari's cookie protection, sub-domains, and maybe Apollo itself?

[huzaifaali14]

I had a similar kind of issue where cookies were not being sent along with all the requests even tho cookies were stored in the browser. On localhost everything was working fine but things were different for staging environment since the staging frontend and backend urls were comprised of different subdomains and for cookie to be available I had to setup domain and path in cookie explicitly

Suppose your frontend and backend url are like thesewww.frontend.example.com and www.backend.example.com respectively. So your cookie should have the information about path and domain

response.cookie( 'xyz', 1234, { sameSite: 'lax', httpOnly: true, path: / domain: .example.com, // make sure to start domain with a dot . } );

[chemicalkosek]

@huzaifaali14 it has already been written here many times

#4190 (comment)

[juanurcola]

I had the same problem.

My solution was the following (I did not find a place where I could clarify it, but it was a trial and error)

Apollo client config:

import {ApolloClient, HttpLink, InMemoryCache} from "@apollo/client";

const httpLink = new HttpLink({
  uri: `${process.env.NEXT_PUBLIC_URL_SITE}/api/graphql`,
  credentials: "same-origin",
});

export const client = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache(),
});

SSR request (typescript):

export const getServerSideProps: GetServerSideProps = async ({req}) => {
    const {data} = await client.query({
      query: QUERY_NAME,
      context: {
        headers: {
          cookie: req?.headers?.cookie ?? null,
        },
      },
    });
  
    return {
      props: {data},
    };
  };

I'm using:

• "@apollo/client": "^3.7.1",
• "@apollo/server": "^4.1.1",
• "graphql": "^16.6.0",
• "next": "13.1.1",
• "react": "18.2.0",

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
For general questions, we recommend using StackOverflow or our discord server.