warn - You should not access 'res' after getServerSideProps resolves.

[hacknlove]

Description

next12 warns

warn - You should not access 'res' after getServerSideProps resolves.
Read more: https://nextjs.org/docs/messages/gssp-no-mutating-res

Reproduction

Using withPageAuthRequired or getSession is enough to get the warning

Environment

nextjs@12

[Widcket]

Hi @hacknlove, thanks for raising this.
I was able to reproduce on the sample app, when navigating to the SSR page:

cc @adamjmcgrath

[adamjmcgrath]

Thanks @Widcket @hacknlove - yep, looks like Next 12 doesn't play well with how we write cookies, will have to investigate

[adikari]

Same here. I am getting the exact same warning when using withPageAuthRequired

[RyanClementsHax]

Same issue. same reproduction (thanks for all the work y'all do, i'm very happy)

I also found another reproduction case. Calling auth0.getAccessToken(req, res) within getServerSideProps without withPageAuthRequired also causes the warnings to materialize.

import { getAccessToken } from '@auth0/nextjs-auth0'
import { GetServerSideProps } from 'next'

export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {
    const { accessToken } = await getAccessToken(req, res)
    return {
      props: {}
    }
}

[viperfx]

Getting similar warning with nextjs 12 as well. But login so far seems to functionally work.

[adikari]

Any updates on this?

[adamjmcgrath]

Hi @adikari - thanks for checking. No update, we'll update this thread when we do

[davecarlson]

I take it a solution for this would be to move to using the next middleware instead ?

[robotastronaut]

So, I ran into this myself and decided to look into it, because it struck me as a notable change in the bump to v12. First of all, this error is only thrown in a non-production environment:

if (process.env.NODE_ENV !== 'production') {
  resOrProxy = new Proxy<ServerResponse>(res, {
    get: function (obj, prop, receiver) {
      if (!canAccessRes) {
        const message =
          `You should not access 'res' after getServerSideProps resolves.` +
          `\nRead more: https://nextjs.org/docs/messages/gssp-no-mutating-res`

        if (deferredContent) {
          throw new Error(message)
        } else {
          warn(message)
        }
      }
      return Reflect.get(obj, prop, receiver)
    },
  })
}

You'll note here that what it's doing is creating a Proxy of the original res object in a non-prod environment specifically to monitor this scenario -- everywhere else in this function, the response is referenced by resOrProxy. All that happens in the scenario in this issue is a warning being displayed. An error will be thrown if deferredContent is truthy, which happens when data.props is a Promise:

if ((data as any).props instanceof Promise) {
  deferredContent = true
}

If that's considered the scenario worth throwing an exception for, then I think we can keep using this as-is. The library that is used to manipulate headers on the response is on-headers, which adds listeners to the underlying response object to respond to headers finally being emitted (and thus available for manipulation). (EDIT: It doesn't actually add 'listeners' in the intuitive sense -- it actually replaces the underlying writeHead method of res to maintain a stack of callbacks that can operate on the header before the final writeHead call) and handle them in order This event fires after Next has wrapped up doing what it needs to do and res.writeHead is called either explicitly by Next (I think it does this on redirects and a few other places), or implicitly by the underlying http_server on res.write or res.end. Stack trace in case it makes the flow clearer and because more information is better, in general:

Object.get
  <redacted>node_modules/next/dist/server/render.js (473:35)
Object.set
  <redacted>node_modules/@auth0/nextjs-auth0/dist/auth0-session/utils/cookies.js (18:31)
CookieStore.save
  <redacted>node_modules/@auth0/nextjs-auth0/dist/auth0-session/cookie-store.js (182:23)
ServerResponse.<anonymous>
  <redacted>node_modules/@auth0/nextjs-auth0/dist/session/cache.js (17:78)
ServerResponse.writeHead
  <redacted>node_modules/on-headers/index.js (35:16)
ServerResponse._implicitHeader
  node:_http_server (266:8)
ServerResponse.end
  <redacted>node_modules/next/dist/compiled/compression/index.js (1:141485)
Object.sendRenderResult
  <redacted>node_modules/next/dist/server/send-payload.js (56:13)
processTicksAndRejections
  node:internal/process/task_queues (96:5)

Setting the auth cookie is one of the last things happening to the response on the way out the door, and I can't see any scenarios in which it would actually cause a conflict with anything Next is doing. This safeguard appears to be in place to protect the response from being manipulated in conflicting ways if getServerSideProps somehow manages to return an object where props is a promise, but it's being awaited at every point. I feel like you'd need to be deliberately breaking something or being impressively careless to trigger that exception.

I suppose the cookie could be set at some point in the auth required factories directly rather than using on-header but that would eliminate most of the convenience of this library and risk headers being overwritten downstream.

I tried really hard to get this to break in some meaningful way, but I couldn't. For my use case, anyways, this is very much a "nothing to see here, move along" scenario until Next turns that warn into an exception. Certainly is noisy, though.

Would love to hear of any scenario in which this actually causes problems.

[ioandev]

To temporarily fix this, go in your next.config.js and add this before the module.exports line:

let consolewarn = console.warn
console.warn = (...args) => {
    if (args.length > 1 && args[1].startsWith("You should not access 'res' after getServerSideProps")) {
        // ignore message until this is fixed: https://github.com/auth0/nextjs-auth0/issues/524
    } else {
        consolewarn(...args)
    }
}

[sohamsshah]

To temporarily fix this, go in your next.config.js and add this before the module.exports line:

let consolewarn = console.warn
console.warn = (...args) => {
    if (args.length > 1 && args[1].startsWith("You should not access 'res' after getServerSideProps")) {
        // ignore message until this is fixed: https://github.com/auth0/nextjs-auth0/issues/524
    } else {
        consolewarn(...args)
    }
}

Elite chad

[eatrocks]

@JevAr00, I tried your possible solution of calling withPageAuthRequired() within getServerSideProps, but the page is not protected; authentication is not required.

[JevAr00]

@JevAr00, I tried your possible solution of calling withPageAuthRequired() within getServerSideProps, but the page is not protected; authentication is not required.

Yeap, I was trying to solve that, if I found a solution I'm going to post it.