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.

5

I’ve ran into this issue as well. As soon as the VITE_SHOPIFY_API_KEY is not defined/replaced, or the entire meta tag is missing, it just silently fails. I’ve wasted over 2 days on this issue and I haven’t been able to figure out why, other than that “step into” ~57x stops somewhere on minified app-bridge.js code.

For some reason this happens in dev mode only, while in build the API key gets inserted properly.

I’ve opened an issue on github, but seeing this issue is from november 2024…?! App bridge 4 not working in dev · Issue #347 · Shopify/shopify-frontend-template-react · GitHub

What is going on? Why are these issues not being fixed? In order to approve our app we need to move to app bridge 4, but we literally can’t because the migration documentation is incomplete and things simply don’t work.

6

SOLUTION: make sure that your env variables are set properly. in my case I set correct values and it works perfectly

7

Hi @bolnik - thanks for posting your solution!

8

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.
Is there a known issue with the App Bridge CDN,idToken in embedded iframe contexts? Or is there a recommended initialization pattern or polyfill to ensure idToken resolves properly ?

For reference, I’m using the following CDN link in the 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.

9

@Mohd_Faisal

Can you double check that your REACT_APP_SHOPIFY_API_KEY is rendering correctly?

Here’s a JS snippet you can run in your browser console:

// outputs your public Shopify API key that should be in the meta element:
console.log(document.querySelector('meta[name="shopify-api-key"]')?.content);

Please make sure it’s your public key, not your private one.