Js-cookie Cookies.get("x-auth-cookie") not working

In my react app, I am using the js-cookie npm library to get cookies from my website.
I run Cookies.get("x-auth-cookie"); but this is returning as undefined. I verified via console.log outputs that the line is being called, and the output is indeed undefined.
But when inspecting the Application via chrome’s developer tools, I see the cookie right there.

Is there a reason this cookie is not being read correctly? Could it be related to Render static site service since this works perfectly fine on my own dev machine?
I am using a custom domain for our frontend, and if it matters, the same custom domain with a sub-domain for our backend.

I’ve read up on topics such as Cookie doesn't send to browser and that’s why I set up our backend (node+express) to our api.domain.com subdomain, so I don’t think that is the issue actually.

Any guidance helps, thanks!

For the sake of being over detailed, here is my code and I’ll explain why I believe the cookie reading is the issue:

  useEffect(() => {
    async function doLoginStuff() {
      console.log("doLoginStuff 1")
      const cookieJwt = Cookies.get('x-auth-cookie');
      console.log("doLoginStuff 2", cookieJwt);
      if (cookieJwt) {
        Cookies.remove('x-auth-cookie');
        console.log("doLoginStuff 3")
        const logged = await loginUserWithOauth(cookieJwt);
        console.log("doLoginStuff 4", logged);
        if (logged != undefined) {
          login(logged);
        }
      } else {
        console.log("doLoginStuff 5")
        const logged = await loadMe();
        console.log("doLoginStuff 6", logged);
        if (logged != undefined) {
          login(logged);
        }
      }
    }

    doLoginStuff();
  }, []);

On production, the output I see is:

doLoginStuff 1
doLoginStuff 2 undefined
doLoginStuff 5
loadMe 1 {Content-Type: ‘application/json’}

Whereas on dev localhost, the output I see is:

doLoginStuff 1
doLoginStuff 2 eyJhbGCI6…rest of cookie…zr0q9VeSA_gb-0wpbPbcfAZt87f97sQ
doLoginStuff 3
loginUserWithOauth 1 {Content-Type: ‘application/json’, x-auth-token: ‘eyJhbGc…rest of cookie…87f97sQ’}

So it seems like on my render website, the cookie is not being properly picked up despite the chrome tools showing that it is there.

Thanks for reading, hope someone knows something :slight_smile:

Okay I discovered the issue is actually because the cookies were being set with the wrong domain (the server domain is api.domain.com and client is just domain.com, so client was unable to “detect” the cookies).

Resolved.

Hi Joshua,

Thanks for posting your solution!

Regards,
Mike


Render Support Engineer, MT (UTC-6, UTC-7 in Winter)