Handling Stateful Auth in TanStack Start: Patterns for Header Forwarding

[mfalthaw]

The Issue: The "Double-Hop" When using TanStack Start with a stateful backend like Laravel Sanctum, authentication works perfectly on the client because the browser automatically attaches cookies and CSRF headers. However, when moving logic into a Server Function (e.g., for beforeLoad or createServerFn()), the request originates from the Start server, not the browser.

The backend API then sees a request from a "new" client and misses the context required for stateful auth:

1. Cookies are missing
2. XSRF-TOKEN headers are missing
3. Origin/Referer headers don't match allowed domains

The Current Workaround I am currently using an Axios interceptor that uses getRequestHeaders() from @tanstack/react-start/server to manually "proxy" these values from the incoming browser request to the outgoing API request:

api.interceptors.request.use(async (config) => {
  if (typeof window === "undefined") {
    const { getRequestHeaders } = await import("@tanstack/react-start/server");
    const headers = getRequestHeaders();
    
    config.headers["Cookie"] = headers.get("cookie");
    config.headers["Referer"] = headers.get("referer");
    config.headers["X-XSRF-TOKEN"] = parseXsrf(headers.get("cookie"));
    config.headers["Origin"] = headers.get("origin");
  }
  return config;
});

This feels way off. Having to manually parse cookies, xsrf token, set-cookie just doesn't seem right.

The Question Is there a more TanStack Start "native" way to handle identity propagation between the client and the server?

[SeanCassiere]

You might want to try giving createIsomorphicFn a shot.

https://tanstack.com/start/latest/docs/framework/react/guide/environment-functions#isomorphic-functions

[mfalthaw]

You might want to try giving createIsomorphicFn a shot.

https://tanstack.com/start/latest/docs/framework/react/guide/environment-functions#isomorphic-functions

Thanks for the response @SeanCassiere, I do use createIsomorphicFn to retrieve cookies, but the problem I'm trying to solve is authenticating both server and client sides without having to manually parse request/response headers. I'm not sure how createIsomorphicFn would fit here.

[mason-1998]

your main server is the backend server which is protected with auth/sanctum. so I believe you don't need to be worry about the frontend server authentication

[mfalthaw]

@mason-1998 Thanks for the response, maybe I didn't explain my question clearly.

Since BOTH the server and client need to make requests to the backend api and since BOTH need to be authenticated with the backend api, how can the auth and csrf cookies be shared between server and client in a tanstack start native way?