@shopify/hydrogen 2023.7.13 → 2023.10.0

package/dist/development/index.cjs

@@ -109,13 +109,9 @@ function hashKey(queryKey) {
   for (const key of rawKeys) {
     if (key != null) {
       if (typeof key === "object") {
-        if (!!key.body && typeof key.body === "string") {
-          hash += key.body;
-        } else {
-          hash += JSON.stringify(key);
-        }
+        hash += JSON.stringify(key);
       } else {
-        hash += key;
+        hash += key.toString();
       }
     }
   }
@@ -175,6 +171,16 @@ function CacheLong(overrideOptions) {
     ...overrideOptions
   };
 }
+function CacheDefault(overrideOptions) {
+  guardExpirableModeType(overrideOptions);
+  return {
+    mode: PUBLIC,
+    maxAge: 1,
+    staleWhileRevalidate: 86399,
+    // 1 second less than 24 hours
+    ...overrideOptions
+  };
+}
 function CacheCustom(overrideOptions) {
   return overrideOptions;
 }
@@ -196,7 +202,7 @@ function getCacheControlSetting(userCacheOptions, options) {
       ...options
     };
   } else {
-    return userCacheOptions || CacheShort();
+    return userCacheOptions || CacheDefault();
   }
 }
 function generateDefaultCacheControlHeader(userCacheOptions) {
@@ -267,7 +273,7 @@ function getKeyUrl(key) {
   return `https://shopify.dev/?${key}`;
 }
 function getCacheOption(userCacheOptions) {
-  return userCacheOptions || CacheShort();
+  return userCacheOptions || CacheDefault();
 }
 async function getItemFromCache(cache, key) {
   if (!cache)
@@ -451,26 +457,63 @@ var warnOnce = (string) => {
 };
 
 // src/version.ts
-var LIB_VERSION = "2023.7.13";
+var LIB_VERSION = "2023.10.0";
+
+// src/utils/graphql.ts
+function minifyQuery(string) {
+  return string.replace(/\s*#.*$/gm, "").replace(/\s+/gm, " ").trim();
+}
+var IS_QUERY_RE = /(^|}\s)query[\s({]/im;
+var IS_MUTATION_RE = /(^|}\s)mutation[\s({]/im;
+function assertQuery(query, callerName) {
+  if (!IS_QUERY_RE.test(query)) {
+    throw new Error(`[h2:error:${callerName}] Can only execute queries`);
+  }
+}
+function assertMutation(query, callerName) {
+  if (!IS_MUTATION_RE.test(query)) {
+    throw new Error(`[h2:error:${callerName}] Can only execute mutations`);
+  }
+}
+function throwGraphQLError({
+  response,
+  errors,
+  type,
+  query,
+  queryVariables,
+  ErrorConstructor = Error,
+  client = "storefront"
+}) {
+  const requestId = response.headers.get("x-request-id");
+  const errorMessage = (typeof errors === "string" ? errors : errors?.map?.((error) => error.message).join("\n")) || `API response error: ${response.status}`;
+  throw new ErrorConstructor(
+    `[h2:error:${client}.${type}] ` + errorMessage + (requestId ? ` - Request ID: ${requestId}` : ""),
+    {
+      cause: JSON.stringify({
+        errors,
+        requestId,
+        ...{
+          graphql: {
+            query,
+            variables: JSON.stringify(queryVariables)
+          }
+        }
+      })
+    }
+  );
+}
 
 // src/storefront.ts
 var StorefrontApiError = class extends Error {
 };
 var isStorefrontApiError = (error) => error instanceof StorefrontApiError;
-var isQueryRE = /(^|}\s)query[\s({]/im;
-var isMutationRE = /(^|}\s)mutation[\s({]/im;
-function minifyQuery(string) {
-  return string.replace(/\s*#.*$/gm, "").replace(/\s+/gm, " ").trim();
-}
 var defaultI18n = { language: "EN", country: "US" };
 function createStorefrontClient(options) {
   const {
     storefrontHeaders,
     cache,
     waitUntil,
-    buyerIp,
     i18n,
-    requestGroupId,
     storefrontId,
     ...clientOptions
   } = options;
@@ -489,9 +532,9 @@ function createStorefrontClient(options) {
   const getHeaders = clientOptions.privateStorefrontToken ? getPrivateTokenHeaders : getPublicTokenHeaders;
   const defaultHeaders = getHeaders({
     contentType: "json",
-    buyerIp: storefrontHeaders?.buyerIp || buyerIp
+    buyerIp: storefrontHeaders?.buyerIp || ""
   });
-  defaultHeaders[STOREFRONT_REQUEST_GROUP_ID_HEADER] = storefrontHeaders?.requestGroupId || requestGroupId || generateUUID();
+  defaultHeaders[STOREFRONT_REQUEST_GROUP_ID_HEADER] = storefrontHeaders?.requestGroupId || generateUUID();
   if (storefrontId)
     defaultHeaders[hydrogenReact.SHOPIFY_STOREFRONT_ID_HEADER] = storefrontId;
   defaultHeaders["user-agent"] = `Hydrogen ${LIB_VERSION}`;
@@ -502,11 +545,14 @@ function createStorefrontClient(options) {
     if (cookies[hydrogenReact.SHOPIFY_S])
       defaultHeaders[hydrogenReact.SHOPIFY_STOREFRONT_S_HEADER] = cookies[hydrogenReact.SHOPIFY_S];
   }
-  if (!storefrontHeaders) {
-    warnOnce(
-      H2_PREFIX_WARN + "`requestGroupId` and `buyerIp` will be deprecated in the next calendar release. Please use `getStorefrontHeaders`"
-    );
-  }
+  const cacheKeyHeader = JSON.stringify({
+    "content-type": defaultHeaders["content-type"],
+    "user-agent": defaultHeaders["user-agent"],
+    [SDK_VARIANT_HEADER]: defaultHeaders[SDK_VARIANT_HEADER],
+    [SDK_VARIANT_SOURCE_HEADER]: defaultHeaders[SDK_VARIANT_SOURCE_HEADER],
+    [SDK_VERSION_HEADER]: defaultHeaders[SDK_VERSION_HEADER],
+    [STOREFRONT_ACCESS_TOKEN_HEADER]: defaultHeaders[STOREFRONT_ACCESS_TOKEN_HEADER]
+  });
   async function fetchStorefrontApi({
     query,
     mutation,
@@ -535,22 +581,13 @@ function createStorefrontClient(options) {
     };
     const cacheKey = [
       url,
-      {
-        method: requestInit.method,
-        headers: {
-          "content-type": defaultHeaders["content-type"],
-          "user-agent": defaultHeaders["user-agent"],
-          [SDK_VARIANT_HEADER]: defaultHeaders[SDK_VARIANT_HEADER],
-          [SDK_VARIANT_SOURCE_HEADER]: defaultHeaders[SDK_VARIANT_SOURCE_HEADER],
-          [SDK_VERSION_HEADER]: defaultHeaders[SDK_VERSION_HEADER],
-          [STOREFRONT_ACCESS_TOKEN_HEADER]: defaultHeaders[STOREFRONT_ACCESS_TOKEN_HEADER]
-        },
-        body: requestInit.body
-      }
+      requestInit.method,
+      cacheKeyHeader,
+      requestInit.body
     ];
     const [body, response] = await fetchWithServerCache(url, requestInit, {
       cacheInstance: mutation ? void 0 : cache,
-      cache: cacheOptions || CacheShort(),
+      cache: cacheOptions || CacheDefault(),
       cacheKey,
       shouldCacheResponse: checkGraphQLErrors,
       waitUntil,
@@ -574,11 +611,11 @@ function createStorefrontClient(options) {
       } catch (_e) {
         errors2 = [{ message: body }];
       }
-      throwError({ ...errorOptions, errors: errors2 });
+      throwGraphQLError({ ...errorOptions, errors: errors2 });
     }
     const { data, errors } = body;
     if (errors?.length) {
-      throwError({
+      throwGraphQLError({
         ...errorOptions,
         errors,
         ErrorConstructor: StorefrontApiError
@@ -604,11 +641,7 @@ function createStorefrontClient(options) {
        */
       query: (query, payload) => {
         query = minifyQuery(query);
-        if (isMutationRE.test(query)) {
-          throw new Error(
-            "[h2:error:storefront.query] Cannot execute mutations"
-          );
-        }
+        assertQuery(query, "storefront.query");
         const result = fetchStorefrontApi({
           ...payload,
           query
@@ -632,11 +665,7 @@ function createStorefrontClient(options) {
        */
       mutate: (mutation, payload) => {
         mutation = minifyQuery(mutation);
-        if (isQueryRE.test(mutation)) {
-          throw new Error(
-            "[h2:error:storefront.mutate] Cannot execute queries"
-          );
-        }
+        assertMutation(mutation, "storefront.mutate");
         const result = fetchStorefrontApi({
           ...payload,
           mutation
@@ -679,32 +708,6 @@ function createStorefrontClient(options) {
     }
   };
 }
-function throwError({
-  response,
-  errors,
-  type,
-  query,
-  queryVariables,
-  ErrorConstructor = Error
-}) {
-  const requestId = response.headers.get("x-request-id");
-  const errorMessage = (typeof errors === "string" ? errors : errors?.map?.((error) => error.message).join("\n")) || `API response error: ${response.status}`;
-  throw new ErrorConstructor(
-    `[h2:error:storefront.${type}] ` + errorMessage + (requestId ? ` - Request ID: ${requestId}` : ""),
-    {
-      cause: JSON.stringify({
-        errors,
-        requestId,
-        ...{
-          graphql: {
-            query,
-            variables: JSON.stringify(queryVariables)
-          }
-        }
-      })
-    }
-  );
-}
 
 // src/utils/request.ts
 function getHeader(request, key) {
@@ -884,76 +887,115 @@ var graphiqlLoader = async function graphiqlLoader2({
   const url = storefront.getApiUrl();
   const accessToken = storefront.getPublicTokenHeaders()["X-Shopify-Storefront-Access-Token"];
   const favicon = `https://avatars.githubusercontent.com/u/12972006?s=48&v=4`;
+  const html = String.raw;
   return new Response(
-    `
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <title>GraphiQL</title>
-    <link rel="icon" type="image/x-icon" href="${favicon}">
-    <style>
-      body {
-        height: 100%;
-        margin: 0;
-        width: 100%;
-        overflow: hidden;
-      }
+    html`
+      <!DOCTYPE html>
+      <html lang="en">
+        <head>
+          <title>GraphiQL</title>
+          <link rel="icon" type="image/x-icon" href="${favicon}" />
+          <style>
+            body {
+              height: 100%;
+              margin: 0;
+              width: 100%;
+              overflow: hidden;
+              background-color: hsl(219, 29%, 18%);
+            }
 
-      #graphiql {
-        height: 100vh;
-      }
-    </style>
+            #graphiql {
+              height: 100vh;
+            }
 
-    <script
-      crossorigin
-      src="https://unpkg.com/react@18/umd/react.development.js"
-    ></script>
-    <script
-      crossorigin
-      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
-    ></script>
-    <link rel="stylesheet" href="https://unpkg.com/graphiql@3/graphiql.min.css" />
-  </head>
+            #graphiql > .placeholder {
+              color: slategray;
+              width: fit-content;
+              margin: 40px auto;
+              font-family: Arial;
+            }
+          </style>
 
-  <body>
-    <div id="graphiql">Loading...</div>
-    <script
-      src="https://unpkg.com/graphiql@3/graphiql.min.js"
-      type="application/javascript"
-    ></script>
-    <script>
-      const windowUrl = new URL(document.URL);
+          <script
+            crossorigin
+            src="https://unpkg.com/react@18/umd/react.development.js"
+          ></script>
+          <script
+            crossorigin
+            src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
+          ></script>
+          <link
+            rel="stylesheet"
+            href="https://unpkg.com/graphiql@3/graphiql.min.css"
+          />
+          <link
+            rel="stylesheet"
+            href="https://unpkg.com/@graphiql/plugin-explorer/dist/style.css"
+          />
+        </head>
 
-      let query = '{\\n  shop {\\n    name\\n  }\\n}';
-      if (windowUrl.searchParams.has('query')) {
-        query = decodeURIComponent(windowUrl.searchParams.get('query') ?? '');
-        // Prettify query
-        if (query) query = GraphiQL.GraphQL.print(GraphiQL.GraphQL.parse(query));
-      }
+        <body>
+          <div id="graphiql">
+            <div class="placeholder">Loading GraphiQL...</div>
+          </div>
 
-      let variables;
-      if (windowUrl.searchParams.has('variables')) {
-        variables = decodeURIComponent(windowUrl.searchParams.get('variables') ?? '');
-        // Prettify variables
-        if (variables) variables = JSON.stringify(JSON.parse(variables), null, 2);
-      }
+          <script
+            src="https://unpkg.com/graphiql@3/graphiql.min.js"
+            type="application/javascript"
+            crossorigin="anonymous"
+          ></script>
+          <script
+            src="https://unpkg.com/@graphiql/plugin-explorer/dist/index.umd.js"
+            type="application/javascript"
+            crossorigin="anonymous"
+          ></script>
 
-      const root = ReactDOM.createRoot(document.getElementById('graphiql'));
-      root.render(
-        React.createElement(GraphiQL, {
-          fetcher: GraphiQL.createFetcher({
-            url: '${url}',
-            headers: {'X-Shopify-Storefront-Access-Token': '${accessToken}'}
-          }),
-          defaultEditorToolsVisibility: true,
-          query,
-          variables
-        }),
-      );
-    </script>
-  </body>
-</html>
-  `,
+          <script>
+            const windowUrl = new URL(document.URL);
+
+            let query = '{ shop { name } }';
+            if (windowUrl.searchParams.has('query')) {
+              query = decodeURIComponent(
+                windowUrl.searchParams.get('query') ?? query,
+              );
+            }
+
+            // Prettify query
+            query = GraphiQL.GraphQL.print(GraphiQL.GraphQL.parse(query));
+
+            let variables;
+            if (windowUrl.searchParams.has('variables')) {
+              variables = decodeURIComponent(
+                windowUrl.searchParams.get('variables') ?? '',
+              );
+            }
+
+            // Prettify variables
+            if (variables) {
+              variables = JSON.stringify(JSON.parse(variables), null, 2);
+            }
+
+            const root = ReactDOM.createRoot(
+              document.getElementById('graphiql'),
+            );
+            root.render(
+              React.createElement(GraphiQL, {
+                fetcher: GraphiQL.createFetcher({
+                  url: '${url}',
+                  headers: {
+                    'X-Shopify-Storefront-Access-Token': '${accessToken}',
+                  },
+                }),
+                defaultEditorToolsVisibility: true,
+                query,
+                variables,
+                plugins: [GraphiQLPluginExplorer.explorerPlugin()],
+              }),
+            );
+          </script>
+        </body>
+      </html>
+    `,
     { status: 200, headers: { "content-type": "text/html" } }
   );
 };
@@ -1297,7 +1339,7 @@ function Seo({ debug }) {
         return [];
       }
       if (handleSeo) {
-        return recursivelyInvokeOrReturn(handle.seo, routeData);
+        return recursivelyInvokeOrReturn(handleSeo, routeData);
       } else {
         return [loaderSeo];
       }
@@ -1563,6 +1605,456 @@ function getPaginationVariables(request, options = { pageBy: 20 }) {
   const variables = isPrevious ? prevPage : nextPage;
   return variables;
 }
+
+// src/customer/BadRequest.ts
+var BadRequest = class extends Response {
+  constructor(message, helpMessage) {
+    if (helpMessage && true) {
+      console.error("Customer Account API Error: " + helpMessage);
+    }
+    super(`Bad request: ${message}`, { status: 400 });
+  }
+};
+
+// src/customer/auth.helpers.ts
+var USER_AGENT = `Shopify Hydrogen ${LIB_VERSION}`;
+var CUSTOMER_API_CLIENT_ID = "30243aa5-17c1-465a-8493-944bcc4e88aa";
+function redirect2(path, options = {}) {
+  const headers = options.headers ? new Headers(options.headers) : new Headers({});
+  headers.set("location", path);
+  return new Response(null, { status: options.status || 302, headers });
+}
+async function refreshToken({
+  session,
+  customerAccountId,
+  customerAccountUrl,
+  origin
+}) {
+  const newBody = new URLSearchParams();
+  const refreshToken2 = session.get("refresh_token");
+  if (!refreshToken2)
+    throw new BadRequest(
+      "Unauthorized",
+      "No refresh_token in the session. Make sure your session is configured correctly and passed to `createCustomerClient`."
+    );
+  newBody.append("grant_type", "refresh_token");
+  newBody.append("refresh_token", refreshToken2);
+  newBody.append("client_id", customerAccountId);
+  const headers = {
+    "content-type": "application/x-www-form-urlencoded",
+    "User-Agent": USER_AGENT,
+    Origin: origin
+  };
+  const response = await fetch(`${customerAccountUrl}/auth/oauth/token`, {
+    method: "POST",
+    headers,
+    body: newBody
+  });
+  if (!response.ok) {
+    const text = await response.text();
+    throw new Response(text, {
+      status: response.status,
+      headers: {
+        "Content-Type": "text/html; charset=utf-8"
+      }
+    });
+  }
+  const { access_token, expires_in, id_token, refresh_token } = await response.json();
+  session.set("customer_authorization_code_token", access_token);
+  session.set(
+    "expires_at",
+    new Date((/* @__PURE__ */ new Date()).getTime() + (expires_in - 120) * 1e3).getTime() + ""
+  );
+  session.set("id_token", id_token);
+  session.set("refresh_token", refresh_token);
+  const customerAccessToken = await exchangeAccessToken(
+    session,
+    customerAccountId,
+    customerAccountUrl,
+    origin
+  );
+  session.set("customer_access_token", customerAccessToken);
+}
+function clearSession(session) {
+  session.unset("code-verifier");
+  session.unset("customer_authorization_code_token");
+  session.unset("expires_at");
+  session.unset("id_token");
+  session.unset("refresh_token");
+  session.unset("customer_access_token");
+  session.unset("state");
+  session.unset("nonce");
+}
+async function checkExpires({
+  locks,
+  expiresAt,
+  session,
+  customerAccountId,
+  customerAccountUrl,
+  origin
+}) {
+  if (parseInt(expiresAt, 10) - 1e3 < (/* @__PURE__ */ new Date()).getTime()) {
+    try {
+      if (!locks.refresh)
+        locks.refresh = refreshToken({
+          session,
+          customerAccountId,
+          customerAccountUrl,
+          origin
+        });
+      await locks.refresh;
+      delete locks.refresh;
+    } catch (error) {
+      clearSession(session);
+      if (error && error.status !== 401) {
+        throw error;
+      } else {
+        throw new BadRequest(
+          "Unauthorized",
+          "Login before querying the Customer Account API."
+        );
+      }
+    }
+  }
+}
+async function generateCodeVerifier() {
+  const rando = generateRandomCode();
+  return base64UrlEncode(rando);
+}
+async function generateCodeChallenge(codeVerifier) {
+  const digestOp = await crypto.subtle.digest(
+    { name: "SHA-256" },
+    new TextEncoder().encode(codeVerifier)
+  );
+  const hash = convertBufferToString(digestOp);
+  return base64UrlEncode(hash);
+}
+function generateRandomCode() {
+  const array = new Uint8Array(32);
+  crypto.getRandomValues(array);
+  return String.fromCharCode.apply(null, Array.from(array));
+}
+function base64UrlEncode(str) {
+  const base64 = btoa(str);
+  return base64.replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
+}
+function convertBufferToString(hash) {
+  const uintArray = new Uint8Array(hash);
+  const numberArray = Array.from(uintArray);
+  return String.fromCharCode(...numberArray);
+}
+async function generateState() {
+  const timestamp = Date.now().toString();
+  const randomString = Math.random().toString(36).substring(2);
+  return timestamp + randomString;
+}
+async function exchangeAccessToken(session, customerAccountId, customerAccountUrl, origin) {
+  const clientId = customerAccountId;
+  const accessToken = session.get("customer_authorization_code_token");
+  if (!accessToken)
+    throw new BadRequest(
+      "Unauthorized",
+      "No access token found in the session. Make sure your session is configured correctly and passed to `createCustomerClient`."
+    );
+  const body = new URLSearchParams();
+  body.append("grant_type", "urn:ietf:params:oauth:grant-type:token-exchange");
+  body.append("client_id", clientId);
+  body.append("audience", CUSTOMER_API_CLIENT_ID);
+  body.append("subject_token", accessToken);
+  body.append(
+    "subject_token_type",
+    "urn:ietf:params:oauth:token-type:access_token"
+  );
+  body.append("scopes", "https://api.customers.com/auth/customer.graphql");
+  const headers = {
+    "content-type": "application/x-www-form-urlencoded",
+    "User-Agent": USER_AGENT,
+    Origin: origin
+  };
+  const response = await fetch(`${customerAccountUrl}/auth/oauth/token`, {
+    method: "POST",
+    headers,
+    body
+  });
+  const data = await response.json();
+  if (data.error) {
+    throw new BadRequest(data.error_description);
+  }
+  return data.access_token;
+}
+function getNonce(token) {
+  return decodeJwt(token).payload.nonce;
+}
+function decodeJwt(token) {
+  const [header, payload, signature] = token.split(".");
+  const decodedHeader = JSON.parse(atob(header));
+  const decodedPayload = JSON.parse(atob(payload));
+  return {
+    header: decodedHeader,
+    payload: decodedPayload,
+    signature
+  };
+}
+
+// src/csp/nonce.ts
+function generateNonce() {
+  return toHexString(randomUint8Array());
+}
+function randomUint8Array() {
+  try {
+    return crypto.getRandomValues(new Uint8Array(16));
+  } catch (e) {
+    return new Uint8Array(16).map(() => Math.random() * 255 | 0);
+  }
+}
+function toHexString(byteArray) {
+  return Array.from(byteArray, function(byte) {
+    return ("0" + (byte & 255).toString(16)).slice(-2);
+  }).join("");
+}
+
+// src/customer/customer.ts
+function createCustomerClient({
+  session,
+  customerAccountId,
+  customerAccountUrl,
+  customerApiVersion = "2023-10",
+  request,
+  waitUntil
+}) {
+  if (!request?.url) {
+    throw new Error(
+      "[h2:error:createCustomerClient] The request object does not contain a URL."
+    );
+  }
+  const url = new URL(request.url);
+  const origin = url.protocol === "http:" ? url.origin.replace("http", "https") : url.origin;
+  const locks = {};
+  const logSubRequestEvent = (query, startTime) => {
+    globalThis.__H2O_LOG_EVENT?.({
+      eventType: "subrequest",
+      url: `https://shopify.dev/?${hashKey([
+        `Customer Account `,
+        /((query|mutation) [^\s\(]+)/g.exec(query)?.[0] || query.substring(0, 10)
+      ])}`,
+      startTime,
+      waitUntil,
+      ...getDebugHeaders(request)
+    });
+  } ;
+  async function fetchCustomerAPI({
+    query,
+    type,
+    variables = {}
+  }) {
+    const accessToken = session.get("customer_access_token");
+    const expiresAt = session.get("expires_at");
+    if (!accessToken || !expiresAt)
+      throw new BadRequest(
+        "Unauthorized",
+        "Login before querying the Customer Account API."
+      );
+    await checkExpires({
+      locks,
+      expiresAt,
+      session,
+      customerAccountId,
+      customerAccountUrl,
+      origin
+    });
+    const startTime = (/* @__PURE__ */ new Date()).getTime();
+    const response = await fetch(
+      `${customerAccountUrl}/account/customer/api/${customerApiVersion}/graphql`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "User-Agent": USER_AGENT,
+          Origin: origin,
+          Authorization: accessToken
+        },
+        body: JSON.stringify({
+          operationName: "SomeQuery",
+          query,
+          variables
+        })
+      }
+    );
+    logSubRequestEvent?.(query, startTime);
+    const body = await response.text();
+    const errorOptions = {
+      response,
+      type,
+      query,
+      queryVariables: variables,
+      errors: void 0,
+      client: "customer"
+    };
+    if (!response.ok) {
+      let errors;
+      try {
+        errors = parseJSON(body);
+      } catch (_e) {
+        errors = [{ message: body }];
+      }
+      throwGraphQLError({ ...errorOptions, errors });
+    }
+    try {
+      return parseJSON(body).data;
+    } catch (e) {
+      throwGraphQLError({ ...errorOptions, errors: [{ message: body }] });
+    }
+  }
+  return {
+    login: async () => {
+      const loginUrl = new URL(customerAccountUrl + "/auth/oauth/authorize");
+      const state = await generateState();
+      const nonce = await generateNonce();
+      loginUrl.searchParams.set("client_id", customerAccountId);
+      loginUrl.searchParams.set("scope", "openid email");
+      loginUrl.searchParams.append("response_type", "code");
+      loginUrl.searchParams.append("redirect_uri", origin + "/authorize");
+      loginUrl.searchParams.set(
+        "scope",
+        "openid email https://api.customers.com/auth/customer.graphql"
+      );
+      loginUrl.searchParams.append("state", state);
+      loginUrl.searchParams.append("nonce", nonce);
+      const verifier = await generateCodeVerifier();
+      const challenge = await generateCodeChallenge(verifier);
+      session.set("code-verifier", verifier);
+      session.set("state", state);
+      session.set("nonce", nonce);
+      loginUrl.searchParams.append("code_challenge", challenge);
+      loginUrl.searchParams.append("code_challenge_method", "S256");
+      return redirect2(loginUrl.toString(), {
+        headers: {
+          "Set-Cookie": await session.commit()
+        }
+      });
+    },
+    logout: async () => {
+      const idToken = session.get("id_token");
+      clearSession(session);
+      return redirect2(
+        `${customerAccountUrl}/auth/logout?id_token_hint=${idToken}`,
+        {
+          status: 302,
+          headers: {
+            "Set-Cookie": await session.commit()
+          }
+        }
+      );
+    },
+    isLoggedIn: async () => {
+      const expiresAt = session.get("expires_at");
+      if (!session.get("customer_access_token") || !expiresAt)
+        return false;
+      const startTime = (/* @__PURE__ */ new Date()).getTime();
+      try {
+        await checkExpires({
+          locks,
+          expiresAt,
+          session,
+          customerAccountId,
+          customerAccountUrl,
+          origin
+        });
+        logSubRequestEvent?.(" check expires", startTime);
+      } catch {
+        return false;
+      }
+      return true;
+    },
+    mutate(mutation, options) {
+      mutation = minifyQuery(mutation);
+      assertMutation(mutation, "customer.mutate");
+      return fetchCustomerAPI({ query: mutation, type: "mutation", ...options });
+    },
+    query(query, options) {
+      query = minifyQuery(query);
+      assertQuery(query, "customer.query");
+      return fetchCustomerAPI({ query, type: "query", ...options });
+    },
+    authorize: async (redirectPath = "/") => {
+      const code = url.searchParams.get("code");
+      const state = url.searchParams.get("state");
+      if (!code || !state) {
+        clearSession(session);
+        throw new BadRequest(
+          "Unauthorized",
+          "No code or state parameter found in the redirect URL."
+        );
+      }
+      if (session.get("state") !== state) {
+        clearSession(session);
+        throw new BadRequest(
+          "Unauthorized",
+          "The session state does not match the state parameter. Make sure that the session is configured correctly and passed to `createCustomerClient`."
+        );
+      }
+      const clientId = customerAccountId;
+      const body = new URLSearchParams();
+      body.append("grant_type", "authorization_code");
+      body.append("client_id", clientId);
+      body.append("redirect_uri", origin + "/authorize");
+      body.append("code", code);
+      const codeVerifier = session.get("code-verifier");
+      if (!codeVerifier)
+        throw new BadRequest(
+          "Unauthorized",
+          "No code verifier found in the session. Make sure that the session is configured correctly and passed to `createCustomerClient`."
+        );
+      body.append("code_verifier", codeVerifier);
+      const headers = {
+        "content-type": "application/x-www-form-urlencoded",
+        "User-Agent": USER_AGENT,
+        Origin: origin
+      };
+      const response = await fetch(`${customerAccountUrl}/auth/oauth/token`, {
+        method: "POST",
+        headers,
+        body
+      });
+      if (!response.ok) {
+        throw new Response(await response.text(), {
+          status: response.status,
+          headers: {
+            "Content-Type": "text/html; charset=utf-8"
+          }
+        });
+      }
+      const { access_token, expires_in, id_token, refresh_token } = await response.json();
+      const sessionNonce = session.get("nonce");
+      const responseNonce = await getNonce(id_token);
+      if (sessionNonce !== responseNonce) {
+        throw new BadRequest(
+          "Unauthorized",
+          `Returned nonce does not match: ${sessionNonce} !== ${responseNonce}`
+        );
+      }
+      session.set("customer_authorization_code_token", access_token);
+      session.set(
+        "expires_at",
+        new Date((/* @__PURE__ */ new Date()).getTime() + (expires_in - 120) * 1e3).getTime() + ""
+      );
+      session.set("id_token", id_token);
+      session.set("refresh_token", refresh_token);
+      const customerAccessToken = await exchangeAccessToken(
+        session,
+        customerAccountId,
+        customerAccountUrl,
+        origin
+      );
+      session.set("customer_access_token", customerAccessToken);
+      return redirect2(redirectPath, {
+        headers: {
+          "Set-Cookie": await session.commit()
+        }
+      });
+    }
+  };
+}
 var INPUT_NAME = "cartFormInput";
 function CartForm({
   children,
@@ -2256,10 +2748,10 @@ function createCartHandler(options) {
     },
     deleteMetafield: cartMetafieldDeleteDefault(mutateOptions)
   };
-  if ("customMethods__unstable" in options) {
+  if ("customMethods" in options) {
     return {
       ...methods,
-      ...options.customMethods__unstable ?? {}
+      ...options.customMethods ?? {}
     };
   } else {
     return methods;
@@ -2356,25 +2848,6 @@ function useVariantPath(handle, productPath) {
     };
   }, [pathname, search, handle, productPath]);
 }
-
-// src/csp/nonce.ts
-function generateNonce() {
-  return toHexString(randomUint8Array());
-}
-function randomUint8Array() {
-  try {
-    return crypto.getRandomValues(new Uint8Array(16));
-  } catch (e) {
-    return new Uint8Array(16).map(() => Math.random() * 255 | 0);
-  }
-}
-function toHexString(byteArray) {
-  return Array.from(byteArray, function(byte) {
-    return ("0" + (byte & 255).toString(16)).slice(-2);
-  }).join("");
-}
-
-// src/csp/csp.ts
 var NonceContext = react.createContext(void 0);
 var NonceProvider = NonceContext.Provider;
 var useNonce = () => react.useContext(NonceContext);
@@ -2427,9 +2900,8 @@ var Script = react.forwardRef(
 function useOptimisticData(identifier) {
   const fetchers = react$1.useFetchers();
   const data = {};
-  for (const fetcher of fetchers) {
-    const formData = fetcher.submission?.formData;
-    if (formData && formData.get("optimistic-identifier") === identifier) {
+  for (const { formData } of fetchers) {
+    if (formData?.get("optimistic-identifier") === identifier) {
       try {
         if (formData.has("optimistic-data")) {
           const dataInForm = JSON.parse(
@@ -2466,7 +2938,7 @@ function OptimisticInput({ id, data }) {
 //! @see https://shopify.dev/docs/api/storefront/latest/mutations/cartNoteUpdate
 //! @see https://shopify.dev/docs/api/storefront/latest/mutations/cartSelectedDeliveryOptionsUpdate
 //! @see https://shopify.dev/docs/api/storefront/latest/mutations/cartMetafieldsSet
-//! @see https://shopify.dev/docs/api/storefront/2023-07/mutations/cartMetafieldDelete
+//! @see https://shopify.dev/docs/api/storefront/2023-10/mutations/cartMetafieldDelete
 
 Object.defineProperty(exports, 'AnalyticsEventName', {
   enumerable: true,
@@ -2580,6 +3052,7 @@ exports.cartSelectedDeliveryOptionsUpdateDefault = cartSelectedDeliveryOptionsUp
 exports.cartSetIdDefault = cartSetIdDefault;
 exports.createCartHandler = createCartHandler;
 exports.createContentSecurityPolicy = createContentSecurityPolicy;
+exports.createCustomerClient__unstable = createCustomerClient;
 exports.createStorefrontClient = createStorefrontClient;
 exports.createWithCache = createWithCache;
 exports.generateCacheControlHeader = generateCacheControlHeader;