nginx proxy_reverse not setting cookie from upstream server to the client browser

Question

I have an expressjs server to authenticate login requests from a front app built in svelte. The front app is running on frontenddomain.com and the expressjs server is running on backenddomain.com

Here is my login post route that authenticate and set cookie:

app.post('/login',  (req, res)=>{
   
   // check db,find the user, write a jwt token and put it in a cookie to send it to the 
   //   browser
                    res.cookie("accesstoken", accessToken) 
                    res.cookie("refreshtoken", refreshtoken)
                    res.send(...)
                  }

This server code deployed to an ubuntu server with Nginx running as a proxy_reverse, here is my nginx block configuration:

server {        
    ... 
    
    location / {
        proxy_pass http://localhost:3000;
        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;

        
        proxy_cookie_domain localhost .frontenddomain.com;
        proxy_cookie_domain ~^(.+)(Domain=frontenddomain.com)(.+)$ "$1 
        Domain=.frontenddomain.com $3";
    }  
    
}
   
server {
    listen 80;
    listen [::]:80;
        server_name backenddomain.com www.backenddomain.com;
        root /var/www/backenddomain.com;
        index index.html;
        location / {
        try_files $uri $uri/ /index.html;
    }
}

When I run the server and svelte app (front app) using my local machine, everything works (customer provide credential, cookie is sent to client browser and upon inspecting google dev tools, I confirm that the cookies has been set correctly in the client's browser)

When I deploy my expressjs server to ubuntu (20.04) and use pm2 to run my server, it does start and I can view all my console.log. My front app runs and I go to my login page, enter credential and click submit, the app logs me in (because credentials are correct and user set to true on the front app localstorage) but NO COOKIES are set in the browser.

I read the nginx docs, I read material and posts from different sites on how to set Nginx proxy_reverse cookie domain but unable to fix the problem (the problem is cookies are not set in the browser, the server issues them) but my proxy server is not passing them to the browser.

These questions about proxy_reverse and cookies come up, the poster comeback and post vague answer to their own question and no other answers. It seems like there are not enough technical people out there with knowledge of this issue.

my location code has the proxy_cookie_domain localhost .frontenddomain.com;

How do you set nginx proxy_reverse to pass-set cookies to the browser passed on from upstream server?

Answer 1

So it wasn't related to the nginx block configuration but it was the cookie settings. For cross site cookies to work, it has to be set with sameSite : none (or strict) and secure flags. Make sure that your backend and front has to be using domains (ip is not allowed in the latest draft as of this writing)

You also need both front and back domains to be secured (https) with an ssl.

Your ufw on nginx needs to allow https.

Cookie settings:

res.cookie("name", "value", { sameSite: "none", secure : true })

restart your nginx after updating the server and your nginx conf sites-available and it should work.