@shopify/hydrogen-react 2026.4.3 → 2026.4.5

package/dist/node-prod/useShopifyCookies.mjs

@@ -1,84 +1,49 @@
-import { SHOPIFY_S, SHOPIFY_Y } from "./cart-constants.mjs";
 import { SHOPIFY_UNIQUE_TOKEN_HEADER, SHOPIFY_VISIT_TOKEN_HEADER, getTrackingValues } from "./tracking-utils.mjs";
-import { buildUUID } from "./cookies-utils.mjs";
 import { useEffect, useRef, useState } from "react";
-import { stringify } from "worktop/cookie";
 //#region src/useShopifyCookies.tsx
-var longTermLength = 3600 * 24 * 360 * 1;
-var shortTermLength = 1800;
+var CONSENT_MANAGEMENT_MARKER_HEADER = "Shopify-Storefront-Consent-Management";
 /**
-* Sets the `shopify_y` and `shopify_s` cookies in the browser based on user consent
-* for backward compatibility support.
+* Optionally refreshes backend-managed cookies for standalone integrations.
+* The Customer Privacy API owns tracking values and legacy cookie expiration.
 *
-* If `fetchTrackingValues` is true, it makes a request to Storefront API
-* to fetch or refresh Shopiy analytics and marketing cookies and tracking values.
-* Generally speaking, this should only be needed if you're not using Hydrogen's
-* built-in analytics components and hooks that already handle this automatically.
-* For example, set it to `true` if you are using `hydrogen-react` only with
-* a different framework and still need to make a same-domain request to
-* Storefront API to set cookies.
+* If `fetchTrackingValues` is true, this sends a consent request through the
+* Storefront API proxy, retrying against `checkoutDomain` if provided. Hydrogen's
+* built-in analytics already delegates consent initialization to the Customer
+* Privacy API and does not use this hook.
 *
-* If `ignoreDeprecatedCookies` is true, it skips setting the deprecated cookies entirely.
-* Useful when you only want to use the newer tracking values and not rely on the deprecated ones.
-*
-* @returns `true` when cookies are set and ready.
+* @returns `true` when the consent request has settled and cookies are ready.
 * @publicDocs
 */
 function useShopifyCookies(options) {
-	const { hasUserConsent, domain = "", checkoutDomain = "", storefrontAccessToken, fetchTrackingValues, ignoreDeprecatedCookies = false } = options || {};
-	const coreCookiesReady = useCoreShopifyCookies({
-		storefrontAccessToken,
-		fetchTrackingValues,
-		checkoutDomain
-	});
+	const { checkoutDomain, storefrontAccessToken, fetchTrackingValues = false } = options ?? {};
+	const [cookiesReady, setCookiesReady] = useState(!fetchTrackingValues);
+	const hasFetchedTrackingValues = useRef(false);
 	useEffect(() => {
-		if (ignoreDeprecatedCookies || !coreCookiesReady) return;
-		/**
-		* Setting cookie with domain
-		*
-		* If no domain is provided, the cookie will be set for the current host.
-		* For Shopify, we need to ensure this domain is set with a leading dot.
-		*/
-		let currentDomain = domain || window.location.host;
-		if (checkoutDomain) {
-			const checkoutDomainParts = checkoutDomain.split(".").reverse();
-			const currentDomainParts = currentDomain.split(".").reverse();
-			const sameDomainParts = [];
-			checkoutDomainParts.forEach((part, index) => {
-				if (part === currentDomainParts[index]) sameDomainParts.push(part);
-			});
-			currentDomain = sameDomainParts.reverse().join(".");
-		}
-		if (/^localhost/.test(currentDomain)) currentDomain = "";
-		const domainWithLeadingDot = currentDomain ? /^\./.test(currentDomain) ? currentDomain : `.${currentDomain}` : "";
-		/**
-		* Set user and session cookies and refresh the expiry time
-		*/
-		if (hasUserConsent) {
-			const trackingValues = getTrackingValues();
-			if ((trackingValues.uniqueToken || trackingValues.visitToken || "").startsWith("00000000-")) return;
-			setCookie(SHOPIFY_Y, trackingValues.uniqueToken || buildUUID(), longTermLength, domainWithLeadingDot);
-			setCookie(SHOPIFY_S, trackingValues.visitToken || buildUUID(), shortTermLength, domainWithLeadingDot);
-		} else {
-			setCookie(SHOPIFY_Y, "", 0, domainWithLeadingDot);
-			setCookie(SHOPIFY_S, "", 0, domainWithLeadingDot);
+		if (!fetchTrackingValues) {
+			setCookiesReady(true);
+			return;
 		}
+		if (hasFetchedTrackingValues.current) return;
+		hasFetchedTrackingValues.current = true;
+		const fetchConsentValues = async () => {
+			try {
+				return await fetchTrackingValuesFromBrowser(storefrontAccessToken);
+			} catch (sameOriginError) {
+				if (!checkoutDomain) throw sameOriginError;
+				return fetchTrackingValuesFromBrowser(storefrontAccessToken, checkoutDomain);
+			}
+		};
+		fetchConsentValues().catch((error) => {
+			console.warn("[h2:warn:useShopifyCookies] Failed to fetch tracking values from browser: " + (error instanceof Error ? error.message : String(error)));
+		}).finally(() => {
+			setCookiesReady(true);
+		});
 	}, [
-		coreCookiesReady,
-		hasUserConsent,
-		domain,
 		checkoutDomain,
-		ignoreDeprecatedCookies
+		fetchTrackingValues,
+		storefrontAccessToken
 	]);
-	return coreCookiesReady;
-}
-function setCookie(name, value, maxage, domain) {
-	document.cookie = stringify(name, value, {
-		maxage,
-		domain,
-		samesite: "Lax",
-		path: "/"
-	});
+	return cookiesReady;
 }
 async function fetchTrackingValuesFromBrowser(storefrontAccessToken, storefrontApiDomain = "") {
 	const { uniqueToken, visitToken } = getTrackingValues();
@@ -87,43 +52,15 @@ async function fetchTrackingValuesFromBrowser(storefrontAccessToken, storefrontA
 		headers: {
 			"Content-Type": "application/json",
 			...storefrontAccessToken && { "X-Shopify-Storefront-Access-Token": storefrontAccessToken },
+			...storefrontApiDomain ? void 0 : { [CONSENT_MANAGEMENT_MARKER_HEADER]: "1" },
 			...visitToken || uniqueToken ? {
 				[SHOPIFY_VISIT_TOKEN_HEADER]: visitToken,
 				[SHOPIFY_UNIQUE_TOKEN_HEADER]: uniqueToken
 			} : void 0
 		},
-		body: JSON.stringify({ query: "query ensureCookies { consentManagement { cookies(visitorConsent:{}) { cookieDomain } } }" })
+		body: JSON.stringify({ query: "query ensureCookies { consentManagement { cookies(visitorConsent:{}) { trackingConsentCookie cookieDomain shopifyUnique shopifyVisit } } }" })
 	});
 	if (!response.ok) throw new Error(`Failed to fetch consent from browser: ${response.status} ${response.statusText}`);
-	await response.json();
-	getTrackingValues();
-}
-/**
-* Gets http-only cookies from Storefront API via same-origin fetch request.
-* Falls back to checkout domain if provided to at least obtain the tracking
-* values via server-timing headers.
-*/
-function useCoreShopifyCookies({ checkoutDomain, storefrontAccessToken, fetchTrackingValues = false }) {
-	const [cookiesReady, setCookiesReady] = useState(!fetchTrackingValues);
-	const hasFetchedTrackingValues = useRef(false);
-	useEffect(() => {
-		if (!fetchTrackingValues) {
-			setCookiesReady(true);
-			return;
-		}
-		if (hasFetchedTrackingValues.current) return;
-		hasFetchedTrackingValues.current = true;
-		fetchTrackingValuesFromBrowser(storefrontAccessToken).catch((error) => checkoutDomain ? fetchTrackingValuesFromBrowser(storefrontAccessToken, checkoutDomain) : Promise.reject(error)).catch((error) => {
-			console.warn("[h2:warn:useShopifyCookies] Failed to fetch tracking values from browser: " + (error instanceof Error ? error.message : String(error)));
-		}).finally(() => {
-			setCookiesReady(true);
-		});
-	}, [
-		checkoutDomain,
-		fetchTrackingValues,
-		storefrontAccessToken
-	]);
-	return cookiesReady;
 }
 //#endregion
 export { useShopifyCookies };

package/dist/node-prod/useShopifyCookies.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useShopifyCookies.mjs","names":[],"sources":["../../src/useShopifyCookies.tsx"],"sourcesContent":["import {useEffect, useRef, useState} from 'react';\n// @ts-ignore - worktop/cookie types not properly exported\nimport {stringify} from 'worktop/cookie';\nimport {SHOPIFY_Y, SHOPIFY_S} from './cart-constants.js';\nimport {buildUUID} from './cookies-utils.js';\nimport {\n  getTrackingValues,\n  SHOPIFY_UNIQUE_TOKEN_HEADER,\n  SHOPIFY_VISIT_TOKEN_HEADER,\n} from './tracking-utils.js';\n\nconst longTermLength = 60 * 60 * 24 * 360 * 1; // ~1 year expiry\nconst shortTermLength = 60 * 30; // 30 mins\n\ntype UseShopifyCookiesOptions = CoreShopifyCookiesOptions & {\n  /**\n   * If set to `false`, Shopify cookies will be removed.\n   * If set to `true`, Shopify unique user token cookie will have cookie expiry of 1 year.\n   * Defaults to false.\n   **/\n  hasUserConsent?: boolean;\n  /**\n   * The domain scope of the cookie. Defaults to empty string.\n   **/\n  domain?: string;\n  /**\n   * The checkout domain of the shop. Defaults to empty string. If set, the cookie domain will check if it can be set with the checkout domain.\n   */\n  checkoutDomain?: string;\n  /**\n   * If set to `true`, it skips modifying the deprecated shopify_y and shopify_s cookies.\n   */\n  ignoreDeprecatedCookies?: boolean;\n};\n\n/**\n * Sets the `shopify_y` and `shopify_s` cookies in the browser based on user consent\n * for backward compatibility support.\n *\n * If `fetchTrackingValues` is true, it makes a request to Storefront API\n * to fetch or refresh Shopiy analytics and marketing cookies and tracking values.\n * Generally speaking, this should only be needed if you're not using Hydrogen's\n * built-in analytics components and hooks that already handle this automatically.\n * For example, set it to `true` if you are using `hydrogen-react` only with\n * a different framework and still need to make a same-domain request to\n * Storefront API to set cookies.\n *\n * If `ignoreDeprecatedCookies` is true, it skips setting the deprecated cookies entirely.\n * Useful when you only want to use the newer tracking values and not rely on the deprecated ones.\n *\n * @returns `true` when cookies are set and ready.\n * @publicDocs\n */\nexport function useShopifyCookies(options?: UseShopifyCookiesOptions): boolean {\n  const {\n    hasUserConsent,\n    domain = '',\n    checkoutDomain = '',\n    storefrontAccessToken,\n    fetchTrackingValues,\n    ignoreDeprecatedCookies = false,\n  } = options || {};\n\n  const coreCookiesReady = useCoreShopifyCookies({\n    storefrontAccessToken,\n    fetchTrackingValues,\n    checkoutDomain,\n  });\n\n  useEffect(() => {\n    // Skip setting JS cookies until http-only cookies and server-timing\n    // are ready so that we have values synced in JS and http-only cookies.\n    if (ignoreDeprecatedCookies || !coreCookiesReady) return;\n\n    /**\n     * Setting cookie with domain\n     *\n     * If no domain is provided, the cookie will be set for the current host.\n     * For Shopify, we need to ensure this domain is set with a leading dot.\n     */\n\n    // Use override domain or current host\n    let currentDomain = domain || window.location.host;\n\n    if (checkoutDomain) {\n      const checkoutDomainParts = checkoutDomain.split('.').reverse();\n      const currentDomainParts = currentDomain.split('.').reverse();\n      const sameDomainParts: Array<string> = [];\n      checkoutDomainParts.forEach((part, index) => {\n        if (part === currentDomainParts[index]) {\n          sameDomainParts.push(part);\n        }\n      });\n\n      currentDomain = sameDomainParts.reverse().join('.');\n    }\n\n    // Reset domain if localhost\n    if (/^localhost/.test(currentDomain)) currentDomain = '';\n\n    // Shopify checkout only consumes cookies set with leading dot domain\n    const domainWithLeadingDot = currentDomain\n      ? /^\\./.test(currentDomain)\n        ? currentDomain\n        : `.${currentDomain}`\n      : '';\n\n    /**\n     * Set user and session cookies and refresh the expiry time\n     */\n    if (hasUserConsent) {\n      const trackingValues = getTrackingValues();\n      if (\n        (\n          trackingValues.uniqueToken ||\n          trackingValues.visitToken ||\n          ''\n        ).startsWith('00000000-')\n      ) {\n        // Skip writing cookies when tracking values signal we don't have consent yet\n        return;\n      }\n\n      setCookie(\n        SHOPIFY_Y,\n        trackingValues.uniqueToken || buildUUID(),\n        longTermLength,\n        domainWithLeadingDot,\n      );\n      setCookie(\n        SHOPIFY_S,\n        trackingValues.visitToken || buildUUID(),\n        shortTermLength,\n        domainWithLeadingDot,\n      );\n    } else {\n      setCookie(SHOPIFY_Y, '', 0, domainWithLeadingDot);\n      setCookie(SHOPIFY_S, '', 0, domainWithLeadingDot);\n    }\n  }, [\n    coreCookiesReady,\n    hasUserConsent,\n    domain,\n    checkoutDomain,\n    ignoreDeprecatedCookies,\n  ]);\n\n  return coreCookiesReady;\n}\n\nfunction setCookie(\n  name: string,\n  value: string,\n  maxage: number,\n  domain: string,\n): void {\n  document.cookie = stringify(name, value, {\n    maxage,\n    domain,\n    samesite: 'Lax',\n    path: '/',\n  });\n}\n\nasync function fetchTrackingValuesFromBrowser(\n  storefrontAccessToken?: string,\n  storefrontApiDomain = '',\n): Promise<void> {\n  // These values might come from server-timing or old cookies.\n  // If consent cannot be initially assumed, these tokens\n  // will be dropped in SFAPI and it will return a mock token\n  // starting with '00000000-'.\n  // However, if consent can be assumed initially, these tokens\n  // will be used to create proper cookies and continue our flow.\n  const {uniqueToken, visitToken} = getTrackingValues();\n\n  const response = await fetch(\n    // TODO: update this endpoint when it becomes stable\n    `${storefrontApiDomain.replace(/\\/+$/, '')}/api/unstable/graphql.json`,\n    {\n      method: 'POST',\n      headers: {\n        'Content-Type': 'application/json',\n        ...(storefrontAccessToken && {\n          'X-Shopify-Storefront-Access-Token': storefrontAccessToken,\n        }),\n        ...(visitToken || uniqueToken\n          ? {\n              [SHOPIFY_VISIT_TOKEN_HEADER]: visitToken,\n              [SHOPIFY_UNIQUE_TOKEN_HEADER]: uniqueToken,\n            }\n          : undefined),\n      },\n      body: JSON.stringify({\n        query:\n          // This query ensures we get _cmp (consent) server-timing header, which is not available in other queries.\n          // This value can be passed later to consent-tracking-api and privacy-banner scripts to avoid extra requests.\n          'query ensureCookies { consentManagement { cookies(visitorConsent:{}) { cookieDomain } } }',\n      }),\n    },\n  );\n\n  if (!response.ok) {\n    throw new Error(\n      `Failed to fetch consent from browser: ${response.status} ${response.statusText}`,\n    );\n  }\n\n  // Consume the body to complete the request and\n  // ensure server-timing is available in performance API\n  await response.json();\n\n  // Ensure we cache the latest tracking values from resources timing\n  getTrackingValues();\n}\n\ntype CoreShopifyCookiesOptions = {\n  storefrontAccessToken?: string;\n  fetchTrackingValues?: boolean;\n  checkoutDomain?: string;\n};\n\n/**\n * Gets http-only cookies from Storefront API via same-origin fetch request.\n * Falls back to checkout domain if provided to at least obtain the tracking\n * values via server-timing headers.\n */\nfunction useCoreShopifyCookies({\n  checkoutDomain,\n  storefrontAccessToken,\n  fetchTrackingValues = false,\n}: CoreShopifyCookiesOptions) {\n  const [cookiesReady, setCookiesReady] = useState(!fetchTrackingValues);\n  const hasFetchedTrackingValues = useRef(false);\n\n  useEffect(() => {\n    if (!fetchTrackingValues) {\n      // Backend did the work, or proxy is disabled.\n      setCookiesReady(true);\n      return;\n    }\n\n    // React runs effects twice in dev mode, avoid double fetching\n    if (hasFetchedTrackingValues.current) return;\n    hasFetchedTrackingValues.current = true;\n\n    // Fetch consent from browser via proxy\n    fetchTrackingValuesFromBrowser(storefrontAccessToken)\n      .catch((error) =>\n        checkoutDomain\n          ? // Retry with checkout domain if available to at least\n            // get the server-timing values for tracking.\n            fetchTrackingValuesFromBrowser(\n              storefrontAccessToken,\n              checkoutDomain,\n            )\n          : Promise.reject(error),\n      )\n      .catch((error) => {\n        console.warn(\n          '[h2:warn:useShopifyCookies] Failed to fetch tracking values from browser: ' +\n            (error instanceof Error ? error.message : String(error)),\n        );\n      })\n      .finally(() => {\n        // Proceed even on errors, degraded tracking is better than no app\n        setCookiesReady(true);\n      });\n  }, [checkoutDomain, fetchTrackingValues, storefrontAccessToken]);\n\n  return cookiesReady;\n}\n"],"mappings":";;;;;;AAWA,IAAM,iBAAiB,OAAU,KAAK,MAAM;AAC5C,IAAM,kBAAkB;;;;;;;;;;;;;;;;;;;AAyCxB,SAAgB,kBAAkB,SAA6C;CAC7E,MAAM,EACJ,gBACA,SAAS,IACT,iBAAiB,IACjB,uBACA,qBACA,0BAA0B,UACxB,WAAW,EAAE;CAEjB,MAAM,mBAAmB,sBAAsB;EAC7C;EACA;EACA;EACD,CAAC;AAEF,iBAAgB;AAGd,MAAI,2BAA2B,CAAC,iBAAkB;;;;;;;EAUlD,IAAI,gBAAgB,UAAU,OAAO,SAAS;AAE9C,MAAI,gBAAgB;GAClB,MAAM,sBAAsB,eAAe,MAAM,IAAI,CAAC,SAAS;GAC/D,MAAM,qBAAqB,cAAc,MAAM,IAAI,CAAC,SAAS;GAC7D,MAAM,kBAAiC,EAAE;AACzC,uBAAoB,SAAS,MAAM,UAAU;AAC3C,QAAI,SAAS,mBAAmB,OAC9B,iBAAgB,KAAK,KAAK;KAE5B;AAEF,mBAAgB,gBAAgB,SAAS,CAAC,KAAK,IAAI;;AAIrD,MAAI,aAAa,KAAK,cAAc,CAAE,iBAAgB;EAGtD,MAAM,uBAAuB,gBACzB,MAAM,KAAK,cAAc,GACvB,gBACA,IAAI,kBACN;;;;AAKJ,MAAI,gBAAgB;GAClB,MAAM,iBAAiB,mBAAmB;AAC1C,QAEI,eAAe,eACf,eAAe,cACf,IACA,WAAW,YAAY,CAGzB;AAGF,aACE,WACA,eAAe,eAAe,WAAW,EACzC,gBACA,qBACD;AACD,aACE,WACA,eAAe,cAAc,WAAW,EACxC,iBACA,qBACD;SACI;AACL,aAAU,WAAW,IAAI,GAAG,qBAAqB;AACjD,aAAU,WAAW,IAAI,GAAG,qBAAqB;;IAElD;EACD;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QAAO;;AAGT,SAAS,UACP,MACA,OACA,QACA,QACM;AACN,UAAS,SAAS,UAAU,MAAM,OAAO;EACvC;EACA;EACA,UAAU;EACV,MAAM;EACP,CAAC;;AAGJ,eAAe,+BACb,uBACA,sBAAsB,IACP;CAOf,MAAM,EAAC,aAAa,eAAc,mBAAmB;CAErD,MAAM,WAAW,MAAM,MAErB,GAAG,oBAAoB,QAAQ,QAAQ,GAAG,CAAC,6BAC3C;EACE,QAAQ;EACR,SAAS;GACP,gBAAgB;GAChB,GAAI,yBAAyB,EAC3B,qCAAqC,uBACtC;GACD,GAAI,cAAc,cACd;KACG,6BAA6B;KAC7B,8BAA8B;IAChC,GACD,KAAA;GACL;EACD,MAAM,KAAK,UAAU,EACnB,OAGE,6FACH,CAAC;EACH,CACF;AAED,KAAI,CAAC,SAAS,GACZ,OAAM,IAAI,MACR,yCAAyC,SAAS,OAAO,GAAG,SAAS,aACtE;AAKH,OAAM,SAAS,MAAM;AAGrB,oBAAmB;;;;;;;AAcrB,SAAS,sBAAsB,EAC7B,gBACA,uBACA,sBAAsB,SACM;CAC5B,MAAM,CAAC,cAAc,mBAAmB,SAAS,CAAC,oBAAoB;CACtE,MAAM,2BAA2B,OAAO,MAAM;AAE9C,iBAAgB;AACd,MAAI,CAAC,qBAAqB;AAExB,mBAAgB,KAAK;AACrB;;AAIF,MAAI,yBAAyB,QAAS;AACtC,2BAAyB,UAAU;AAGnC,iCAA+B,sBAAsB,CAClD,OAAO,UACN,iBAGI,+BACE,uBACA,eACD,GACD,QAAQ,OAAO,MAAM,CAC1B,CACA,OAAO,UAAU;AAChB,WAAQ,KACN,gFACG,iBAAiB,QAAQ,MAAM,UAAU,OAAO,MAAM,EAC1D;IACD,CACD,cAAc;AAEb,mBAAgB,KAAK;IACrB;IACH;EAAC;EAAgB;EAAqB;EAAsB,CAAC;AAEhE,QAAO"}
+{"version":3,"file":"useShopifyCookies.mjs","names":[],"sources":["../../src/useShopifyCookies.tsx"],"sourcesContent":["import {useEffect, useRef, useState} from 'react';\nimport {\n  getTrackingValues,\n  SHOPIFY_UNIQUE_TOKEN_HEADER,\n  SHOPIFY_VISIT_TOKEN_HEADER,\n} from './tracking-utils.js';\n\n// Marks the same-origin consent request so the backend can identify\n// headless consent-management traffic. A custom header on the cross-origin\n// checkout retry would fail its CORS preflight, so it is never sent there.\n// NOTE: packages/hydrogen/src/constants.ts defines the same header name\n// (STOREFRONT_CONSENT_MANAGEMENT_HEADER) for the server-side proxy\n// forwarding; keep the two in sync.\nconst CONSENT_MANAGEMENT_MARKER_HEADER =\n  'Shopify-Storefront-Consent-Management';\n\ntype UseShopifyCookiesOptions = {\n  storefrontAccessToken?: string;\n  fetchTrackingValues?: boolean;\n  /** @deprecated No longer used. The Customer Privacy API manages Shopify cookies. */\n  hasUserConsent?: boolean;\n  /** @deprecated No longer used. The Customer Privacy API manages cookie domains. */\n  domain?: string;\n  /** The checkout domain used if the same-origin consent request fails. */\n  checkoutDomain?: string;\n  /** @deprecated No longer used. The Customer Privacy API expires deprecated cookies. */\n  ignoreDeprecatedCookies?: boolean;\n};\n\n/**\n * Optionally refreshes backend-managed cookies for standalone integrations.\n * The Customer Privacy API owns tracking values and legacy cookie expiration.\n *\n * If `fetchTrackingValues` is true, this sends a consent request through the\n * Storefront API proxy, retrying against `checkoutDomain` if provided. Hydrogen's\n * built-in analytics already delegates consent initialization to the Customer\n * Privacy API and does not use this hook.\n *\n * @returns `true` when the consent request has settled and cookies are ready.\n * @publicDocs\n */\nexport function useShopifyCookies(options?: UseShopifyCookiesOptions): boolean {\n  const {\n    checkoutDomain,\n    storefrontAccessToken,\n    fetchTrackingValues = false,\n  } = options ?? {};\n  const [cookiesReady, setCookiesReady] = useState(!fetchTrackingValues);\n  const hasFetchedTrackingValues = useRef(false);\n\n  useEffect(() => {\n    if (!fetchTrackingValues) {\n      // Backend did the work, or proxy is disabled.\n      setCookiesReady(true);\n      return;\n    }\n\n    // React runs effects twice in dev mode, avoid double fetching\n    if (hasFetchedTrackingValues.current) return;\n    hasFetchedTrackingValues.current = true;\n\n    const fetchConsentValues = async () => {\n      try {\n        return await fetchTrackingValuesFromBrowser(storefrontAccessToken);\n      } catch (sameOriginError) {\n        if (!checkoutDomain) throw sameOriginError;\n        // Retry with checkout domain if the same-origin proxy failed.\n        return fetchTrackingValuesFromBrowser(\n          storefrontAccessToken,\n          checkoutDomain,\n        );\n      }\n    };\n\n    fetchConsentValues()\n      .catch((error) => {\n        console.warn(\n          '[h2:warn:useShopifyCookies] Failed to fetch tracking values from browser: ' +\n            (error instanceof Error ? error.message : String(error)),\n        );\n      })\n      .finally(() => {\n        // Proceed even on errors, degraded tracking is better than no app\n        setCookiesReady(true);\n      });\n  }, [checkoutDomain, fetchTrackingValues, storefrontAccessToken]);\n\n  return cookiesReady;\n}\n\nasync function fetchTrackingValuesFromBrowser(\n  storefrontAccessToken?: string,\n  storefrontApiDomain = '',\n): Promise<void> {\n  // Forward the current CTA tokens or legacy cookies to preserve the session.\n  // CTA suppresses token generation while its async consent is loading.\n  const {uniqueToken, visitToken} = getTrackingValues();\n\n  const response = await fetch(\n    // TODO: update this endpoint when it becomes stable\n    `${storefrontApiDomain.replace(/\\/+$/, '')}/api/unstable/graphql.json`,\n    {\n      method: 'POST',\n      headers: {\n        'Content-Type': 'application/json',\n        ...(storefrontAccessToken && {\n          'X-Shopify-Storefront-Access-Token': storefrontAccessToken,\n        }),\n        // The marker header goes on the same-origin request only, where the\n        // Hydrogen server proxy can act on it.\n        ...(storefrontApiDomain\n          ? undefined\n          : {[CONSENT_MANAGEMENT_MARKER_HEADER]: '1'}),\n        ...(visitToken || uniqueToken\n          ? {\n              [SHOPIFY_VISIT_TOKEN_HEADER]: visitToken,\n              [SHOPIFY_UNIQUE_TOKEN_HEADER]: uniqueToken,\n            }\n          : undefined),\n      },\n      body: JSON.stringify({\n        query:\n          // The empty `visitorConsent` refreshes cookies without changing\n          // the stored consent.\n          'query ensureCookies { consentManagement { cookies(visitorConsent:{}) { trackingConsentCookie cookieDomain shopifyUnique shopifyVisit } } }',\n      }),\n    },\n  );\n\n  if (!response.ok) {\n    throw new Error(\n      `Failed to fetch consent from browser: ${response.status} ${response.statusText}`,\n    );\n  }\n}\n"],"mappings":";;;AAaA,IAAM,mCACJ;;;;;;;;;;;;;AA2BF,SAAgB,kBAAkB,SAA6C;CAC7E,MAAM,EACJ,gBACA,uBACA,sBAAsB,UACpB,WAAW,EAAE;CACjB,MAAM,CAAC,cAAc,mBAAmB,SAAS,CAAC,oBAAoB;CACtE,MAAM,2BAA2B,OAAO,MAAM;AAE9C,iBAAgB;AACd,MAAI,CAAC,qBAAqB;AAExB,mBAAgB,KAAK;AACrB;;AAIF,MAAI,yBAAyB,QAAS;AACtC,2BAAyB,UAAU;EAEnC,MAAM,qBAAqB,YAAY;AACrC,OAAI;AACF,WAAO,MAAM,+BAA+B,sBAAsB;YAC3D,iBAAiB;AACxB,QAAI,CAAC,eAAgB,OAAM;AAE3B,WAAO,+BACL,uBACA,eACD;;;AAIL,sBAAoB,CACjB,OAAO,UAAU;AAChB,WAAQ,KACN,gFACG,iBAAiB,QAAQ,MAAM,UAAU,OAAO,MAAM,EAC1D;IACD,CACD,cAAc;AAEb,mBAAgB,KAAK;IACrB;IACH;EAAC;EAAgB;EAAqB;EAAsB,CAAC;AAEhE,QAAO;;AAGT,eAAe,+BACb,uBACA,sBAAsB,IACP;CAGf,MAAM,EAAC,aAAa,eAAc,mBAAmB;CAErD,MAAM,WAAW,MAAM,MAErB,GAAG,oBAAoB,QAAQ,QAAQ,GAAG,CAAC,6BAC3C;EACE,QAAQ;EACR,SAAS;GACP,gBAAgB;GAChB,GAAI,yBAAyB,EAC3B,qCAAqC,uBACtC;GAGD,GAAI,sBACA,KAAA,IACA,GAAE,mCAAmC,KAAI;GAC7C,GAAI,cAAc,cACd;KACG,6BAA6B;KAC7B,8BAA8B;IAChC,GACD,KAAA;GACL;EACD,MAAM,KAAK,UAAU,EACnB,OAGE,8IACH,CAAC;EACH,CACF;AAED,KAAI,CAAC,SAAS,GACZ,OAAM,IAAI,MACR,yCAAyC,SAAS,OAAO,GAAG,SAAS,aACtE"}

package/dist/types/ShopifyProvider.d.ts

@@ -31,6 +31,9 @@ export interface ShopifyProviderBase {
     /**
      * Uses the current window.location.origin for Storefront API requests.
      * This requires setting up a proxy for Storefront API requests in your domain.
+     * Without the proxy, cart requests still work, but visitor analytics and
+     * session attribution do not,
+     * [notice](https://shopify.dev/changelog/posts/tracking-cookie-deprecation-hydrogen).
      */
     sameDomainForStorefrontApi?: boolean;
 }

package/dist/types/tracking-utils.d.ts

@@ -10,11 +10,12 @@ type TrackingValues = {
     /** Represents the consent given by the user or the default region consent configured in Admin */
     consent: string;
 };
-export declare const cachedTrackingValues: {
-    current: null | TrackingValues;
-};
 /**
- * Retrieves user session tracking values for analytics and marketing from the browser environment.
+ * Retrieves user session tracking values for analytics and marketing from the
+ * browser environment. Customer Privacy API token readers are authoritative
+ * when available, including when consent denies tracking. Deprecated
+ * `_shopify_y`/`_shopify_s` cookies are read only without an API token reader.
+ * Consent comes from CTA's cache or the legacy `_tracking_consent` cookie.
  * @publicDocs
  */
 export declare function getTrackingValues(): TrackingValues;

package/dist/types/useShopifyCookies.d.ts

@@ -1,45 +1,26 @@
-type UseShopifyCookiesOptions = CoreShopifyCookiesOptions & {
-    /**
-     * If set to `false`, Shopify cookies will be removed.
-     * If set to `true`, Shopify unique user token cookie will have cookie expiry of 1 year.
-     * Defaults to false.
-     **/
+type UseShopifyCookiesOptions = {
+    storefrontAccessToken?: string;
+    fetchTrackingValues?: boolean;
+    /** @deprecated No longer used. The Customer Privacy API manages Shopify cookies. */
     hasUserConsent?: boolean;
-    /**
-     * The domain scope of the cookie. Defaults to empty string.
-     **/
+    /** @deprecated No longer used. The Customer Privacy API manages cookie domains. */
     domain?: string;
-    /**
-     * The checkout domain of the shop. Defaults to empty string. If set, the cookie domain will check if it can be set with the checkout domain.
-     */
+    /** The checkout domain used if the same-origin consent request fails. */
     checkoutDomain?: string;
-    /**
-     * If set to `true`, it skips modifying the deprecated shopify_y and shopify_s cookies.
-     */
+    /** @deprecated No longer used. The Customer Privacy API expires deprecated cookies. */
     ignoreDeprecatedCookies?: boolean;
 };
 /**
- * Sets the `shopify_y` and `shopify_s` cookies in the browser based on user consent
- * for backward compatibility support.
+ * Optionally refreshes backend-managed cookies for standalone integrations.
+ * The Customer Privacy API owns tracking values and legacy cookie expiration.
  *
- * If `fetchTrackingValues` is true, it makes a request to Storefront API
- * to fetch or refresh Shopiy analytics and marketing cookies and tracking values.
- * Generally speaking, this should only be needed if you're not using Hydrogen's
- * built-in analytics components and hooks that already handle this automatically.
- * For example, set it to `true` if you are using `hydrogen-react` only with
- * a different framework and still need to make a same-domain request to
- * Storefront API to set cookies.
+ * If `fetchTrackingValues` is true, this sends a consent request through the
+ * Storefront API proxy, retrying against `checkoutDomain` if provided. Hydrogen's
+ * built-in analytics already delegates consent initialization to the Customer
+ * Privacy API and does not use this hook.
  *
- * If `ignoreDeprecatedCookies` is true, it skips setting the deprecated cookies entirely.
- * Useful when you only want to use the newer tracking values and not rely on the deprecated ones.
- *
- * @returns `true` when cookies are set and ready.
+ * @returns `true` when the consent request has settled and cookies are ready.
  * @publicDocs
  */
 export declare function useShopifyCookies(options?: UseShopifyCookiesOptions): boolean;
-type CoreShopifyCookiesOptions = {
-    storefrontAccessToken?: string;
-    fetchTrackingValues?: boolean;
-    checkoutDomain?: string;
-};
 export {};

package/dist/umd/hydrogen-react.dev.js

@@ -178,7 +178,7 @@
 		};
 		return y;
 	}
-	var l$1 = function(t, n) {
+	var l = function(t, n) {
 		return t.actions.forEach((function(e) {
 			var r = e.exec;
 			return r && r(t.context, n);
@@ -188,7 +188,7 @@
 		var r = t.initialState, i = n.NotStarted, o = /* @__PURE__ */ new Set(), c = {
 			_machine: t,
 			send: function(e) {
-				i === n.Running && (r = t.transition(r, e), l$1(r, u(e)), o.forEach((function(t) {
+				i === n.Running && (r = t.transition(r, e), l(r, u(e)), o.forEach((function(t) {
 					return t(r);
 				})));
 			},
@@ -210,7 +210,7 @@
 						matches: a(u.value)
 					};
 				} else r = t.initialState;
-				return i = n.Running, l$1(r, e), c;
+				return i = n.Running, l(r, e), c;
 			},
 			stop: function() {
 				return i = n.Stopped, o.clear(), c;
@@ -715,68 +715,27 @@
 	var SHOPIFY_VISIT_TOKEN_HEADER = "X-Shopify-VisitToken";
 	/** Storefront API header for UniqueToken */
 	var SHOPIFY_UNIQUE_TOKEN_HEADER = "X-Shopify-UniqueToken";
-	var cachedTrackingValues = { current: null };
 	/**
-	* Retrieves user session tracking values for analytics and marketing from the browser environment.
+	* Retrieves user session tracking values for analytics and marketing from the
+	* browser environment. Customer Privacy API token readers are authoritative
+	* when available, including when consent denies tracking. Deprecated
+	* `_shopify_y`/`_shopify_s` cookies are read only without an API token reader.
+	* Consent comes from CTA's cache or the legacy `_tracking_consent` cookie.
 	* @publicDocs
 	*/
 	function getTrackingValues() {
-		let trackingValues;
-		if (typeof window !== "undefined" && typeof window.performance !== "undefined") try {
-			const resourceRE = /^https?:\/\/([^/]+)(\/api\/(?:unstable|2\d{3}-\d{2})\/graphql\.json(?=$|\?))?/;
-			const entries = performance.getEntriesByType("resource");
-			let matchedValues;
-			for (let i = entries.length - 1; i >= 0; i--) {
-				const entry = entries[i];
-				if (entry.initiatorType !== "fetch") continue;
-				const currentHost = window.location.host;
-				const match = entry.name.match(resourceRE);
-				if (!match) continue;
-				const [, matchedHost, sfapiPath] = match;
-				if (matchedHost === currentHost || sfapiPath && matchedHost?.endsWith(`.${currentHost}`)) {
-					const values = extractFromPerformanceEntry(entry);
-					if (values) {
-						matchedValues = values;
-						break;
-					}
-				}
-			}
-			if (matchedValues) trackingValues = matchedValues;
-			if (trackingValues) cachedTrackingValues.current = trackingValues;
-			else if (cachedTrackingValues.current) trackingValues = cachedTrackingValues.current;
-			if (!trackingValues) {
-				const navigationEntries = performance.getEntriesByType("navigation")[0];
-				trackingValues = extractFromPerformanceEntry(navigationEntries, false);
-			}
-		} catch {}
-		if (!trackingValues) {
-			const cookie = typeof arguments[0] === "string" ? arguments[0] : typeof document !== "undefined" ? document.cookie : "";
-			trackingValues = {
-				uniqueToken: cookie.match(/\b_shopify_y=([^;]+)/)?.[1] || "",
-				visitToken: cookie.match(/\b_shopify_s=([^;]+)/)?.[1] || "",
-				consent: cookie.match(/\b_tracking_consent=([^;]+)/)?.[1] || ""
-			};
-		}
-		return trackingValues;
-	}
-	function extractFromPerformanceEntry(entry, isConsentRequired = true) {
-		let uniqueToken = "";
-		let visitToken = "";
-		let consent = "";
-		const serverTiming = entry.serverTiming;
-		if (serverTiming && serverTiming.length >= 3) for (let i = serverTiming.length - 1; i >= 0; i--) {
-			const { name, description } = serverTiming[i];
-			if (!name || !description) continue;
-			if (name === "_y") uniqueToken = description;
-			else if (name === "_s") visitToken = description;
-			else if (name === "_cmp") consent = description;
-			if (uniqueToken && visitToken && consent) break;
-		}
-		return uniqueToken && visitToken && (isConsentRequired ? consent : true) ? {
-			uniqueToken,
-			visitToken,
-			consent
-		} : void 0;
+		const cookie = typeof arguments[0] === "string" ? arguments[0] : typeof document !== "undefined" ? document.cookie : "";
+		const customerPrivacy = typeof window === "undefined" ? void 0 : window.Shopify?.customerPrivacy;
+		const internal = customerPrivacy?.__internal;
+		const tokenOptions = {
+			generateFallback: customerPrivacy?.config?.asyncConsent === true,
+			tag: "hydrogen:classic"
+		};
+		return {
+			uniqueToken: internal?.uniqueToken ? internal.uniqueToken(tokenOptions) ?? "" : cookie.match(/\b_shopify_y=([^;]+)/)?.[1] ?? "",
+			visitToken: internal?.visitToken ? internal.visitToken(tokenOptions) ?? "" : cookie.match(/\b_shopify_s=([^;]+)/)?.[1] ?? "",
+			consent: customerPrivacy?.cachedConsent ?? cookie.match(/\b_tracking_consent=([^;]+)/)?.[1] ?? ""
+		};
 	}
 	//#endregion
 	//#region src/cart-hooks.tsx
@@ -2061,7 +2020,7 @@
 		const payloadWithPrivacy = payload;
 		return {
 			source: payload.shopifySalesChannel || ShopifySalesChannel.headless,
-			asset_version_id: payload.assetVersionId || "2026.4.3",
+			asset_version_id: payload.assetVersionId || "2026.4.5",
 			hydrogenSubchannelId: payload.storefrontId || payload.hydrogenSubchannelId || "0",
 			is_persistent_cookie: payload.hasUserConsent,
 			deprecated_visit_token: payload.visitToken,
@@ -3410,6 +3369,10 @@
 			const script = document.createElement("script");
 			if (options?.module) script.type = "module";
 			else script.type = "text/javascript";
+			const attributes = options?.attributes;
+			if (attributes) Object.keys(attributes).forEach((key) => {
+				script.setAttribute(key, attributes[key]);
+			});
 			script.src = src;
 			script.onload = () => {
 				resolve(true);
@@ -3419,10 +3382,6 @@
 			};
 			if (options?.in === "head") document.head.appendChild(script);
 			else document.body.appendChild(script);
-			const attributes = options?.attributes;
-			if (attributes) Object.keys(attributes).forEach((key) => {
-				script.setAttribute(key, attributes[key]);
-			});
 		});
 		SCRIPTS_LOADED[src] = promise;
 		return promise;
@@ -3992,88 +3951,50 @@
 		return null;
 	}
 	//#endregion
-	//#region ../../node_modules/.pnpm/worktop@0.7.3/node_modules/worktop/cookie/index.mjs
-	function l(a, r, e = {}) {
-		let t = a + "=" + encodeURIComponent(r);
-		return e.expires && (t += "; Expires=" + new Date(e.expires).toUTCString()), e.maxage != null && e.maxage >= 0 && (t += "; Max-Age=" + (e.maxage | 0)), e.domain && (t += "; Domain=" + e.domain), e.path && (t += "; Path=" + e.path), e.samesite && (t += "; SameSite=" + e.samesite), (e.secure || e.samesite === "None") && (t += "; Secure"), e.httponly && (t += "; HttpOnly"), t;
-	}
-	//#endregion
 	//#region src/useShopifyCookies.tsx
-	var longTermLength = 3600 * 24 * 360 * 1;
-	var shortTermLength = 1800;
+	var CONSENT_MANAGEMENT_MARKER_HEADER = "Shopify-Storefront-Consent-Management";
 	/**
-	* Sets the `shopify_y` and `shopify_s` cookies in the browser based on user consent
-	* for backward compatibility support.
-	*
-	* If `fetchTrackingValues` is true, it makes a request to Storefront API
-	* to fetch or refresh Shopiy analytics and marketing cookies and tracking values.
-	* Generally speaking, this should only be needed if you're not using Hydrogen's
-	* built-in analytics components and hooks that already handle this automatically.
-	* For example, set it to `true` if you are using `hydrogen-react` only with
-	* a different framework and still need to make a same-domain request to
-	* Storefront API to set cookies.
+	* Optionally refreshes backend-managed cookies for standalone integrations.
+	* The Customer Privacy API owns tracking values and legacy cookie expiration.
 	*
-	* If `ignoreDeprecatedCookies` is true, it skips setting the deprecated cookies entirely.
-	* Useful when you only want to use the newer tracking values and not rely on the deprecated ones.
+	* If `fetchTrackingValues` is true, this sends a consent request through the
+	* Storefront API proxy, retrying against `checkoutDomain` if provided. Hydrogen's
+	* built-in analytics already delegates consent initialization to the Customer
+	* Privacy API and does not use this hook.
 	*
-	* @returns `true` when cookies are set and ready.
+	* @returns `true` when the consent request has settled and cookies are ready.
 	* @publicDocs
 	*/
 	function useShopifyCookies(options) {
-		const { hasUserConsent, domain = "", checkoutDomain = "", storefrontAccessToken, fetchTrackingValues, ignoreDeprecatedCookies = false } = options || {};
-		const coreCookiesReady = useCoreShopifyCookies({
-			storefrontAccessToken,
-			fetchTrackingValues,
-			checkoutDomain
-		});
+		const { checkoutDomain, storefrontAccessToken, fetchTrackingValues = false } = options ?? {};
+		const [cookiesReady, setCookiesReady] = (0, react.useState)(!fetchTrackingValues);
+		const hasFetchedTrackingValues = (0, react.useRef)(false);
 		(0, react.useEffect)(() => {
-			if (ignoreDeprecatedCookies || !coreCookiesReady) return;
-			/**
-			* Setting cookie with domain
-			*
-			* If no domain is provided, the cookie will be set for the current host.
-			* For Shopify, we need to ensure this domain is set with a leading dot.
-			*/
-			let currentDomain = domain || window.location.host;
-			if (checkoutDomain) {
-				const checkoutDomainParts = checkoutDomain.split(".").reverse();
-				const currentDomainParts = currentDomain.split(".").reverse();
-				const sameDomainParts = [];
-				checkoutDomainParts.forEach((part, index) => {
-					if (part === currentDomainParts[index]) sameDomainParts.push(part);
-				});
-				currentDomain = sameDomainParts.reverse().join(".");
-			}
-			if (/^localhost/.test(currentDomain)) currentDomain = "";
-			const domainWithLeadingDot = currentDomain ? /^\./.test(currentDomain) ? currentDomain : `.${currentDomain}` : "";
-			/**
-			* Set user and session cookies and refresh the expiry time
-			*/
-			if (hasUserConsent) {
-				const trackingValues = getTrackingValues();
-				if ((trackingValues.uniqueToken || trackingValues.visitToken || "").startsWith("00000000-")) return;
-				setCookie(SHOPIFY_Y, trackingValues.uniqueToken || buildUUID(), longTermLength, domainWithLeadingDot);
-				setCookie(SHOPIFY_S, trackingValues.visitToken || buildUUID(), shortTermLength, domainWithLeadingDot);
-			} else {
-				setCookie(SHOPIFY_Y, "", 0, domainWithLeadingDot);
-				setCookie(SHOPIFY_S, "", 0, domainWithLeadingDot);
+			if (!fetchTrackingValues) {
+				setCookiesReady(true);
+				return;
 			}
+			if (hasFetchedTrackingValues.current) return;
+			hasFetchedTrackingValues.current = true;
+			const fetchConsentValues = async () => {
+				try {
+					return await fetchTrackingValuesFromBrowser(storefrontAccessToken);
+				} catch (sameOriginError) {
+					if (!checkoutDomain) throw sameOriginError;
+					return fetchTrackingValuesFromBrowser(storefrontAccessToken, checkoutDomain);
+				}
+			};
+			fetchConsentValues().catch((error) => {
+				console.warn("[h2:warn:useShopifyCookies] Failed to fetch tracking values from browser: " + (error instanceof Error ? error.message : String(error)));
+			}).finally(() => {
+				setCookiesReady(true);
+			});
 		}, [
-			coreCookiesReady,
-			hasUserConsent,
-			domain,
 			checkoutDomain,
-			ignoreDeprecatedCookies
+			fetchTrackingValues,
+			storefrontAccessToken
 		]);
-		return coreCookiesReady;
-	}
-	function setCookie(name, value, maxage, domain) {
-		document.cookie = l(name, value, {
-			maxage,
-			domain,
-			samesite: "Lax",
-			path: "/"
-		});
+		return cookiesReady;
 	}
 	async function fetchTrackingValuesFromBrowser(storefrontAccessToken, storefrontApiDomain = "") {
 		const { uniqueToken, visitToken } = getTrackingValues();
@@ -4082,43 +4003,15 @@
 			headers: {
 				"Content-Type": "application/json",
 				...storefrontAccessToken && { "X-Shopify-Storefront-Access-Token": storefrontAccessToken },
+				...storefrontApiDomain ? void 0 : { [CONSENT_MANAGEMENT_MARKER_HEADER]: "1" },
 				...visitToken || uniqueToken ? {
 					[SHOPIFY_VISIT_TOKEN_HEADER]: visitToken,
 					[SHOPIFY_UNIQUE_TOKEN_HEADER]: uniqueToken
 				} : void 0
 			},
-			body: JSON.stringify({ query: "query ensureCookies { consentManagement { cookies(visitorConsent:{}) { cookieDomain } } }" })
+			body: JSON.stringify({ query: "query ensureCookies { consentManagement { cookies(visitorConsent:{}) { trackingConsentCookie cookieDomain shopifyUnique shopifyVisit } } }" })
 		});
 		if (!response.ok) throw new Error(`Failed to fetch consent from browser: ${response.status} ${response.statusText}`);
-		await response.json();
-		getTrackingValues();
-	}
-	/**
-	* Gets http-only cookies from Storefront API via same-origin fetch request.
-	* Falls back to checkout domain if provided to at least obtain the tracking
-	* values via server-timing headers.
-	*/
-	function useCoreShopifyCookies({ checkoutDomain, storefrontAccessToken, fetchTrackingValues = false }) {
-		const [cookiesReady, setCookiesReady] = (0, react.useState)(!fetchTrackingValues);
-		const hasFetchedTrackingValues = (0, react.useRef)(false);
-		(0, react.useEffect)(() => {
-			if (!fetchTrackingValues) {
-				setCookiesReady(true);
-				return;
-			}
-			if (hasFetchedTrackingValues.current) return;
-			hasFetchedTrackingValues.current = true;
-			fetchTrackingValuesFromBrowser(storefrontAccessToken).catch((error) => checkoutDomain ? fetchTrackingValuesFromBrowser(storefrontAccessToken, checkoutDomain) : Promise.reject(error)).catch((error) => {
-				console.warn("[h2:warn:useShopifyCookies] Failed to fetch tracking values from browser: " + (error instanceof Error ? error.message : String(error)));
-			}).finally(() => {
-				setCookiesReady(true);
-			});
-		}, [
-			checkoutDomain,
-			fetchTrackingValues,
-			storefrontAccessToken
-		]);
-		return cookiesReady;
 	}
 	//#endregion
 	exports.AddToCartButton = AddToCartButton;