I am using react (on netlify) and express (on Google Cloud Run) together. With react and CORS I need to set the cookie=secure and samesite=none in order for chrome to add the cookie on the front end. This is fine but I am unable to remove the cookie using document.cookie = 'test="";-1; path=/;'. It does not even show up when I use document.cookie to list out all current cookies.

Note this is secure and not httponly=true, which I though were the only ones you could not modify from the front end, like another cookie I am sending from express.

In short I want to be able to set two cookies from express on google, one httponly=true and the second to be modified from the front end (front end can destroy the second cookie) but I cannot set secure to false as google will not allow that cookie to be added due to CORS.

How would I be able to achieve this, adding a non secure cookie to chrome with CORS and be able to modify it from the front end?

Code I am using to set the cookie:

res.cookie("test", testValue, {
            maxAge: "2000",
            secure: true,     //If I do not set these two lines chrome does not accept it.
            sameSite: "none", //If I do not set these two lines chrome does not accept it.
        });

I will also add that if I attempt to use the expire method as suggested by Heiko Theißen, in the below code nothing happens. If I attempt to set it to a different value with the new value method, a copy of the cookie as added with the same name instead as shown in the screenshot. Both methods work when using localhost in dev. It is only in production with the cookie=secure and samesite=none flags set that both these methods no longer work.

//Expire method
document.cookie="test=;Expires=" + new Date("1970-01-01").toGMTString();

//New value method
document.cookie = 'test="";-1; path=/'