1 files changed, 38 insertions, 0 deletions
diff --git a/web/frontend/hooks/useAuthenticatedFetch.js b/web/frontend/hooks/useAuthenticatedFetch.js
new file mode 100644
index 0000000..e5f36a8
--- /dev/null
+++ b/web/frontend/hooks/useAuthenticatedFetch.js
@@ -0,0 +1,38 @@
+/**
+ * A hook that returns an auth-aware fetch function.
+ * @desc The returned fetch function that matches the browser's fetch API
+ * See: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
+ * It will provide the following functionality:
+ *
+ * 1. Add a `X-Shopify-Access-Token` header to the request.
+ * 2. Check response for `X-Shopify-API-Request-Failure-Reauthorize` header.
+ * 3. Redirect the user to the reauthorization URL if the header is present.
+ *
+ * @returns {Function} fetch function
+ */
+function useAuthenticatedFetch() {
+  const app = useAppBridge();
+  const fetchFunction = authenticatedFetch(app);
+
+  return async (uri, options) => {
+    const response = await fetchFunction(uri, options);
+    checkHeadersForReauthorization(response.headers, app);
+    return response;
+  };
+}
+
+function checkHeadersForReauthorization(headers, app) {
+  if (headers.get("X-Shopify-API-Request-Failure-Reauthorize") === "1") {
+    const authUrlHeader =
+      headers.get("X-Shopify-API-Request-Failure-Reauthorize-Url") ||
+      `/api/auth`;
+
+    const redirect = Redirect.create(app);
+    redirect.dispatch(
+      Redirect.Action.REMOTE,
+      authUrlHeader.startsWith("/")
+        ? `https://${window.location.host}${authUrlHeader}`
+        : authUrlHeader
+    );
+  }
+}