0

So I have a full-stack application I'm working on that consists of a React frontend, NodeJS backend, and a NGINX reverse proxy. All are containerized using docker.

My problem is that when I authenticate using the passport local strategy, it is indeed sending a cookie back in the response. However, it appears this cookie isn't being set on the front end because no subsequent requests include said cookie.

Here is where I'm setting the cookie in the response object:

res
    .status(200)
    .cookie("token", token, {
        httpOnly: true,
        expires: new Date(Date.now() + 12 * 3600000)
    })
    .send(*jsonObject*);

And here is the Fetch request I'm using to login:

return await fetch(`${baseUrl}/login`, {
    method: 'POST',
    headers: {
        Accept:'application/json',
        'Content-Type': 'application/json'
    },
    credentials: 'include',
    body: JSON.stringify({
        email: username,
        password: password
    })
})
    .then(async function(response) {
        const jsonResponse = await response.json();
        return jsonResponse;
    })

An example fetch call that requires the cookie to be included

return await fetch(`${baseUrl}/getUserInfo`, {
    method: "POST",
    headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
    },
    credentials: 'include'
})
    .then(async function(response) {
        const jsonResponse = await response.json();
        return jsonResponse;
    })
    .catch(e => console.log(e));

And here is my nginx config

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    if ($request_method = 'OPTIONS') {
        return 200;
    }

    root /var/www/html;

    index index.html;

    # To allow POST on static pages
    error_page  405     =200 $uri;

    location / {
        proxy_pass http://app;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        break;
    }

    location ~* \.(eot|otf|ttf|woff|woff2)$ {
        add_header Access-Control-Allow-Origin *;
    }

    location ~ /api/(?<url>.*) {
        proxy_pass http://api/$url;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    location /health-check {
        return 200;
        access_log off;
    }
}

And showing what is response from the server when hitting the /login endpoint

Image of result

I've tried setting the credentials property to both 'include' and 'same-origin' but to no avail.

KFrancis
  • 112
  • 6
  • see this https://stackoverflow.com/questions/51109559/get-cookie-with-react . You never get the cookie so you can use in subsequent requests. Also don't use `async` `await` when there is no need to. everything else is fine – C.Gochev Feb 02 '20 at 22:43
  • If you look at the second request in your browser's developer tools' Network tab, do you see the cookie in the headers? Do you see the cookie in Application -> Cookies (Chrome) or Storage -> Cookies (Firefox)? – cbr Feb 02 '20 at 23:18
  • @cubrr In the response headers, I see Set-Cookie as `Set-Cookie token=eyJhbGciOiJIUzI1NiIsInR5…MT; HttpOnly; SameSite=Strict`. Here's a link to show you what I see in the network tab: [link](https://imgur.com/a/e2Ipy7t) I do not see the cookie in the Storage -> Cookies tab, only the hibext_instdsigdipv2 cookie (which I'm not sure where is coming from) from the request headers/cookies. – KFrancis Feb 02 '20 at 23:50
  • Yes, what about the `/getUserInfo` request? – cbr Feb 02 '20 at 23:51
  • @cubrr The only cookie being passed in the request for `/getUserInfo` is the hibext_instdsigdipv2 one. I'm assuming the browser isn't saving the `token` cookie when it's sent from the server during the `/login` process. – KFrancis Feb 03 '20 at 00:03

0 Answers0