I’m encountering an issue with an embedded React app using Shopify App Bridge via the CDN. Specifically, calling window.shopify.idToken() doesn’t behave as expected—the promise neither resolves with a token nor rejects with an error, so it effectively hangs. In the same embedded context, my native fetch-based API calls also hang or never complete. However, the exact same requests work reliably when switched to axios (XHR-based). Migrating all calls to axios isn’t feasible, as there are hundreds of endpoints.
Is there a known issue with the App Bridge CDN, fetch, or idToken in embedded iframe contexts? Or is there a recommended initialization pattern or polyfill to ensure idToken resolves properly and fetch behaves as expected?
For reference, I’m using the following CDN link in the <head> tag of my index.html file:
<meta name="shopify-api-key" content="%REACT_APP_SHOPIFY_API_KEY%" />
<script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>
I’m also using the REACT_APP_SHOPIFY_API_KEY environment variable. When I log window.shopify, I get the expected object, which indicates that App Bridge has been initialized correctly. I also ensure that all API calls are triggered only after window.shopify is available.
Please help—I’m stuck and have already posted about my issues but haven’t received any replies. Any guidance or insight would be greatly appreciated.