This may be a newbiew question (I haven't used the fetch api before), but I can't figure out what wrong with my request.

fetch('https://securetoken.googleapis.com/v1/token?key=' + API_KEY, {
  method: 'POST',
  headers: {'Content-Type': 'application/x-www-form-urlencoded'},
  body: 'grant_type=refresh_token&refresh_token=' + refreshToken
})
.then(response => console.log(response))
.catch(error => console.error(error))

I'm trying to exchange a refresh token for an id token following the guidelines here, but for some reason I'm getting a Bad Request response...

Response { type: "cors", url: "https://securetoken.googleapis.com/v1/token?key=[API_KEY]", redirected: false, status: 400, ok: false, statusText: "Bad Request", headers: Headers, body: ReadableStream, bodyUsed: false }

My key is correct, and the refreshToken is also straight from a response from a service on Firebase SDK.

Where exactly is my mistake?

UPDATE

1. Showing the context where fetch is executed in a Next.js app:
2. I'm running this code in dev (localhost) using Firebase Emulators.
3. I managed to find additional error logs that state { code: 400, message: "INVALID_REFRESH_TOKEN", status: "INVALID_ARGUMENT" }.

So, this indeed seems to be an issue with the refresh_token. Can it be because it has been emitted by Firebase Emulators?

useEffect(() => {

  return firebase.auth().onIdTokenChanged(async user => {

    if (user) {

      fetch('https://securetoken.googleapis.com/v1/token?key=' + process.env.NEXT_PUBLIC_FIREBASE_API_KEY, {
        method: 'POST',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        body: 'grant_type=refresh_token&refresh_token=' + user.refreshToken
      })
      .then(response => console.log(response))
      .catch(error => console.error(error))
    }
  })
}, [])