Cookies not being stored with Fetch

Question

I have read every other topic I could find on this and none of the solutions worked. I am using React + Redux + Express and attempting to store a JWT in a cookie as per: https://auth0.com/blog/2015/09/28/5-steps-to-add-modern-authentication-to-legacy-apps-using-jwts/ In my Redux action I am sending the following request: ``` export function getCookie(token) { const config = { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token }, body: JSON.stringify({ token }) }; return fetch('http://127.0.0.1:4000/authorize-cookie', config) .then((res) => { return res.json(); }) .then((resJson) => { return resJson; }) .catch(err => console.log('Error: ', err)); } ``` And on the server I am responding with... ``` app.post('/authorize-cookie', authenticate, (req, res) => { res.cookie('id_token', req.body.token, { maxAge: 360000 }); res.status(200).send({ message: 'Cookie set!' }); }); ``` ...where authenticate is a function that verifies the token. Everyth…

Accepted Answer

You encountered an interesting case. The thing is that behavior of `fetch` function is different rather than `XMLHttpRequest`. To work with cookies in `fetch` you should explicitly provide `credentials` option.

```
fetch('http://127.0.0.1:4000/authorize-cookie', {
    method: 'POST',
    body: JSON.stringify({token: token}),
    credentials: 'same-origin', // <- this is mandatory to deal with cookies
})
```

According to the article on MDN

Credentials: The request credentials you want to use for the request: omit, same-origin, or include. To automatically send cookies for the current domain, this option must be provided.

Cookies not being stored with Fetch

Solution

Problem