How to set SameSite-None with react.js

Question

I am using react.js, and I'm trying to integrate lucky orange into my web app. I added the code snippet in the head tag of the index.html file, but I get a warning saying:

A cookie associated with a cross-site resource at http://luckyorange.net/ was set without the SameSite attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with SameSite=None and Secure.

Also, when testing to see whether lucky orange is working or not, it says to search for the term "lo_site_id" in the "view page source". I did that, but nothing came up. Am I setting it up wrong?

Question

How can I properly set the SameSite=None and secure, and why am I not seeing lo_site_id? (I'm not using node. This is front end only)

Answer 1

I had the same problem and fixed by changing the cookie creation a bit:

const cookies = new Cookies();
cookies.set(key1, value1, {secure: true, sameSite: 'none'});
cookies.set(key2, value2, {secure: true, sameSite: 'none'});

So added the last parameter, setting the cookie options.

My app uses the the universal-cookie package, you can find the documentation here: https://www.npmjs.com/package/universal-cookie

I don't know the lucky-orange app, if it is setting the cookie, you might need to tweak the code of that embedded app.

BTW. Chrome/Edge(90) throw error now (i.e. won't save the incorrect cookies), whereas Firefox(88) is not so strict and only logs a warning.