cookie consent and usage

[pannagger]

Hi all,

I want to add a cookie banner for my shop and it is already implemented but I am sure how I can access requests headaer/cookies on server side?
Is there a posibility to read the cookie sent in server components? should be right?
And further on, I need to deactivate all shopify analytics and tracking method when a certain cookie is unset, how can I implement something like this?

Mfg
Philip

[blittle]

You could use the session management system to read and write cookies: https://shopify.dev/custom-storefronts/hydrogen/sessions

Hydrogen 2 built on Remix will have privacy consent built in.

[pannagger]

Hi,
Thanks you for the answer, I saw this already but still not sure how to read a cookie in a server comp.
Can you provide a code snippet how to read the value of cookie xy?
Kind regards

[blittle]

Read a cookie with useSession() inside a server component. Write to the session in an API route. See the examples here: https://shopify.dev/custom-storefronts/hydrogen/sessions/manage-sessions

[pannagger]

Yeah also tried this, the example shows:

const {countryCode} = useSession();

however I tried:

const {cookie} = useSession();
const {cookies} = useSession();
const {„cookieName“} = useSession();

but all is undefined and I do not find further documentation on this but the one example.

[frandiox]

Are you writing to the session cookie (name __session by default)? If you are using CookieSessionStorage in your hydrogen.config.js, then in an API handler you can write to the session with await session.set('myProperty', value) (example here). That value should later be available in server components with useSession().myProperty.

Otherwise, if what you are doing is setting a new cookie in the browser (e.g. document.cookie = 'myNewCookie=value'), that won't show up in useSession() because it's a different cookie. To access this value, you can try request.headers.get('cookie') in the server and parse that value. The request object is available in server component that are the root of a route, and in App.server.jsx: function App({request}) { ... }.

[pannagger]

hi frandiox,
thanks a lot, that was clarifying my issue,
very nice thanks