Where to store cookie when using SSR & client hydration
Unanswered
Pharaoh Hound posted this in #help-forum
Pharaoh HoundOP
So we are running Next.js with an restful PHP api. The authentication is stored in an http-only cookie on the client. The app is using Tanstack react-query with 100% Suspense.
But to make the initial development of the app go faster we could not bother with SSR, so we opted-in for "use client" in all of our page.tsx entries - now we want to benefit of react-query's hydration and server side fetching our api.
The question that we are having - where is the auth token stored? We can let the next.js SSR interact with the api, but the cookie would only be stored for the node.js but not for the client. And we can not forward this cookie to the client because its an http-only cookie, so the client will never be able to take over the fetching of the api.
I am sure other people had these issues before, how are you handling stuff like this? Do you maybe even have sandbox repos or code examples?
Thanks for your input 🙏
But to make the initial development of the app go faster we could not bother with SSR, so we opted-in for "use client" in all of our page.tsx entries - now we want to benefit of react-query's hydration and server side fetching our api.
The question that we are having - where is the auth token stored? We can let the next.js SSR interact with the api, but the cookie would only be stored for the node.js but not for the client. And we can not forward this cookie to the client because its an http-only cookie, so the client will never be able to take over the fetching of the api.
I am sure other people had these issues before, how are you handling stuff like this? Do you maybe even have sandbox repos or code examples?
Thanks for your input 🙏
4 Replies
American Crow
And we can not forward this cookie to the client because its an http-only cookieTo my knowledge HTTPS cookies are not different from regular cookies when it comes to setting them. It's still the browser who sets them when it recieves the header to do so. You can only transmit them via HTTPS and can't read them via Javascript, but the Browser sets it once the header is received.
@American Crow `And we can not forward this cookie to the client because its an http-only cookie`
To my knowledge HTTPS cookies are not different from regular cookies when it comes to setting them. It's still the browser who sets them when it recieves the header to do so. You can only transmit them via HTTPS and can't read them via Javascript, but the Browser sets it once the header is received.
Pharaoh HoundOP
My assumption was, that because it is an http-only cookie i will not be able to access the cookie via node.js aswell. because its just a simple http client on the server side aswell.
Because i would have thought the server makes the first /login and gets the cookie, this cookie gets then passed to the client where it can interact with the same authorization as the server has stored.
Or would the server and the client make its own /login calls with the same credentials and store their own tokens?
Because i would have thought the server makes the first /login and gets the cookie, this cookie gets then passed to the client where it can interact with the same authorization as the server has stored.
Or would the server and the client make its own /login calls with the same credentials and store their own tokens?
@Pharaoh Hound My assumption was, that because it is an http-only cookie i will not be able to access the cookie via node.js aswell. because its just a simple http client on the server side aswell.
Because i would have thought the server makes the first /login and gets the cookie, this cookie gets then passed to the client where it can interact with the same authorization as the server has stored.
Or would the server and the client make its own /login calls with the same credentials and store their own tokens?
American Crow
Maybe I misunderstood. I was thinking/proposing your setup would be something like this:
@American Crow Maybe I misunderstood. I was thinking/proposing your setup would be something like this:
Pharaoh HoundOP
yeah i was thinking exactly this approach. so i will try if the http-only cookie is forwardable 🙏