js-cookies does not remove the cookie

Question

I'm using js-cookies in react and it's not removing the Cookie! I already tried all the options like {path: "/"} and {domain: 'yoursite.com'} but even specifying the options i used to set the cookie it does not remove... I also tried react-cookies but I had the same problem! The removeCookies also does not removed! I'm using it on a AuthContext then I pass it on the page components.. I don't know what i'm doing wrong.

login function (set the cookie):

    await axios
      .post(URL, { email: usuario, password: password })
      .then((retorno) => {
        if (retorno.data.token) {
          Cookies.set('NameOfMyCookie', retorno.data.token, { path: "/" });
          window.location.href = link;
          console.log(Cookies);
          setToken(retorno.data.token);
          console.log(getTheCookie) // it's a const that I use Cookies.get('NameOfMyCookie')
        }
        if (retorno.data.error) {
          Swal.fire({
            icon: "error",
            title: retorno.data.error,
            confirmButtonColor: theme.palette.primary.main,
          });
          console.log(retorno.data.error);
          return;
        }
      });
  };

logout function (remove the cookie)

const logout = () => {
    if (getTheCookie) {
      Cookies.remove("NameOfMyCookie", { path: "/" });
      console.log(Cookies);
      console.log(getTheCookie);
      console.log("not logged in");
    }
  };

Even if I do not use the "if (getTheCookie) {...} and started just using Cookies.remove it also does not work

Answer 1

It is possible to delete a cookie by setting its expiry date to a past date.

To do this, just use basic js like this and then reload the page since they will be deleted only after the page is reloaded:

function deleteCookie(NameOfMyCookie) {
    document.cookie = NameOfMyCookie + "=;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/;"
    window.location.reload();
}

const logout = () => {
    if (getTheCookie) {
      deleteCookie("NameOfMyCookie")
    }
};