shopify-app-bridge AuthenticatedFetch not returning response headers for reauthorization

Question

I am building an embedded app in Shopify using the shopify-app-react template.

In there is an authenticatedFetch hook that looks like below (logging added by me)

export function useAuthenticatedFetch() {
  const app = useAppBridge();
  const fetchFunction = authenticatedFetch(app);

  return async (uri, options) => {
    console.log("opts", uri, options);
    const response = await fetchFunction(uri, options);
    console.log("response", response);
    checkHeadersForReauthorization(response.headers, app);
    return response;
  };
}

function checkHeadersForReauthorization(headers, app) {
  console.log("headers", headers);
  if (headers.get("X-Shopify-API-Request-Failure-Reauthorize") === "1") {
    const authUrlHeader =
      headers.get("X-Shopify-API-Request-Failure-Reauthorize-Url") ||
      `/api/auth`;

    console.log("url", authUrlHeader);

    const redirect = Redirect.create(app);
    redirect.dispatch(
      Redirect.Action.REMOTE,
      authUrlHeader.startsWith("/")
        ? `https://${window.location.host}${authUrlHeader}`
        : authUrlHeader
    );
  }
}

When using this fetch hook to make a request, the request looks something like below

However the logging ends up looking something like this

It looks like the fetch response in code is not matching the fetch response headers in the browser, and thus I can't get a redirect for reauthorization. Does anyone have any tips?

Answer 1

This was a cors issue, as the app frontend is hosted on s3 and the backend via api gateway. The below answer helped me understand it a little more and the solution was to add Access-Control-Expose-Headers for the 2 shopify headers to api gateway.

https://stackoverflow.com/a/56959114/1422679