I'm using the fetch API to set a cookie in my browser. this is my request object

fetch('/auth',{
      method:'POST',
      headers:{
        'Accept':'application/json',
        'Content-Type':'application/json'
      },
      body: JSON.stringify({
        username:this.state.username,
        password: this.state.password,
        email: this.state.email
      })
    })
    .then(function(response){
      console.log(response)
    })
    .catch(function(err){
      console.log(err)
    })

on the server side

db.one('insert into account(username,password,email) values ($1,$2,$3) returning * ',[req.body.username,hash,req.body.email])
    .then((result) => {
      console.log('successfully registered: ',result)
      const id_token = jwtSign(result)
      console.log('id_token: ',id_token)
      res.cookie('id_token',JSON.stringify(id_token),{ expires: new Date(Date.now() + (24 * 60 * 60 * 1000 * 30 * 12 * 10)), httpOnly: true })
      res.send({'id_token':id_token})
    })
    .catch((err) => {
      console.log('There was an error: ',err.message)
      res.send(JSON.stringify(err.message))
    })

The response actually has the SET_COOKIE header

Set-Cookie:id_token=%22eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MTMsInVzZXJuYW1lIjoia2oiLCJpYXQiOjE0Njg2MDk1Njl9.6w46UCTQwpQ4OIiwj-Ae54LLtYUrUgKjMKHJtepkiZk%22; Path=/; Expires=Sun, 24 May 2026 19:06:09 GMT; HttpOnly

However , i'm unable to find the cookie in my resources tab in chrome. Has anyone faced this problem? i'm not sure where i'm going wrong

I'm using the fetch API to set a cookie in my browser. this is my request object

fetch('/auth',{
      method:'POST',
      headers:{
        'Accept':'application/json',
        'Content-Type':'application/json'
      },
      body: JSON.stringify({
        username:this.state.username,
        password: this.state.password,
        email: this.state.email
      })
    })
    .then(function(response){
      console.log(response)
    })
    .catch(function(err){
      console.log(err)
    })

on the server side

db.one('insert into account(username,password,email) values ($1,$2,$3) returning * ',[req.body.username,hash,req.body.email])
    .then((result) => {
      console.log('successfully registered: ',result)
      const id_token = jwtSign(result)
      console.log('id_token: ',id_token)
      res.cookie('id_token',JSON.stringify(id_token),{ expires: new Date(Date.now() + (24 * 60 * 60 * 1000 * 30 * 12 * 10)), httpOnly: true })
      res.send({'id_token':id_token})
    })
    .catch((err) => {
      console.log('There was an error: ',err.message)
      res.send(JSON.stringify(err.message))
    })

The response actually has the SET_COOKIE header

Set-Cookie:id_token=%22eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MTMsInVzZXJuYW1lIjoia2oiLCJpYXQiOjE0Njg2MDk1Njl9.6w46UCTQwpQ4OIiwj-Ae54LLtYUrUgKjMKHJtepkiZk%22; Path=/; Expires=Sun, 24 May 2026 19:06:09 GMT; HttpOnly

However , i'm unable to find the cookie in my resources tab in chrome. Has anyone faced this problem? i'm not sure where i'm going wrong

• javascript
• express
• cookies

2 Answers 2

As per fetch docs you have to set credentials to either same-origin or include

here is the example from docs:

fetch('/users', {
   credentials: 'same-origin'
})

its quite wierd .. but the cookie gets store if i force fetch to navigate to another page

  fetch('/auth',{
      method:'POST',
      headers:{
        'Accept':'application/json',
        'Content-Type':'application/json'
      },
      body: JSON.stringify({
        username:this.state.username,
        password: this.state.password,
        email: this.state.email
      })
    })
    .then(function(response){
      console.log(response)
      window.location = '/'
    })
    .catch(function(err){
      console.log(err)
    })