App fails to open as embedded after installation, opens in a new tab

Shopify Discussion
1

Recently, I migrated our app from a non-embedded to an embedded setup. I used isShopifyEmbedded() utility from the app-bridge to check whether the app is embedded or not, a setting configured in the partner panel. In cases where isShopifyEmbedded() and appBridgeConfig.host are true, I wrap the app within the Provider from app-bridge using the config provided in the index.js file:

const appBridgeConfig = {
  apiKey: environment.APP_API_KEY,
  host: new URLSearchParams(location.search).get("host") || sessionStorage.getItem('host'),
  forceRedirect: true,
};

However, immediately after installation, isShopifyEmbedded() returns false, even when the embedded setting of the app is enabled. This results in my app redirecting to another tab instead of opening inside the Shopify admin. After closing the tab, the utility returns true, and then my app opens inside the Shopify admin as intended.

How can I resolve this issue where the app doesn’t open inside the Shopify admin after installation?