how to access cookies without express ?

[codjix]

Hi,
i realy love vike and vite and use them in all my react projects, but i am facing a problem about how to access cookies in server side without using external servers like express.

in my case i need cookies in the server side to render my app with a color scheme cookie stored in the browser and some dynamic react components even for auth, since i use telefunc instead of API i have to install express and some deps just for accessing cookies, so i am looking for another method.

here is how i access cookies with express by adding them in the init context and then passing them with passToClient in some cases :

// server.js
//...
app.get("*", async (req, res, next) => {
  const { originalUrl: urlOriginal, headers } = req;
  const { httpResponse } = await renderPage({ urlOriginal, cookie: headers.cookie });
  if (httpResponse) {
    const { headers: hs, earlyHints, pipe } = httpResponse;
    if (res.writeEarlyHints) res.writeEarlyHints({ link: earlyHints.map((e) => e.earlyHintLink) });
    hs.forEach(([name, value]) => res.setHeader(name, value));
    pipe(res);
  } else {
    return next();
  }
});
//...

and here is how i use it :

// src/components/Layout.jsx
//...
const Layout = ({ children }) => {
  const { cookie } = usePageContext();
  const Coo = new Cookies(cookie, { path: "/" }); // universal-cookie
  
  return (
    <MantineProvider theme={theme} defaultColorScheme={Coo.get("color-scheme") ?? "auto"}>
      ...
    </MantineProvider>
  );
};
//...

i hope you provide request's headers or cookies in vike-react's usePageContext or vike itself to use them directly in pages or components without the need of express.

THANKS !

[brillout]

You'll always need some kind of server, since cookies are dynamic (whereas pre-rendered apps are static). So I ain't sure what you want is possible. On the client-side, you can directly access cookies.

[codjix]

i just wanted to access the headers of the vite server or the headers that vike/server's renderPage returns them trough httpResponse but from pageContext by default, this will help accessing headers from all pages and components.

On the client-side, you can directly access cookies.

yes it is possible but we need cookies in the server side for the first render to keep authed data untill we validate the session and then render them.

[phonzammi]

Hi @Hima-Pro,
Have you take a look on examples/auth. Look how it check (with middleware) for an authenticated user in the cookie, and create a cookie then pass to httpResponse when login.

[codjix]

Hi @phonzammi thanks for the reply
Yes, i had but it also uses express to apply auth.

i just wanted to suggest adding headers to the pageContext in the next updates as it will make headers and cookies accessible in the server-side to use them for rendering the right content to the first request.

[phonzammi]

@Hima-Pro
Just my opinion, vike is flexible, if you need cookie for server side that's mean you must be using one of node js frameworks, right?

[codjix]

@phonzammi
so i will keep with express
thanks 👍