Shopify App Bridge React v4 - host becomes empty after first navigation

App Bridge
1

I am following the latest Shopify App Bridge React docs (version 4.x.x). According to the documentation, the Provider setup is removed and instead the App Bridge script is added via CDN in the index.html, along with the API key in a meta tag like this:

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

In my React app, I am using App Bridge like this:

import { useAppBridge } from '@shopify/app-bridge-react';
import Index from './Index';
import Common from './Helpers/Common';
import { Redirect } from "@shopify/app-bridge/actions";
import { useRef } from 'react';

export default function IndexWrapper() {
  const Shopify = useAppBridge();
  const appRef = useRef(Common.createApp());
  const redirectRef = useRef(Redirect.create(appRef.current));
  return <Index Shopify={Shopify} app={appRef.current} redirect={redirectRef.current} />;
}

When I load the app initially, Shopify logs with a valid host and origin like this:

{
  "config": {
    "apiKey": "API_KEY",
    "host": "YWRtaW4u...............................tZGV2",
    "shop": "my-store.myshopify.com"
  },
  "origin": "https://admin.shopify.com",
  ...
}

But after the first in-app navigation using Redirect, the host becomes empty and the origin also changes:

{
  "config": {
    "apiKey": "API_KEY",
    "host": "",
    "shop": "my-store.myshopify.com"
  },
  "origin": "https://my-store.myshopify.com",
  ...
}

If I reload the page, then everything is correct again.

I used Redirect to navigate from one screen to another inside the embedded app:

this.props.redirect.dispatch(
  Redirect.Action.APP,
  BUILD_VERSION_EXTENSION + '/dashboard'
);

I expected the Shopify object to remain consistent after navigation. But instead, after the first redirect, the host value becomes an empty string and origin switches from https://admin.shopify.com to https://my-store.myshopify.com. When I reload the page, the values are consistent again. I am also using useNavigate hook at many points for navigation. I am also using anchor tags at many places.

Why does this happen? How can I fix it so host remains populated on all navigations? Let me know what more details I need to provide to help debug this properly.

2

Hi @Work_At_Win

App Bridge 4.x no longer uses the Provider or manual host config. Instead, it relies on the App Bridge script loaded via CDN and the API key in a meta tag. The host is automatically managed by the script and is only guaranteed to be present on the initial load of your app.

This means that you must preserve the host param on all navigations within your app.
Use the navigation API or ensure your own navigation logic always includes the host, and avoid using plain anchor tags or navigation methods that drop query parameters.