NodeJS App hosted on Heroku don't set client-side cookie

Question

My Setup:

• NodeJS Server (hosted on Heroku)
• Progressive-Web-App (hosted on Firebase)

When I had the App and Server on my localhost everything worked fine. But since I host it on these platforms, the Client-Side Cookie isn't set anymore.

Server.js (hosted on Heroku)

var express = require("express");
var bodyParser = require("body-parser");
var logger = require("morgan");
var methodOverride = require("method-override");
var cors = require("cors");
var cookieParser = require("cookie-parser");
var session = require("express-session");
var bcrypt = require("bcrypt-nodejs");

var appURL = "https://xxxxxxxxxxxxx.firebaseapp.com";

var app = express();
app.use(logger("dev"));
app.use(bodyParser.json());
app.use(methodOverride());

app.use(cors({origin: appURL, credentials: true, methods: "GET,POST"}));
app.use(cookieParser());

app.all('*', function(req, res, next) {

    res.setHeader("Access-Control-Allow-Origin", appURL);
    res.setHeader("Access-Control-Allow-Headers", "X-Requested-With");
    res.setHeader("Access-Control-Allow-Credentials", true);
    next();
});

app.set("trust proxy",1);

app.use(session({
    name: "random_session",
    secret: "yryGGeugidx34otGDuSF5sD9R8g0Gü3r8",
    resave: false,
    saveUninitialized: true,
    cookie: {
        path: "/",
        secure: true,
        domain: ".firebaseapp.com",
        httpOnly: true
    }
}));

Login.ts (the file where I make the request in firebase App)

      let data = {
        email: this.loginField,
        password: this.passwordField
      }

      var xhr = new XMLHttpRequest();
      xhr.open("POST","https://xxxxxxxxxx.herokuapp.com/login", true);
      xhr.withCredentials = true;

      var change = () => {
        if(xhr.readyState == XMLHttpRequest.DONE) {

          if(xhr.status != 0) {

            if (xhr.status != 401 && xhr.status != 404) {

              //Login Successfull

            } else {
            //Login Fail
            }

          } else {
            //Network error
          }

        }
      }

      xhr.onreadystatechange = change;

      xhr.setRequestHeader("Access-Control-Allow-Origin","https://xxxxxxxxxx.firebaseapp.com");
      xhr.setRequestHeader("Access-Control-Allow-Credentials", "true");
      xhr.setRequestHeader("Content-Type", "application/json");

      xhr.send(JSON.stringify(data));

Question:

What am I doing wrong that it doesn't set a a cookie on Client-Side? Am I using the wrong Domain in Cookie or wrong Domain in Access-Control-Allow-Origin?

Thank you!

Answer 1

I solved my Problem: I removed my Ionic App from Firebase and now I am hosting it on Heroku too. This didn't solve the problem. The cookie still is not set in my Browser.

My setup now:

• Node.Js Server on Heroku (xxxxxx.herokuapp.com)
• Ionic-PWA on Heroku (yyyyyy.herokuapp.com)

In my Node.js I just REMOVED THE DOMAIN:

app.use(session({
    name: "random_session",
    secret: "yryGGeugidx34otGDuSF5sD9R8g0Gü3r8",
    resave: false,
    saveUninitialized: true,
    cookie: {
        path: "/",
        secure: true,
        //domain: ".herokuapp.com", REMOVE THIS HELPED ME (I dont use a domain anymore)
        httpOnly: true
    }
}));

REMOVING THE DOMAIN solved my Problem.

iOS-Troubleshooting:

If you host your NodeJS Server on Heroku and your PWA on Heroku too, you need to disable Prevent Cross-Site Tracking in Safari-Settings.