Session token not resolved locally

[andriusvo]

While developing Shopify Embedded app locally, session token is not resolved. I'm using ngrok as per guides in Shopify.

To Reproduce

Initializing an app with my ngrok host:

  const [appBridgeConfig] = useState(() => {
      const host = btoa('xxx.eu.ngrok.io/')
    window.__SHOPIFY_DEV_HOST = host;

    return {
      host,
      apiKey: process.env.CLIENT_ID,
      forceRedirect: false,
    };
  });

Same host is in Partners Dashboard. Using authenticatedFetch function:

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

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

And nothing is printed in console after fetchFunction. While using Demo store for app testing - it works like a charm.

Contextual information

Packages and versions

  "@shopify/app-bridge": "^3.7.2",
  "@shopify/app-bridge-react": "^3.7.2",
  "@shopify/app-bridge-utils": "^3.5.1",

Platform

• OS: macOS
• App: Chrome

Additional context

Add any other context about the problem here, such as your app’s configuration (Node, Next.js, Rails).