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

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: screen shot 2017-10-31 at 2 35 43 pm

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: screen shot 2017-10-31 at 2 36 14 pm

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

apollo-client@2.0.1

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 31 (3 by maintainers)

Commits related to this issue

Passing credentials in opts:{} is incorrect Opened issue a couple days ago, looked at code today to see if I could fix, turned out to be a simple docs error: https://github.com/apollographql/apollo-... — committed to apollographql/apollo-client by alexboots 7 years ago

Most upvoted comments

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.

chriskolenko on Feb 28, 2018

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 on Feb 14, 2018

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 on Nov 2, 2017

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

EliasTouil on May 10, 2020

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

v-stickykeys on Jan 4, 2019

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

serendipity1004 on Nov 29, 2018

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

ghost on Apr 27, 2018

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

darren128 on Feb 26, 2018