fix: cookie domain

app/components/Layout/Layout.tsx

@@ -12,15 +12,20 @@ import {
 } from '~/hooks';
 
 export function Layout({children}: {children: ReactNode}) {
-  const {consent, shop} = useRootLoaderData();
+  const {consent, cookieDomain, shop} = useRootLoaderData();
   const {mainPaddingTopClass} = usePromobar();
   const cartForAnalytics = useCartForAnalytics();
   useCartAddDiscountUrl();
   usePreviewModeCustomerInit();
   useSetViewportHeightCssVar();
 
   return (
-    <Analytics.Provider shop={shop} cart={cartForAnalytics} consent={consent}>
+    <Analytics.Provider
+      shop={shop}
+      cart={cartForAnalytics}
+      consent={consent}
+      cookieDomain={cookieDomain}
+    >
       <>
         <PackAnalytics />
 

app/lib/utils/document.utils.ts

@@ -29,3 +29,16 @@ export const getAspectRatioFromPercentage = (
   const number = parseInt(match[0], 10);
   return `1/${number / 100}` as AspectRatio;
 };
+
+export const getCookieDomain = (url: string) => {
+  try {
+    const {hostname} = new URL(url);
+    const domainParts = hostname.split('.');
+    return `.${
+      domainParts.length > 2 ? domainParts.slice(-2).join('.') : hostname
+    }`;
+  } catch (error) {
+    console.error(`getCookieDomain:error:`, error);
+    return '';
+  }
+};

app/lib/utils/pack.utils.ts

@@ -12,9 +12,11 @@ const SESSION_COOKIE = 'pack_session';
 const DEFAULT_EXPIRES = 365;
 
 export const setPackCookie = async ({
+  cookieDomain,
   headers,
   request,
 }: {
+  cookieDomain: string;
   headers: Headers;
   request: Request;
 }) => {
@@ -32,7 +34,7 @@ export const setPackCookie = async ({
 
       headers.append(
         'Set-Cookie',
-        `${SESSION_COOKIE}=${sessionCookie}; Path=/; Expires=${expiresAt}; SameSite=Strict; Secure;`,
+        `${SESSION_COOKIE}=${sessionCookie}; Path=/; Domain=${cookieDomain}; Expires=${expiresAt}; Secure;`,
       );
     }
 

app/root.tsx

@@ -20,6 +20,7 @@ import {
 import {ApplicationError, Document, NotFound, ServerError} from '~/components';
 import {customerGetAction, validateCustomerAccessToken} from '~/lib/customer';
 import {
+  getCookieDomain,
   getPublicEnvs,
   getProductGroupings,
   getShop,
@@ -100,7 +101,9 @@ export async function loader({context, request}: LoaderFunctionArgs) {
       customer = customerData.customer;
     }
   }
+  const cookieDomain = getCookieDomain(request.url);
   const {headers: headersWithPackCookie} = await setPackCookie({
+    cookieDomain,
     headers: headersWithAccessToken,
     request,
   });
@@ -130,6 +133,7 @@ export async function loader({context, request}: LoaderFunctionArgs) {
     {
       analytics,
       consent,
+      cookieDomain,
       customer,
       customerAccessToken,
       customizerMeta: pack.session.get('customizerMeta'),

package.json

@@ -2,7 +2,7 @@
   "name": "hydrogen-starter",
   "private": true,
   "sideEffects": false,
-  "version": "1.9.4",
+  "version": "1.9.5",
   "scripts": {
     "dev": "shopify hydrogen dev --port 8080",
     "build": "shopify hydrogen build",