I have a hyperlink doing calling a node express API on heroku. The API sets a session cookie and redirects back the url of a single page application (frontend). The backend API is located on a different domain than the application frontend.

This works fine with

• Chrome 92 Dektop
• Firefox 91 Dektop
• Safari on IOS
• Opera on IOS

But the cookie is not set on

• Chrome for IOS
• Firefox on IOS

Chrome IOS and Firefox IOS will only do the redirect if I move the backend and Frontend on the same domain. This should nit be a requirement since the cookie is set with Secure, HttpOnly and SameSite=None. I suspect that the SameSite attribute is not set correctly or defaulted to Lax. I've tried some workarounds for old browsers but without success.

I use the code below to set the cookie on Node on my backend:

res.cookie('session', {
  // some data
}, {
  secure: true,
  httpOnly: true,
  sameSite: 'None',
  maxAge: 24 * 60 * 60 * 1000, // 24 hours
  signed: true
})
res.redirect(302, myRedirectUrl);

Express is configured as below:

// Enable CORS
app.use(cors({
  credentials: true, // Must be true for cookies to work.
  origin: true // Required if 'credentials' is true.
}));

// Initialize cookie parser used for session cookie.
app.use(cookieParser(process.env.COOKIE_PARSER_SECRET))

Once the backend has redirected, I fetch the API from teh frontend with HttpClient which is setup as below. No cokkies are passed with the requests.

this.http = new HttpClient();
this.http.configure(config => {
  config.withBaseUrl(this.apiUrl)
  .withDefaults({
    headers: {
      'Pragma': 'no-cache',
      'Cache-Control': 'no-cache'
    },
    credentials: 'include'
  })
  .rejectErrorResponses()
});