Access response cookies?

[Lucasmiguelmac]

My backend automatically attaches sessionid and csrf tokens as set-cookie headers in my response. Example

How should I go about accessing those cookies so I can store them in the browser's cookie jar. I think there must be a way to use an exchange to, whenever I receive a set-cookie header, set those cookies.

Btw: using Svelte in the frontend.

[andyrichardson]

Hey Lucas 👋

I think there must be a way to use an exchange to, whenever I receive a set-cookie header, set those cookies.

With any other kind of header, this is totally the route to take! Unfortunately, for security reasons, it looks like we wouldn't be able to access cookie information from a response.

Am I right in thinking your issue is that cookies aren't being passed in future requests?

If the request is on the same origin, you should see cookies being included in any request by default. For cross origin requests, you might need to tell the browser to include cross-origin cookies.

const urql = createClient({
  url: "https://some-cross-origin.domain"
  fetchOptions: {
    credentials: 'include'
  }
});

[Lucasmiguelmac]

Am I right in thinking your issue is that cookies aren't being passed in future requests?

Yes, cookies aren't passed in future requests nor stored in my browser when I receive them in a Set-Cookie header. As explained in the article you just shared.

Which is odd because, on my Graphiql playground, this get's done automatically. As I could see in the source code, it seems to do so with the js-cookie library, but again, I would need to access such cookies before using that library:

If I understood you correctly, by adding:

fetchOptions: {
    credentials: 'include'
  }

to my createClient as you propose. CORS related errors will stop kicking in. However, I didn't get any CORS related issues until I added them:

Is there something I'm missing here? Will I need to switch my backend auth method or is there a way I can set this cookies with URQL?

[andyrichardson]

is there a way I can set this cookies with URQL?

The challenge with cookies is that there isn't a whole lot of control in JS land to work with them. Especially when httpOnly is being used, the only option I'm aware of is the credentials option.

If it is a cross origin request you're making, that would explain why cookies in the GraphQL playground work but not in a different webpage. To get around the cross-origin issue, you'll need to add some CORS headers - the first answer here has a good explanation of what needs to be set.

[DoisKoh]

Probably useless to add comments like this but... thanks. This was helpful, I wasted a lot of time debugging this; I was puzzled as to why my Urql subscriptions were working (the cookies were being sent for the WS subscription) but queries and mutations were not. I had to set credentials to 'include' for cross-site cookies to be sent, never knew that.

I still don't know why it works for subscriptions (graphql-transport-ws)... I now see that the cookies are sent in my request headers for queries, but the web socket protocol handshake doesn't show the cookies in the request headers, and I don't see them in the messages anywhere when I inspect them... oh well.

[angelov-a]

Hello,

I'm having a similar issue but on the back-end during SSR.

I am awaiting a request that receives a token cookie. The cookie then needs to be attached to the subsequent requests. This is not a problem in the browser since it attaches the cookies automatically, but no such thing happens in Node.

Any chance to expose response cookies to exchanges on the server side?

[abrunner94]

Also curious about this