Get cookie on first render returns undefined with universal-cookie

Question

I am using universal-cookie and trying to get my cookies on the first render. However, it returns undefined, but when I refresh the page I can see it.

Firstly, I need to import the cookie package:

class PosAdmin extends Component{

cookies = new Cookies();

.....

Then I need to set the cookie, which I do like this. Inside of my promise I got:

.then(result => {
            if (result.value) {
                const cookieId = uuidv4();
                this.cookies.set(cookieDevicePairConstants.POS,
                    cookieId,
                    {
                        path: '/admin',
                        maxAge: 31536000
                    });
                const posToSelect = {
                    ...pos,
                    cookieId
                }
                this.props.updateSelectedPos({
                    variables: {
                        pos: posToSelect
                    }
                }).then(() => {
                    this.props.pairPosWithDevice({
                        variables: {
                            posId: posToSelect.id,
                            cookieId
                        }
                    });
                    }).then(() => {
                        this.props.posQuery.updateQuery((prev) => {
                            const newData =
                                prev.getPoses.map(pos => posToSelect.id === pos.id ? posToSelect : pos);
                            return { getPoses: newData };
                        });
                    });
            }
        });

And when I try to get the cookie I am doing this inside of my render:

let thisDeviceCookieId = this.cookies.get(cookieDevicePairConstants.POS);

But it returns undefined at first, but after I refresh the page I can see the value in there. I have absolutly no clue what's wrong and I appriate all the help I can get.

Thank you for taking your time to read.

Answer 1

This is a very old post so I am sure my answer is too late, but I ran into a similar issue myself recently and I hope I might be able to help someone out somewhere down the line.

I have noticed this in some situations when the cookie's sameSite property is set to "strict", specifically when a third party website redirects to mine. This isn't just a universal-cookie issue, because the cookie is missing from the document.cookie property as well. Make sure the cookie's sameSite property is set to "lax", "none", or "unset", or, perhaps, that the cookie's "path" property is exactly the same path that the third party has redirected to (haven't tested this). I suspect if it is "unset" some browser security settings may default to strict? In any case, changing sameSite property for the cookie his solved this issue for me.