Can't find a way to properly redirect in 9.3

[jclem]

I'm attempting to build this flow with Next.js 9.3, and am unable to find a solution:

1. A user logs in, and a non-HTTP-only cookie is set
2. When the user clicks a logout link or visits /logout, the cookie is cleared, and the user is redirected

The login part works fine, as does clearing the cookie. My first implementation was adding this to my otherwise non-rendering LogoutPage:

export async function getServerSideProps(ctx) {
  ctx.res.setHeader('set-cookie', 'token=; max-age=0')
  ctx.res.writeHead(302, {Location: '/login'}).end()
}

This actually works fine, and the cookie is cleared and a redirect occurs, but every time it runs, there's an error in the console TypeError: Cannot convert undefined or null to object caused by this line which expects getServerSideProps function to return an object containing a props object.

Is there a better way to write this flow? My current workaround is just to use a custom server, which feels like overkill for such a minor thing, and it requires a real page refresh. Is that what I should be doing?

[jamesmosier]

What about just returning that empty props object after your redirect logic? Assuming this answer is still valid with getServerSideProps, looks like that might work #8919 (comment)

Or even not even setup the route altogether and perform the logic clientside on button click? Although maybe it is best practice to have a dedicated /logout route 🤷‍♂

[jclem]

Returning an empty props causes another error—the framework doesn't check to see if my response has been ended, and tries to render a response, anyway (so writing more headers causes Node.js to throw).

The button click would work for logouts initiated by a click, but I think it's important for the route /logout to work as well so that it's navigable as a URL.

[vassbence]

This works for me:

export const getServerSideProps = async ({ res }) => {
  res.writeHead(302, { Location: '/' }).end()
  return { props: {} }
}

Next opts out of rendering the page if you end the response, but you still need to return the correct value shape.

cc @ijjk

[jclem]

If you click a link to this page made with the next/link component, you'll get this error:

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
    at ServerResponse.setHeader (_http_outgoing.js:535:11)
    at sendPayload (/app/node_modules/next/dist/next-server/server/next-server.js:885:9)
    at DevServer.renderToHTMLWithComponents (/app/node_modules/next/dist/next-server/server/next-server.js:613:17)
    at async DevServer.renderToHTML (/app/node_modules/next/dist/next-server/server/next-server.js:749:28)
    at async DevServer.renderToHTML (/app/node_modules/next/dist/server/next-dev-server.js:15:539)
    at async DevServer.render (/app/node_modules/next/dist/next-server/server/next-server.js:506:22)
    at async Object.fn (/app/node_modules/next/dist/next-server/server/next-server.js:251:21)
    at async Router.execute (/app/node_modules/next/dist/next-server/server/router.js:117:32)
    at async DevServer.run (/app/node_modules/next/dist/next-server/server/next-server.js:479:29)
    at async DevServer.handleRequest (/app/node_modules/next/dist/next-server/server/next-server.js:132:20) {
  code: 'ERR_HTTP_HEADERS_SENT'
}

^ That's the error I was referring to in this comment (but should have put in the original issue, my apologies!) A workaround is obviously to use a normal anchor tag, but exactly why that would be necessary isn't obvious to me as a user.

[jclem]

If I have some time, I think I can open a PR to resolve this—most of it will center around checking response.finished (Node < 12.9.0) or response.writableEnded (Node >= 12.9.0) and acting accordingly.

[dorian-marchal]

Did you find a workaround for this? I stumbled upon the same issues (first, TypeError: Cannot convert undefined or null to object, then Cannot set headers after they are sent to the client).

[justincy]

There's a lot of discussion about this in another thread: #11281

[timneutkens]

Opened a RFC for redirecting here: #14890