CookieYes causes rehydration

[meza]

What happened?

When cookieyes loads in, it adds a few extra elements which trigger a rehydration.
Unfortunately that also resets all the work the user color mode preference sensors have done, which then cause weird flashing especially for people with a dark mode preference.

What did you expect to happen?

I would expect to not have any hydration issues.

The problem is that cookieyes needs to be loaded before everything else (hotjar and mixpanel) so that it could block the cookies they might use. This is important because regulation states that we can't use those cookies until consent is given.

What version of Remix are you using?

1.14.1

[meza]

After doing some research, it seems like the way forward is to lose the cookie services and implement a simple solution using https://www.npmjs.com/package/react-cookie-consent.

Preventing the cookies to load before the user consents is relatively straightforward.

This example prevents anything but the __session cookie - which is something we want.

[meza]

So at the heart of the issue is a trade-off between an easy to maintain cookie consent form and good security.

Seems like the nonce-based CSP is something most consent providers can't deal with, so we need to get creative. I'm tempted to take the brute-force approach and only conditionally render the analytics scripts based on the user's consent. This would potentially mean that the first visit gets missed by hotjar and google but at least we'll be compliant AND XSS-safe

[meza]

Well this has blown up big time but we've figured it out... Here's the conclusion:

https://github.com/meza/trance-stack/blob/main/docs/adr/0013-custom-cookie-consent.md