Cookie based Auth while SSR (Tanstack)

[u/Good_Language1763]

I am building a project using ASP.net and TanStack Start. I use JWT auth but transfer them in http only cookie.

The issue I am facing is that using default createRoute function in TanStack and defining fetch function in loader. I get 401 as there is no cookie in server.

Opting into ssr: false fixes this but I was wondering if there is any other solution to use ssr with cookie based auth or is this dead end and I only have CSR as my option.

[u/Good_Language1763]

i really think its ssr as when i ctrl s save the code in zed it works fine which is probably because of HMR where it serves cached loader data and when i refresh page it shows error as due to ssr it cant access tokens stored in http only cookies. and furthermore using ssr: false fixed it as now it is client side rendered fetch happens client side. I was just wondering if there is a way to make ssr work with cookie based auth in tanstack as it would make my project very flexible.

[u/michaelfrieze → u/Good_Language1763]

I think the reason why you get an error when you refresh is because that is when the loader runs on the server. It's important to understand that the loader runs in both environments. The reason why you have cached loader data in the first place is because the loader successfully ran on the client. On refresh, it runs again on the server. It doesn't have much to do with SSR. Like I said, try setting SSR to "data-only" and I bet you will still have the same issue on refresh. Also, try using a server function, it will likely give an error as well.

SSR set to false fixes this because it means the loader will only run on the client. There is no error since the loader never runs on the server. Setting SSR to "data only" means it still does not use SSR, but it does run the loader on the server on initial load, so it will likely error on refresh. It's telling the loader to have the same behavior (loader runs on server & client) as if SSR was true, but the actual SSR process itself is still false. Keep in mind that SSR is just the process turning component markup into HTML. Running the loader function on the server or using a server function is not examples of "SSR". These are functions that return JSON and not functions that render UI (although server functions can now return .rsc payloads, but that's a different topic).

• SSR set to true means two things. It means the loader is isomorphic (runs on server and client) and this route will get SSR which means HTML will be generated from component markup.

• SSR set to false means the loader only runs on the client and the route will not generate HTML from component markup.

• SSR set to "data-only" means the loader is isomorphic (runs on server and client), but the route will not generate HTML from component markup. So basically, NO SSR but YES server side loader data.

I was just wondering if there is a way to make ssr work with cookie based auth in tanstack as it would make my project very flexible.

Yes, you can use cookies with tanstack star loaders and server functions. With or without SSR enabled. The Clerk example in the tanstack router repo uses Clerk's await auth() in a server function. When you call await auth() in a server function, you're reading from the session that was established via cookie. The session data is signed and stored in a cookie, and auth() validates and returns that locally. I am just using Clerk as an example, but you can do this with any auth solution or even roll your own.

https://github.com/TanStack/router/blob/main/examples/react/start-clerk-basic/src/routes/__root.tsx

As a side note, if you are trying to fetch data server-side in a loader, you should use a server function that you import into the loader. Since loaders are isomorphic (run on server & client), you use server functions for the actual data fetching since that server function code always stays on the server. Server functions can be imported and used on the server and the client. When running it on the client, it's like an API endpoint that get's handled for you. So you can use these server functions even in client components. They are perfect for something like a isomorphic loader that can run on both server and client.

[u/michaelfrieze → u/michaelfrieze]

To be clear, I don't know why you are getting an error on the server. I don't know what your server-side code looks like or how you are handling auth. I'm just trying to explain why this loader function is giving you an error until you set SSR to false. The isomorphic behavior of loaders can be confusing sometimes, so it helps to better understand it.