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?

[travisbreaks]

createIsomorphicFn does not solve the double-hop on its own — it runs the same function in both environments, but when it runs on the server it still does not have the browser's cookies. The missing piece is forwarding the incoming request headers.

getWebRequest() from @tanstack/start/server gives you the original browser request inside a server function. Relay the cookies and XSRF-TOKEN from there:

ts
const request = getWebRequest()
const cookieHeader = request.headers.get('cookie') ?? ''
const xsrfToken = cookieHeader.split(';').find(c => c.trim().startsWith('XSRF-TOKEN='))?.split('=')[1] ?? ''

fetch('your-laravel-api.com/api/protected', {
headers: {
cookie: cookieHeader,
'X-XSRF-TOKEN': decodeURIComponent(xsrfToken),
origin: request.headers.get('origin') ?? '',
}
})

getWebRequest() is only valid inside a server function call. For Sanctum specifically: the XSRF-TOKEN is URL-encoded in the cookie, so decodeURIComponent is needed before sending it as the header.