Apollo-client: Request cookies not being passed when `same-origin` is set.

[alexboots]

Intended outcome:
Want request cookies to be sent with query when same-origin is set.

Actual outcome:
I followed the new docs for Authentication but the Request Cookies are not being passed.

This worked before upgrading and I haven't changed any code besides what was in the migration guide.

Code from 1.0.1 (worked fine, Request cookie is passed and came back with data)

import { ApolloProvider } from 'react-apollo'
import ApolloClient, { createNetworkInterface } from 'apollo-client'

const networkInterface = createNetworkInterface({
  uri: '/graphql',
  opts: {
    credentials: 'same-origin',
  },
});

const client = new ApolloClient({
  networkInterface,
});

const Root = () => {
  return (
    <ApolloProvider client={ client }>
      <Header />
    </ApolloProvider>
  );
};

ReactDOM.render(<Root />, document.querySelector('#root'));

Network tab:

Updated code to reflect 2.0.1 API:

import ApolloClient from 'apollo-client'
import { ApolloProvider } from 'react-apollo'
import { createHttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'

import Header from './components/Header'

const link = createHttpLink({
  uri: '/graphql',
  opts: {
    credentials: 'same-origin',
  },
});

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

const Root = () => {
  return (
    <ApolloProvider client={ client }>
      <Header />
    </ApolloProvider>
  )
}

ReactDOM.render(<Root />, document.querySelector('#root'));

Network Tab:

How to reproduce the issue:
Upgrade and use createHttpLink with opts: { credentials: 'same-origion' } and see no Request cookie passed. I'm using express-session on the backend, and have tried using cors as mentioned in the docs but to no avail.

_I'm not sure how to better debug but would love to know how so I can help fix it (if it is a problem). I could be messing something up but only upgrade-to-2.0 code changed so it seems suspect._

Version

• [email protected]

[alexboots]

Decided to look at the source code to see whats wrong, the documentation is incorrect for passing options.

You don't need to pass the credentials in an opts object, from
https://www.apollographql.com/docs/react/recipes/authentication.html#Cookie

const link = createHttpLink({
  uri: '/graphql',
  opts: {
    credentials: 'same-origin',
  },
});

Should actually read:

const link = createHttpLink({
  uri: '/graphql',
  credentials: 'same-origin'
});

[alexboots]

Docs were off: https://github.com/apollographql/apollo-client/pull/2462

[juliocanares]

still not working for me, even setting credentials: same-origin it just doesn't set the cookie

[darren128]

Any update on this?

[francisngo]

In some docs. it says to use HttpLink : import { HttpLink } from 'apollo-link-http'; and in some other part of the docs (in migration) it says to use createHttpLink : import { createHttpLink } from 'apollo-link-http'. I tried both but the request cookies are still not passing.

Here is what I have.

import React from 'react';
import ReactDOM from 'react-dom';
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloProvider } from 'react-apollo';
import { BrowserRouter as Router, Route } from 'react-router-dom';

import App from './components/App';

const httpLink = new HttpLink({
  uri: '/graphql',
  credentials: 'same-origin'
});

const client = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache({
    dataIdFromObject: object => object.id || null
  })
});

[francisngo]

I was able to get it to work after I upgraded my dependencies:

"apollo-cache-inmemory": "^1.1.8",
"apollo-client": "^2.2.4",
"apollo-link-http": "^1.3.3",
"graphql": "^0.13.0",
"graphql-tag": "^2.7.3",
"react-apollo": "^2.0.4",

[eschaefer]

I've upgraded my dependencies to what @francisngo has👆, but still not getting this to work. This is a really strange issue.

[darren128]

See https://github.com/apollographql/apollo-link/pull/364

[chriskolenko]

I moved to
credentials: 'include'

same-origin will check scheme, hostname and port.

After switching to 'include' I also had to fix up my CORS.

[moltar]

Having the same issue. Cannot pass cookies.

@chriskolenko if you could expand on your answer, that'd be helpful. Thanks.

[jsmantras]

I had same issue and I used fetchOptions to use GET instead of POST. It is a work around not a fix.

const httpLink = new HttpLink({
  uri: '/graphql',
  fetchOptions: { method: 'GET' },
  credentials: 'same-origin'
});

[mnmkng]

For those still fighting with this issue, I switched to apollo-boost and cookies work fine with absolutely no configuration.

[ghost]

@mnmkng neither with apollo-boost to me! How to fix? I cannot request with cookies, no one is sent!

[andriy-f]

Not new HttpLink but createHttpLink({}) if apollo-link-http: 1.5.4 or similar

[outkine]

I have the exact same issue, and nothing seems to work.

const apolloClient = new ApolloClient({
  uri: 'http://127.0.0.1:8000/graphql/',
  credentials: 'include',

  fetchOptions: {
    credentials: 'include',
  },
})

I am using vue-apollo and apollo-boost, if that makes a difference.

document.cookie also shows that the cookies do, indeed, exist.

[outkine]

It seems that SameSite was causing the issue. Is disabling it the only solution?

[serendipity1004]

any update on this? I am using every possible credentails configs and I still cannot send cookies. Doesn't matter whether I use apollo-client or apollo-boost

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'
    })

[techyrajeev]

For those still fighting with this issue, I switched to apollo-boost and cookies work fine with absolutely no configuration.

Can you please share your configurations for the same? @mnmkng

[valmack]

Why is this issue closed? I've seen no fix. Having same problem.

[jackcaldwell92]

For anybody still struggling with this, Ben Awad's solution in the following video worked for me https://www.youtube.com/watch?v=9EwvLpkuLSg

Essentially, you use 'createHttpLink' from apollo-link-http and 'InMemoryCache' from apollo-cache-inmemory when creating your client. Something like this

import { InMemoryCache } from 'apollo-cache-inmemory';
import { createHttpLink } from 'apollo-link-http';

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: createHttpLink({
    credentials: 'include',
    uri: 'http://localhost:4000/graphql',
  }),
});

[Akhnaten972]

I have the same issue and no previous solutions work for me. Any help ?

[valmack]

For me it was a server side issue and nothing to do with the Apollo. Once I set credentials to ‘include’ I updated my CORS policy and whitelisted the client uri where Apollo is used. If you are using Django as a I am lmk and I can walk you through it

[RiChrisMurphy]

Still have the problem. Golang server with with nextjs on the front... rest calls work just fine but can't seem to get my cookies on my graphql queries working.

[chaunceyau]

Any further insight?

[ajsharp]

Related #4190

[junaiid-khattak]

For me it was a server side issue and nothing to do with the Apollo. Once I set credentials to ‘include’ I updated my CORS policy and whitelisted the client uri where Apollo is used. If you are using Django as a I am lmk and I can walk you through it

I have been stuck at this for a while now. Don't know what i am missing. I am using corsheaders and added following to settings.py
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True
Cookies are set on client but are not sent with requests. Any help?

[valmack]

@junaiid-khattak try this https://github.com/ottoyiu/django-cors-headers

Looking back at my code I explicitly defined the urls in my whitelist.

[junaiid-khattak]

@thevaleriemack already have this. I don't think this is a CORS issue because it works fine with other clients. Cookies are there but apollo-client just wouldn't send them. After trying for few days, i decided to switch from cookie based auth to jwt and everything is better now

[TitanFighter]

If anyone needs help with Vue + Django.

[EliasTouil]

If you are here in 2020 With next JS => https://github.com/apollographql/apollo-client/issues/5089

[mehmetnyarar]

Apollo Server documentation says:

You just need to pass the credentials option. e.g. credentials: 'same-origin' as shown below, if your backend server is the same domain or else credentials: 'include' if your backend is a different domain.

Although my backend server and frontend app are on the same domain, I had to change same-origin to include to make it work. I don't know why same-origin doesn't work. I'd appreciate if someone could explain...