Pass cookies to server side fetch.

[guzmo]

Hey!

Trying your React starter project and I like it! :)

I have a question though.

The first thing I do when I start the app is to check whether the user is logged in ( Stormpaths access_token in cookie by calling /me), any ideas on how to use it on the server-side rendering?

For now I get unauthorised all the time, probably because the accept-token isn't used when the server calls /me.

[sekoyo]

Hi & thanks @guzmo, fetch behaves a little differently to say jQuery.ajax:

By default, fetch won't send any cookies to the server, resulting in unauthenticated requests if the site relies on maintaining a user session.

So to include cookies in the request you should follow this:

https://github.com/github/fetch#sending-cookies

For a request to the same domain:

fetch('/users', {
  credentials: 'same-origin'
})

Or credentials: 'include' for cross-domain requests.

[guzmo]

Thanks for the quick response :)

Ye, Im currently using 'same-origin' and it works for my requests to my backend.
I started to debug express-stormpath now and it seems the cookie actually gets there :O I'll try to find out where it fails.

[guzmo]

Doh, it actually isn't there. It will run the middleware on first call and there the access_token is. But when we then are calling /me from the server the access_token is gone...

I'm using routeProps.requestState(). the Request state returns the promise from /me.
I guess I need to forward the users access_token to my servers request to /me (which is calling itself).

[sekoyo]

Not sure exactly what you mean, did you figure it out? Is the issue that the server is not sending the cookie on some of the requests? I'm closing this but feel free to carry on the discussion, though I'm not sure if I can help but I'll try ;)

[guzmo]

Ye exactly. When using stormpath you get a route called /me to retrieve user information. It will return 401 unauthorised if the "user" isn't logged in.
The user is logged in and the access_token is sent to the server but when the server calls fetch('/me') it gets unauthorised because the server doesn't send cookies. I have no clue how to fix this :P
So right now, even if logged in, I have to relogin in my app since the client uses the servers fetch.

I can skip the server rendering and it will work but I'd like to keep it.

[keyeh]

I've got universal cookies to work using cookie-parser and react-cookie

Ex.
In server.js

at the top add var cookieParser = require('cookie-parser');

and after
server.use(express.static(path.resolve(__dirname, 'dist')));
add
server.use(cookieParser());

And then in action creator or component
import reactCookie from 'react-cookie';
and
const theCookie = reactCookie.load('name-of-cookie');