React-starter-kit: How to send Request's `id_token` cookie in npm-fetch's Request

[mykhas]

I'm trying to implement facebook auth, based on passport.js. The very first problem I've get with it was with request to GraphQL's /me after logging in (my access token wasn't sent to GraphQL by default), but it was easy to do with credentials: 'same-origin' in whatwg-fetch. The issue is that the same doesn't work from server side (node-fetch doesn't support using of XMLHttpRequest cookies).

Can you recommend any way to pass id_token cookie through server-side app on backend request? Or, maybe they are some alternatives to fetch or proposed access policy?

[koistya]

I think that core/fetch HTTP client utility must be context-aware (regardless of what library you're using - fetch, superagent, jQuery.ajax), so instead of using a global fetch utility, you would rather need to either instantiate a new instance of it each time you need to render a React app (in src/server.js/get('*', ...) and src/client.js), or you can pass context as an argument, so that fetch('/api/data') becomes fetch(context, '/api/data'). This way you will be able to grab the id_token from cookies during server-side rendering and pass it as part of a context that is passed to the fetch utility. The fetch utility can then send this id_token via Authorize header for example. This same pattern might be used to pass cache object to the HTTP client utility, which would allow to avoid sending any Ajax request on the client during the initial rendering. What do you think?

P.S.: A PR with this feature is more than welcome!

[bjackson]

I'm a little confused by this. How would I go about say, adding credentials to the request in routes/home/index.js?

[cbravo]

@koistya, @mykhas I am encountering the same problem as was mentioned above. I have gotten around the problem by explicitly setting the cookie on the graphQL request ( gist: https://gist.github.com/cbravo/3f3c5d69b343dc6d9a9effa85073c1e4#file-profile-index-js-L32)

Is this similar as the method you describe above (passing context)? Would this work?

[mathieux51]

I also had trouble trouble getting id_token store in document.cookies and this is how I solved it. I created a form and on submit I call this method:

async handleFormSubmit(evt) {
    evt.preventDefault();
    const form = document.querySelector('#form');
    const formData = new FormData(form);
    const res = await this.props.fetch('/login/local', {
      method: 'POST',
      credentials: 'same-origin', // https://stackoverflow.com/questions/34734208/cookies-not-being-stored-with-fetch
      body: formData,
    });
  }