Axios doesn't create a cookie even though set-cookie header is there?

Question

Front-End: [Axios]

  const formSubmit = async (e) => {
    e.preventDefault()
    const formData = new FormData(e.target)
    const email = formData.get('email')
    const password = formData.get('password')
    try {
      const res = await axios.post('http://172.16.2.19:3001/api/v1/auth/login', {
        email,
        password,
      })
      console.log(res.data) // its okay, I can login if email & password are correct.
    } catch (error) {
      console.log(error)
    }
  }

Back-End [Nodejs ExpressJs]:

Inside App.js:

const cors = require('cors')
app.use(cors({ credentials: true }))

Inside Login.js (/auth/login endpoint):

// ... code, then... if email & password are correct:
// 3600000ms = 1hour
res.cookie('jwt', token, { httpOnly: true, expires: new Date(Date.now() + 3600000 })
res.status(200).json({
    status: 'success'
    token,
    data: userDoc,
})

Then, when I login in my browser:

I can login successfully, but no cookies will be created, see:

• The front-end http service (react app) is running on http://172.16.2.19:3000
• The back-end http service (expressjs) is running on http://172.16.2.19:3001
• The axios requests I'm sending from the front-end are requesting: http://172.16.2.19:3001

So what's the problem?

The problem that no cookies are getting created in the browser is preventing me from continuing to design the front-end application, because if I wanted to request anything from my API, I have to be authenticated, all the routes on the API I made are protected, so if I wanted to request anything from the API, I will have to send my jwt token along with the request.

edit **:

here's the response from the /auth/login endpoint after successfully logging in:

• I am using brave browser, the latest version.
• I tried this on firefox, it has the same behavior.

Answer 1

let me save you time:

For anyone having the same problem, all you have to do is

change your backend code from:

const cors = require('cors')
app.use(cors({ credentials: true }))

to

app.use(cors({ credentials: true, origin: true }))

and make sure you're using withCredentials: true on the front-end with every request (the login POST method and all the other requests that requires authentication)

why?

setting origin property to true is going to reflect the request origin, the origin property can be a string if you wanted to specify a particular domain, ex: http://localhost:3000. But if you have more than one client, setting this to true is a wise choise.

and for those of you wondering about mobile devices in case of specifying a string for the origin field with one particular domain. This problem of cors only happens in browsers, any other client doesn't use that CORS policy.

Answer 2

Just in case someone else runs into this issue, if your client and server are on different domains, you should also set sameSite: 'none' and secure: true

https://web.dev/samesite-cookies-explained/

Answer 3

I would check by passing {withCredentials: true} as the third argument to the axios method to allow the browser to set the cookie via the request.

Answer 4

I don't think it is correct to use the backend to save cookies, as cookies is a browser feature separate from the database. I might be wrong though. When the post is successful, res will return a token. You save this token in the browser's local storage.

const formSubmit = async (e) => {
e.preventDefault()
const formData = new FormData(e.target)
const email = formData.get('email')
const password = formData.get('password')
try {
  const res = await axios.post('http://172.16.2.19:3001/api/v1/auth/login', {
    email,
    password,
  })
  //browsers local storage
  
  localStorage.setItem('access_token',res.data.access);
  localStorage.setItem('refresh_token',res.data.refresh);
  console.log(res.data) // its okay, I can login if email & password are correct.
}

You will then have to create an authorization header as such

headers:{
        Authorization: localStorage.getItem('access_token') 
            ? 'JWT '+localStorage.getItem('access_token')
            : null

    }