Fix shopify cookie with leading dot domain (#2142)

Shopify · May 22, 2024 · 73716c8 · 73716c8
1 parent 32d4c33
commit 73716c8
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 5 deletions.
diff --git a/.changeset/gorgeous-ghosts-yawn.md b/.changeset/gorgeous-ghosts-yawn.md
@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen-react': patch
+---
+
+Fix shopify cookie domain setting
diff --git a/packages/hydrogen-react/src/useShopifyCookies.test.tsx b/packages/hydrogen-react/src/useShopifyCookies.test.tsx
@@ -153,7 +153,7 @@ describe(`useShopifyCookies`, () => {
     expect(cookieJar['_shopify_y'].maxage).toBe(31104000);
   });
 
-  it('sets domain when provided', () => {
+  it('sets domain with leading period when provided without a leading period', () => {
     const cookieJar: MockCookieJar = mockCookie();
     const domain = 'myshop.com';
 
@@ -170,6 +170,36 @@ describe(`useShopifyCookies`, () => {
     expect(cookies['_shopify_s']).not.toBe('');
     expect(cookies['_shopify_y']).not.toBe('');
 
+    expect(cookieJar['_shopify_s'].value).not.toBe(
+      cookieJar['_shopify_y'].value,
+    );
+    expect(cookieJar['_shopify_s']).toMatchObject({
+      domain: `.${domain}`,
+      maxage: 1800,
+    });
+    expect(cookieJar['_shopify_y']).toMatchObject({
+      domain: `.${domain}`,
+      maxage: 31104000,
+    });
+  });
+
+  it('sets domain as is when provided with a leading period', () => {
+    const cookieJar: MockCookieJar = mockCookie();
+    const domain = '.myshop.com';
+
+    renderHook(() => useShopifyCookies({hasUserConsent: true, domain}));
+
+    const cookies = getShopifyCookies(document.cookie);
+
+    expect(cookies).toEqual({
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      _shopify_s: expect.any(String),
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      _shopify_y: expect.any(String),
+    });
+    expect(cookies['_shopify_s']).not.toBe('');
+    expect(cookies['_shopify_y']).not.toBe('');
+
     expect(cookieJar['_shopify_s'].value).not.toBe(
       cookieJar['_shopify_y'].value,
     );

diff --git a/packages/hydrogen-react/src/useShopifyCookies.tsx b/packages/hydrogen-react/src/useShopifyCookies.tsx
@@ -24,6 +24,13 @@ export function useShopifyCookies(options?: UseShopifyCookiesOptions): void {
   useEffect(() => {
     const cookies = getShopifyCookies(document.cookie);
 
+    // Shopify checkout only consumes cookies set with leading dot domain
+    const domainWithLeadingDot = domain
+      ? /^\./.test(domain)
+        ? domain
+        : `.${domain}`
+      : '';
+
     /**
      * Set user and session cookies and refresh the expiry time
      */
@@ -32,17 +39,17 @@ export function useShopifyCookies(options?: UseShopifyCookiesOptions): void {
         SHOPIFY_Y,
         cookies[SHOPIFY_Y] || buildUUID(),
         longTermLength,
-        domain,
+        domainWithLeadingDot,
       );
       setCookie(
         SHOPIFY_S,
         cookies[SHOPIFY_S] || buildUUID(),
         shortTermLength,
-        domain,
+        domainWithLeadingDot,
       );
     } else {
-      setCookie(SHOPIFY_Y, '', 0, domain);
-      setCookie(SHOPIFY_S, '', 0, domain);
+      setCookie(SHOPIFY_Y, '', 0, domainWithLeadingDot);
+      setCookie(SHOPIFY_S, '', 0, domainWithLeadingDot);
     }
   }, [options, hasUserConsent, domain]);
 }