Sharing cookies/data from middleware to server-side props

[controversial]

It seems like cookies modified in middleware aren’t visible to getServerSideProps (from my testing, this goes for cookies written to the NextResponse as well as cookies written to the NextRequest).

My specific use case: I’m trying to use middleware for refreshing auth tokens. I have a middleware that checks an accessToken stored in a cookie for expiration, and—if it’s nearing expiration—refreshes it and writes a new one as a cookie. However, data fetching that happens in getServerSideProps can’t see the updated tokens from the middleware.

Here’s a simplified test example that shows the problem:

middleware.js:

import { NextResponse } from 'next/server';

export function middleware(req) {
  const res = NextResponse.next();
  // 'test' cookie that lasts 10 seconds
  const cookieSettings = { expires: new Date(Date.now() + 10 * 1000) };
  req.cookies.set('test', 'value', cookieSettings);
  res.cookies.set('test', 'value', cookieSettings);

  return res;
}

pages/index.jsx:

export default function Home() { return null; }
export function getServerSideProps({ req }) {
  console.log('Cookie from accessToken:', req.cookies.test);
  return { props: {} };
}

On the first request (where the middleware sets the cookie), getServerSideProps will log “Cookie from accessToken: undefined.” Subsequent requests before the cookie expires will log “Cookie from accessToken: value.” This shows that neither values written to the NextResponse object’s cookies nor values written to the NextRequest object’s cookies modify getServerSideProps’s view of the request.

I would expect that modifying the NextRequest in middleware might change the request passed to getServerSideProps.

Is there another way to set cookies in middleware that makes the values visible to getServerSideProps? If not, how else can I pass data from middleware to getServerSideProps?

[icyJoseph]

Hi,

The request is immutable, so it arrives to the Node.js server without changes, that's why your cookie is missing.

What you can do is a bit of a magic trick... because you can read the response in getServerSideProps, and from there getHeader, called set-cookie.

export function getServerSideProps({ req, res }) {
  console.log('Cookie from accessToken:', context.res.getHeader('set-cookie'));
  return { props: {} };
}

And from there you just have to parse that cookie, and possibly remove it or let it through.

[colinclerk]

@icyJoseph do you know of any magic tricks for experimental-edge API routes where res doesn't come through as an argument? https://nextjs.org/docs/api-routes/edge-api-routes

Or, @controversial have you found a way to make your refresh work with experimental-edge routes? We're working on the same auth challenges.

[controversial]

That’s a great question that I don’t know the answer to! You should post another discussion about it

[sanderpick]

You can do a similar trick with next/headers in a server-side component in App Router (beta):

import { headers } from "next/headers"
...
console.log('Cookie from accessToken:', headers().get("set-cookie"))

Might be useful to others!

[sanbornhilland]

I've run into this same problem and the other solution appears to be listed here: #31188. I wanted to raise this because I suspect many people have come across the same issue.