Sending cookies with fetch in Next.js 13

Context

I have a backend API built on Flask that uses Flask-login for the authentication. Flask-login gives you a session cookie to authenticate you. So when I need something from my backend, my request needs to send the session cookie Flask gave me.

I wanted to do a fetch from a Server component, in the new /app folder, using Next.js version 13.4 here. However, using credentials=true in my fetch params does not work. So I had to find another solution.

Solution

I found the solution on stackoverflow here, thanks to "Igor Danchenko". As mention in this blog description, I am against the multiple copy/pasted tutorial that always explain the same thing. But here, I had a really hard time finding this solution so I do a post about it.

Here is the code from Igor:

import { cookies } from 'next/headers'

async function getData() {
  const response = await fetch(process.env.API_ENDPOINT, {
    headers: {
      Cookie: cookies()
        .getAll()
        .map(({ name, value }) => `${name}=${value}`)
        .join('; '),
    },
  })
  return await response.json()
}

You need to use the cookies function from next. But what I did not know, is that you can pass a cookie in the fetch option using: {headers:{Cookie: yourcookie}}. Indeed, in the doc about Headers on Mozilla, Cookie is a forbidden header name. And: "A forbidden header name is the name of any HTTP header that cannot be modified programmatically"...

But apparently, you can still do it. If you have more information on the topic, I would be happy to read about it.