Session ID Changes on Every Request: Next.js with Express.js Backend

[iamsabbirsobhani]

I'm experiencing an issue with session IDs changing on every request in a Next.js server component (middleware.ts). I'm using Next.js v14 for the frontend and Express.js for the backend. The session IDs are obtained from an Express.js backend using the express-session middleware. Here's an overview of my setup:

• Next.js v14 frontend with a server component (middleware.ts).
• Express.js backend with express-session for session management.

In my middleware.ts, I'm fetching the login status from the Express.js backend, but I'm getting different session IDs on each request. From the client component, the session works perfectly. I suspect that the origin may be changing from the server component on every request.

// middleware.ts
export default async function middleware(request: Request) {
  // Fetch login status
  const loginStatus = await fetch('http://localhost:8080/auth/loginstatus', {
    credentials: 'include',
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
    },
  });

  // Parse and log login status
  const loginStatusJson = await loginStatus.json();
  console.log(loginStatusJson);

  // Redirect if not logged in
  if (loginStatusJson && !loginStatusJson.status) {
    return NextResponse.redirect('http://localhost:3000/login');
  }
}

Middleware OP: middleware.ts responses were like following

{
  message: 'You are not logged in!',
  status: false,
  session: 'DS3aPROFxqVDo5_sHGB6Nos7ei6FY5cp'
}

{
  message: 'You are not logged in!',
  status: false,
  session: 'kJTFATQHHcbukbsaPGo-WmfExl_rjCnj'
}

{
  message: 'You are not logged in!',
  status: false,
  session: 'MXOhNFSkCPDYrZnBJBmAgjfV3Vgpkc4Y'
}

...

Express.js session:

app.use(
  session({
    secret: '1234567890QWERTY',
    resave: false,
    store: new MemoryStore(),
    saveUninitialized: true,
    cookie: {
      secure: false,
    },
  }),
);

From the front-end(client component) session is working perfectly. But, when I tried with server component whether it is middleware.ts or next.js /api on every request I am getting different sessionID I think the origin get changed from server component on every request!

I want to know why the session ID is changing on every request when using a server component.

[icyJoseph]

Hi,

Let's be careful with names here, middleware runs on an special environment called, edge runtime.

It is not a React Server Component, though I guess technically, since it is part of a Next.js application, and it doesn't run in the client, one might call it a Server Component, but that's really stretching concepts. Middleware is used for other purposes, and it uses different technologies.

That being said, what is happening is that you are making an assumption when you fly the fetch request within the middleware, and that is you are assuming that the middleware will forward its headers to the caller. This applies even for Node.js fetch requests, you are essentially, starting a new request from a new environment, ask yourself: what origin header should be used for a fetch request started from within a Node.js script?

You'll need to forward the headers you care about, taking them from the request and passing them to fetch.

[themastersacademy]

I'm also having the same problem could you find the solution