Isomorphic fetch with Remix run (or correctly work with cookie both sides)

[spacepolice10]

Hi there, I am learning Remix right now and still can't figure out some use scenarios & can't find any examples in discussions. E.G. I have a fetch that uses bearer token to get data from the backend part. Now I store it inside cookies. But if I use any of Remix utils to work with cookies, they are being split and cut in an unpredictable manner. That means that I cannot parse them correctly inside loaders and actions (client-side tools like Cookiejs don't work in SSR env). But I actually need to use cookie to haven an opportunity to make requests on SSR and on client-side without a necessity to refresh tokens and save them into application memory every single visit. So, did anyone already implemented universal fetch function that helps to deal with authorized requests both on the server and client?

Also would help: an ability to parse cookie without cutting it into pieces, an ability to access cookie session on the client side (it looks different for Remixes' parser & client-side parsers, e.g. Cookiejs)

[kiliman]

There's nothing special about Remix cookies. The cookie value is simply base64 encoded with a signature appended to it: base64value.signature

For example, here's a typical session cookie:
eyJfX3Nlc3Npb25faWRfXyI6IjY5M2M4OTBiLWUyNjQtNGQzNi05NjFjLWY4NGEyOGI5MjU4MSJ9.Pl78kgTwFINtGOWY41eEAJLL77ubzONI8IuFFJ7j1z8
decodes to

{"__session_id__":"693c890b-e264-4d36-961c-f84a28b92581"}[...signature...]

By default, Remix cookies are set to be httpOnly, which means they cannot be accessed by the browser. However, you can change this setting to false to access cookies via document.cookies.

https://github.com/remix-run/remix/blob/main/packages/remix-server-runtime/cookies.ts

You can use any cookie library you want. To send a cookie, just return a set-cookie header in the response. To read it in your loader, just parse the cookie header: request.headers.get('cookie')

NOTE: You can have multiple set-cookie headers, but there is only one cookie header in the request.

[spacepolice10]

Thank you