[Bug]: Cookies are missing in request for loaders and actions in CSR

[rmedaer]

What version of React Router are you using?

6.15.0

Steps to Reproduce

Create a Route with a loader (in CSR) and get Cookie header from the request.

function loader({ request }) {
  const cookie = request.headers.get('cookie');
  console.log(cookie);

  // (...) business logic using cookies
}

const router = createBrowserRouter({
    path: '/',
    element: <HelloWorld/>,
    loader: loader,
});

// (...)

Expected Behavior

I expect cookies to be available through the Cookie header (as they are might be in SSR) so I can use the same piece of code for both CSR and SSR.

Actual Behavior

The cookies are not available in the Cookie header.

Analyzing the createClientSideRequest function in react-router/packages/router/router.ts, it looks like the cookies (from document.cookie) are not included in the Request created:

function createClientSideRequest(
  history: History,
  location: string | Location,
  signal: AbortSignal,
  submission?: Submission
): Request {
  let url = history.createURL(stripHashFromPath(location)).toString();
  let init: RequestInit = { signal };

  // (...) 

  return new Request(url, init);
}

Notes

It might be a feature request but since it's available in SSR, I expect the same behavior in CSR.

[brophdawg11]

I'm going to move this to a feature request discussion.

IMO, Cookies are inherently different in CSR and SSR due to cookie paths, origins, http only, etc., so I think it's probably better/safer to read from the Request in SSR and document.cookie in CSR. It feels like it would be error-prone to try to fill in the request cookies from document.cookie and share the same code, but we can open this as a proposal and see what other's think.

[VISHALl1166]

i can receive header cookies in req.headers. please tell me how can i send these cookies with loader function fetch request