useAppBridge Hook: idToken Method Neither Resolves Nor Throws an Error

App Bridge
1

When using the useAppBridge hook in my Shopify app, the idToken method does not behave as expected. The promise neither resolves with a token nor catches an error.

Example code:

import { useAppBridge } from '@shopify/app-bridge-react';
import { useEffect } from 'react';

const App = () => {
  const shopify = useAppBridge();

  useEffect(() => {
    shopify
      .idToken()
      .then((token) => {console.log("Token is", token)})
      .catch((err) => {console.log("Error getting session token", err)});
  }, []);

  return <div>App</div>;
};

export default App;

The promise from shopify.idToken() should resolve with a token, or catch an error if something goes wrong, but the promise does not resolve or reject. The console.log statements are never executed.

Additional Info:

  • App Bridge Version: @shopify/app-bridge-react": "4.1.3
  • App: React 18.3.1 with Vite 5.3.5

Also, I have set up the meta tag and script in my index.html

      <meta name="shopify-api-key" content="%VITE_SHOPIFY_API_KEY%" />
      <script src="https://cdn.shopify.com/shopifycloud/app-bridge.js"></script>
2

Hmm, could you try to debug with these tests?

  1. Make sure you have managed installation enabled. Without that Shopify is expecting you to perform OAuth by hand and won’t provide the session token.

  2. Are you certain that <App> is being mounted? Perhaps place a console.log('mounted') in the useEffect before the shopify` call.

  3. Are you seeing the actual population of the VITE_SHOPIFY_API_KEY in the <head> of your iframe’d app?

3

I’ve been running different tests based on the points you mention, and there are no problems.

In one of those tests I noticed that all the fetch requests made with the native Fetch API are not executed, when I open the devtools and check I don’t see any request being made when it should be. On the other hand, when I make them with axios they are executed.

4

In one of those tests I noticed that all the fetch requests made with the native Fetch API are not executed, when I open the devtools and check I don’t see any request being made when it should be. On the other hand, when I make them with axios they are executed.

That’s a clue.

Maybe there’s some other package or script on the page that is monkey patching the browser fetch.

There might be a way to tell in the Sources tab in Chrome if there’s a script adding to the fetch call.