Cookies not sent to Server

[coommark]

Intended outcome:
I have three (3) applications proxied by express-http-proxy to port 8080. Each is running on a different port. Two of them are react (NextJS) frontend and admin apps. User must log in from the frontend before access to backend. The apollo-client setup for both of the UI apps are exactly the same, below:

import withApollo from 'next-with-apollo'
import ApolloClient, { InMemoryCache } from 'apollo-boost'

export default withApollo(({ ctx, headers, initialState }) => (
  new ApolloClient({
    uri: "http://localhost:8080/api/graphql",
    cache: new InMemoryCache().restore(initialState || {})
  })
))

When a user logs in, I push their token to cookies so it can be sent back to the graphql api. This works with the actual app that the user authenticates on, but when I navigate to the backend app, the cookies are not sent.

In devtools I can see that the cookies are there alright, but they just don't get sent with requests.

I have tried this, but still, all cookies are not sent to server:

import withApollo from 'next-with-apollo'
import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { HttpLink } from 'apollo-link-http';
import { onError } from 'apollo-link-error';
import { ApolloLink } from 'apollo-link';

export default withApollo(({ ctx, headers, initialState }) => (
    new ApolloClient({
    cache: new InMemoryCache(),
    link: new HttpLink({
      uri: "http://localhost:8080/api/graphql"
    }),
    request: async operation => {
    operation.setContext({
      fetchOptions: {
        credentials: 'include'
      }
    });
  }
})
))

I have tried other variations of these. Note that when I use http://localhost:8080/api/graphql the cookies are sent ok since they all point to 8080, but when I send request via apollo-client, the cookies are not sent to the server.

Versions

"apollo-boost": "^0.1.27",
    "apollo-cache-inmemory": "^1.4.3",
    "apollo-client": "^2.4.13",
    "apollo-link": "^1.2.8",
    "apollo-link-error": "^1.1.7",
    "apollo-link-http": "^1.5.11",

[danilobuerger]

Issues here are reserved for bugs, but one of the following resources should help:

• Apollo Spectrum community: https://spectrum.chat/apollo
• StackOverflow (apollo-client tag): https://stackoverflow.com/questions/tagged/apollo-client
• Apollo Feature Request repo: https://github.com/apollographql/apollo-feature-requests

[coommark]

@danilobuerger this is a bug. Check issue #2443.

Looks to me like issue #3407 is back. Because cookie is generated by localhost:3000 and the other app runs on localhost:3001, but all are proxied to localhost:8080. The app running on localhost:3000 sends the cookies to the server okay, but the one running on localhost:3001 does not. I believe apollo-client refuses to send the cookie because of that, which shouldn't be since cookies are port agnostic.

I don't understand why you close it so fast.

[danilobuerger]

Alternatively its not a bug and you are using credentials wrong. Thats why I pointed you to resources that could help.

[coommark]

@danilobuerger I have tried credentials: 'include' and credentials: 'same-origin' at the root of the ApolloClient instantiation. I have tried several other variations (I believe more than 12 different variations) but it does not work!

Do you want feedback when there is a problem or you are more interested in closing unresolved issues?

[danilobuerger]

Even if it was a bug (which I don't think it is looking at the configuration above), I would still close it as apollo-client has nothing to do with it. Http handling is out of scope here as its handle by apollo-link-http and therefor in this repo: https://github.com/apollographql/apollo-link.

[chaunceyau]

Were you able to resolve this issue?

[frankPairs]

@coommark I had the same issue with apollo boost.

I started to use the apollo client packages with credentials "include" (because in my case the backend api is in another domain) and that solves my problems.

Here the versions that I am using:

{
    "apollo-cache-inmemory": "^1.3.11",
    "apollo-client": "^2.4.7",
    "apollo-link": "^1.2.4",
    "apollo-link-error": "^1.1.2",
    "apollo-link-state": "^0.4.2",
    "apollo-upload-client": "^10.0.0",
}

I hope you can solve your issue.

[coommark]

Were you able to resolve this issue?

As stated in my question, I use Next.JS, I guess the issue had to do with the SSR nature of Next.js (but not sure). Every setting suggested did not work for me. This is how I solved the problem:

import withApollo from 'next-with-apollo';
import ApolloClient, { InMemoryCache }  from 'apollo-boost';
import { getUserFromServerCookie, getUserFromLocalCookie } from "./auth";

export default withApollo(
    ({ ctx, headers, initialState }) => {
        return new ApolloClient({
            uri: "http://localhost:8080/api/graphql",
            request: async operation => {
            const authData = process.browser
                ? getUserFromLocalCookie()
                : getUserFromServerCookie(ctx.req);
            let token = null;
            if(authData) {
                token = authData.extra.payload.token;
            }
            operation.setContext({
                headers: {
                    bearer: token ? `${token}` : ''
                }
            });
            }
        });
    },
);

[benliger1987]

hi @coommark , experiencing the same issue here. Could you tell me what your getUserFromLocalCookie function looks like?

[keepitsimple]

Here link to doc how to fix it https://www.apollographql.com/docs/react/recipes/authentication/#cookie

[kazuooooo]

Above link helped me.

Following it, I added credentials

const httpLink = createHttpLink({
  uri: `https://${back_end_host}/graphql`,
  credentials: "include",
 ...
}

Also I need add credentials setting for backend.

In mycase (rails cors), I add this settings.

    config.middleware.insert_before 0, Rack::Cors do
      allow do
        origins ["#{FRONT_END_URL}"]
        resource '*', 
        headers: :any, 
        methods: [:get, :post, :options], 
        credentials: true # add this
      end
    end

[dep]

@kazuooooo

config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins ["#{FRONT_END_URL}"]
    resource '*', 
    headers: :any, 
    methods: [:get, :post, :options], 
    credentials: true # add this
  end
end

For this bit, can you give an example of FRONT_END_URL? This is what I've tried:

allow do
  if Rails.env.development?
    origins ["localhost"]
    resource '*',
    headers: :any,
    methods: [:post],
    credentials: true
  end
end