response.headers returning different structure depending on JavaScript bundler

Question

I was experimenting with different bundlers in a Next.js 13 project where I am authenticating for a third party API. I was tinkering with the new Turbopack bundler and got my login working, but when I switched over to Webpack, my response.headers is structured completely differently which is causing issues with using the login cookie I get back successfully from the API.

With Turbopack, when I console.log response.headers , I get something like this:

Headers {
  [Symbol(map)]: [Object: null prototype] {
    'content-type': [ 'application/json; charset=utf-8' ],
    'content-length': [ '1048' ],
    ...
    'set-cookie': [..., ..., ...] // Array with a few strings
  }

But for some reason, switching back over to Webpack, the headers are structured differently

  [Symbol(headers map)]: Map(31) {
    'content-type' => { name: 'Content-Type', value: 'application/json; charset=utf-8' },
    'content-length' => { name: 'Content-Length', value: '1048' },
    ...
    'set-cookie' => {
      name: 'Set-Cookie',
      value: '...', // One big string
    },
  }

Using Turbopack, I was mapping through response.headers.raw()['set-cookie'] to build my login cookie to use in my getAuth function

async function getAuth() {
  const authUrl = '...'
  const email = '...'
  const password = '...'
  const encryptedLogin = CryptoJS.enc.Base64.stringify(CryptoJS.SHA256(password + email))

  const authReply: any = await fetch(authUrl, {
    method: 'POST',
    body: JSON.stringify({
      email: email,
      password: encryptedLogin,
    }),
    credentials: 'include',
    headers: { Accept: '*/*', 'Content-type': 'application/json' },
  })
  const statusCode = authReply.status
  if (statusCode === 200) {
    console.log("Authentication successful")
  } else {
    console.log("Authentication failed")
  }
  let loginCookies = parseCookies(authReply)
  return loginCookies
}

function parseCookies(response: any) {
  return response.headers.raw()['set-cookie']
    .map((entry: any) => {
      const parts = entry.split(';')
      const cookiePart = parts[0]    
      return cookiePart
    })
    .join(';')
}

The above functions work perfectly using Turbopack, but give the error response.headers.raw is not a function when using Webpack. The actual authentication is still successful, but I can't figure out how to access the cookie it creates with the different structure that I get using Webpack.

I've never dealt with something like this, and I'm really wanting to use Webpack as Turbopack is still in alpha and not compatible with SCSS yet. I've tried to access the values I need using response.headers.get('set-cookie') , but haven't been successful.

Any help or suggestions are very much appreciated, If I can't figure out a solution. I'll probably just bite the bullet and switch back to CSS and use Turbopack since it was working just fine that way.

Answer 1

Got it working with response.headers.get('set-cookie')

function parseCookies(response: any) {
  return response.headers.get('set-cookie')
    .split(' ')
    .map((entry: any) => {
      const parts = entry.split(';')
      const cookiePart = parts[0]    
      return cookiePart
    })
    .join(';')
}

Nice job, me.