Apollo-client: Setting authentication headers

Created on 7 Jan 2018 · 2Comments · Source: apollographql/apollo-client

Intended outcome:
Add JWT to request header, precisely as described in the docs

Actual outcome:
Header not present

How to reproduce the issue:
Following the documentation at:
https://www.apollographql.com/docs/react/recipes/authentication.html#Header
to the letter. Won't reproduce here as I've simply cut and pasted that code and verified that the token is in local storage. No other errors. Code works when authentication is disabled.

Version

[email protected]

Chrome Version 63.0.3239.84

Looks just like #2168. Happy to provide more information, but I'm not clear what might be useful.

Wondering if there's been subsequent changes that haven't made it into the docs?

Source

crustyratfink

👍5

Most helpful comment

Follow up: My issue's resolved, but I'm not able to nail it down to a particular cause. I updated all the relevant packages to the latest and abandoned the specific implementation from the docs above.

Switched to this:

    getClient = () => {
    const access_token = localStorage.getItem('access_token');
    const headers = {
      authorization: access_token ? `Bearer ${access_token}` : null
    };
    const httpLink = new createHttpLink({
      uri: GRAPHQL_URL,
      headers: headers
    });
    return new ApolloClient({
      link: httpLink,
      cache: new InMemoryCache().restore(window.__APOLLO_STATE__)
    });
  };

and <ApolloProvider client={this.getClient()}>

and now, the header is showing up. So, not a clear cause/effect solution, but at least something to try for googlers from the future.

crustyratfink on 7 Jan 2018

👍7

All 2 comments

Switched to this:

    getClient = () => {
    const access_token = localStorage.getItem('access_token');
    const headers = {
      authorization: access_token ? `Bearer ${access_token}` : null
    };
    const httpLink = new createHttpLink({
      uri: GRAPHQL_URL,
      headers: headers
    });
    return new ApolloClient({
      link: httpLink,
      cache: new InMemoryCache().restore(window.__APOLLO_STATE__)
    });
  };

and <ApolloProvider client={this.getClient()}>

and now, the header is showing up. So, not a clear cause/effect solution, but at least something to try for googlers from the future.

crustyratfink on 7 Jan 2018

👍7

@Arseniy-II But it just doesn't work!