T
TanStack6mo ago
eastern-cyan

Stateless fully-authed SSR

Hi there, I maintain a tanstack router app that is fully authed, which uses an external OIDC provider to handle session state, as the provider returns an OIDC token, which I use to make to make requests to a separate backend. I'm trying to explore whether this is possible in an SSR environment, as I want initial loads to avoid waterfalls. The thing I keep getting hung up on is how to handle making requests to my actual backend. On initial load, it can use the token to hydrate the page, and If I'm storing my OIDC token in SessionStorage, I can directly make API requests to the backend on the client-side. However, if stored as a HTTP Only cookie, I can't access that client-side, but I can intercept any request via a generic ServerFn and use the cookies to add an authorization token to then hit my backend, but that would add an extra hop. Anyone have any recommendations for how to do this pattern?
5 Replies
genetic-orange
genetic-orange6mo ago
Am I understanding correctly. You want access to your Auth token on the SSR pass of your frontend code right?
modern-teal
modern-teal6mo ago
I sort of do this with discord oauth https://github.com/team3132/attendancesystem
GitHub
GitHub - Team3132/AttendanceSystem
Contribute to Team3132/AttendanceSystem development by creating an account on GitHub.
modern-teal
modern-teal6mo ago
It uses discord http only cookies
eastern-cyan
eastern-cyanOP6mo ago
Yes, I'm trying to figure out whether I proxy all api calls through the "B" part of the BFF to use the cookies or just make API calls directly with the token stored in sessionStorage
genetic-orange
genetic-orange6mo ago
ive had this dilema many times the problem is like how paranoid or security oriented you are like token for client side in sessionStorage will be fine most times but if you want SSR its gotta be cookies if your backend and your SSR server were one thing it would be piss easy but I'm not sure if theres a better way if they are separate has to be a server side fetch to the backend from your SSR server unfortunately if you use react query you can probably get away with caching it on the SSR pass and hydrating it on the client so you save some performance there

Did you find this page helpful?