request.state is empty when server rendering

[Dindaleon]

I have been trying to figure this one out for the last couple of days, but I just gave up. For some reason, when I server render my web page, request.state is emtpy; however, when I call the same code on the client side, the request.state shows the cookie.

This is the code I am using for calling the route:

fetch('http://localhost:3000/api/v1/getcookie', {
  credentials: 'same-origin',
  method: 'GET'
})
.then( response => {
  return response.json();
})
.then( json => {
  console.log('COOKIE DATA? ', json.data)
})

And this is my route:

{
  method: 'GET',
  path: '/getcookie',
  config: {
    auth: false
},
  handler: ( request, reply ) => {
    console.log('GET COOKIE ROUTE: ', request.state); // <-- this is empty when server rendering

    reply({
      statusCode: 200,
      message: 'get cookie',
      data: {
        text: request.state
      }
    })
    .code(200);
}

That same code works when called from the client side.

What am I missing?

[hueniverse]

Where do you set the cookie?

[Dindaleon]

I set a cookie like this:

The route:

{
  method: 'POST',
  path: '/setcookie',
  config: {
    auth: false
  },
  handler: ( request, reply ) => {
    reply({
      statusCode: 200,
      message: 'set cookie',
      data: 'set cookie data'
    }).state('USER_SESSION', {
      'cookieData': 'some cookies'
    });
  }
}

On the client side:

fetch('http://localhost:3000/api/v1/setcookie', {
  credentials: 'same-origin',
  method: 'POST'
})
.then( response => {
  return response.json();
})
.then( json => {
  console.log('COOKIE SET? ', json.data)
})

These are the current settings:

server.state('USER_SESSION', {
  ttl: null,
  isSecure: false,
  isHttpOnly: false,
  encoding: 'base64json',
  clearInvalid: false, // remove invalid cookies
  strictHeader: true // don't allow violations of RFC 6265
});

The cookie is being set without a problem, and I am able to retrieve it whenever I want as long as it is on the client side. The issue is when I am server rending my web page.

[hueniverse]

You do know that when you send the request from a non-browser client you need to manually add a Cookie header, right?

[Dindaleon]

I remember reading about that somewhere; however, I do not know how to retrieve the cookie data and add it to a Cookie header.

EDIT:
here is where I read it: node-fetch/node-fetch#49 (comment)

fetch('/', {
  credentials: 'include',
  headers: {'Cookie': 'foo=bar;bar=foo'}
})

How do I retrieve the cookie information that is stored in the client and put it inside the header?

I am passing the request object from my server file down to my fetch code. For example, I could do the following:

server.ext( 'onPreResponse', ( request, reply ) => {
...
  fetch('/', {
    credentials: 'include',
    headers: {'Cookie': request.state['USER_SESSION']} // Still empty
  })
...
});

However, request.state is still empty.

Shouldn't the request object on the onPreResponse hook contain the state with the cookie data?
As I understand, request.state should be available after the onRequest hook.

[hueniverse]

The request.state object is empty because you are not sending any cookies with the request. When the server replies with a cookie, it sends back a Set-Cookie header. You need to grab that in your test code, parse it, then use it to generate a Cookie header, and send that header with your request. If this is not enough to help you fix the issue, I suggest to ask for help in the hapijs/discuss repo.

[walshe]

if I manually set the cookie header in a rest call request;

headers: {'Cookie': 'foo=bar'}

then on the server side shouldn't request.state('foo') find 'bar' ? finding that its empty :(