title: Apollo client + Next.js - Adding Authorization token to client request
body: <p><strong>GOAL</strong></p>
  
  <p>I want to populate my <code>Authorization</code> header with an access token. I want to store that access token in the Apollo cache as <a href="https://auth0.com/docs/security/store-tokens" rel="nofollow noreferrer">Auth0</a> explicitly state not to store access tokens in local storage (I don't know why the <a href="https://www.apollographql.com/docs/react/recipes/authentication/#header" rel="nofollow noreferrer">Apollo Client docs</a> seem to think it's okay).</p>
  
  <p>Failing that, I want to store my access token securely and be able to add it to each Apollo Client request to the Apollo Server.</p>
  
  <pre><code>const apolloClient = withApollo(({ctx, headers, initialState}) =&gt; {
    const cache = new InMemoryCache();
  
    // Code here to access local cache.
  
    return new ApolloClient({
  
      cache,
      link: new HttpLink({
        uri: &lt;apollo server endpoint&gt;,
        headers: {
          Authorization: `Bearer ${accessToken}`,
          'Access-Control-Allow-Origin': 'http://localhost:3000/',
          ...headers
        },
        credentials: 'include'
      }),
      typeDefs,
      resolvers
    })
  })
  
  class MyApp extends App {
    render() {
      const { Component, pageProps, apollo } = this.props;
  
  
      return (
        &lt;ApolloProvider client={apollo}&gt;
          &lt;Component {...pageProps} /&gt;
        &lt;/ApolloProvider&gt;
      );
    }
  }
  
  export default apolloClient(MyApp);
  </code></pre>
  
  <p><strong>TRIED</strong></p>
  
  <ul>
  <li>I've tried to access <code>localStorage</code> from within the <code>withApollo</code> function but it is SSR'd so I'm unable to access that. I was going to use the <code>localStorage</code> to set a boolean to check in the <code>withApollo</code> function so it'll know the access token has been added to the apollo cache after the redirect.</li>
  <li>I've tried just using the cache with a key storing a boolean to check if the user has signed in which is set in the same function where the access token. If that is true I'd access the access token key and add that to the <code>Authorization</code> header. But I was getting issues with setting the initial state overriding the cache set in sign in function.</li>
  </ul>
  
  <p><strong>OTHER IDEAS</strong></p>
  
  <ul>
  <li><p>I thought I could pass the access token through in the <code>ctx</code> argument, but I'm not familiar enough with Next.js to figure out if that's valid way to do it.</p></li>
  <li><p>I thought I could pass in a props to the <code>withApollo</code> function from a component, but that doesn't seem like it'd be possible.</p></li>
  </ul>
  
  <p><strong>QUESTIONS</strong></p>
  
  <ul>
  <li>What is the best way to store the access key so as to add it to the Apollo Client with each request?</li>
  <li>I noticed some people are using a <code>fetch</code> polyfill, would that be appropriate for this situation? If so, how would that work?</li>
  <li>How does the <code>withApollo</code> HOC work and why is it needed to work with Next.js? I've read some of the code behind this, but I don't fundamentally understand why it is needed.</li>
  </ul>