SolidJS•2mo ago

Fetch on SSR is missing Cookie on request header

I am trying to do SSR with authorization session stored in HttpOnly cookie, as instructed by the best practices laid out on Lucia Auth documentations. It seems that on the current SSR rendering phase, the cookie header is not passed properly to GET API routes. I have filed associated GitHub issue here: https://github.com/solidjs/solid-start/issues/1675 It is highly appreciated if anyone here can help with this! I have spend a couple of hours figuring things out but could not locate the root cause of the issue (by reading H3, vinxi, and Solid Start codebases on GitHub). Thank you in advanced!

GitHub

[Bug?]: Fetch on SSR is missing Cookie on request header · Issue #1...

Duplicates I have searched the existing issues Latest version I have tested the latest version Current behavior 😯 It seems that on the current SSR rendering phase, the cookie header is not passed p...

4 Replies

Brendonovich•2mo ago

When calling fetch on the server you'll need to manually pass through the request headers With server functions this isn't a problem since there's no extra fetch on the server

risk1996OP•2mo ago

Since I am passing an HTTP-only cookie (present on the entry-server.tsx context object) but not on the GET handler in routes/api/test.ts, how do I pass the cookie to the GET handler via the fetch method? I would appreciate it if you can give code snippets if possible? If you mean something like the parameter { credentials: "include" } on the fetch parameter, I have also tried that too and did not work as well in passing the cookie on the SSR rendering. I will clarify that on the GH Issues, too.

Brendonovich•2mo ago

Use getRequestEvent before the fetch to retrive the request headers, and then pass them into the fetch

const [res, { refetch }] = createResource(() => {
  const event = getRequestEvent();
  return fetch("http://localhost:3000/api/test", {
    headers: event?.request.headers,
  }).then((res) => res.json());
});

const [res, { refetch }] = createResource(() => {
  const event = getRequestEvent();
  return fetch("http://localhost:3000/api/test", {
    headers: event?.request.headers,
  }).then((res) => res.json());
});

risk1996OP•2mo ago

Got it! Thank you so much! It seems that I will need the getRequestEvent from solid-js/web. I will close the GH Issue with the resolution. Thank you so much for your time in helping me!

Gaming

Programming

Fetch on SSR is missing Cookie on request header