App redirecting leaving embedded view

Retired Boards Appdev Tools

Topic summary

An embedded Shopify app is unintentionally escaping its iframe when users click on it, redirecting to a non-embedded view. The issue occurs during the Redirect.create() call after initializing the app with App Bridge.

Key Technical Details:

  • Using App Bridge versions ^3.2.6 for both @shopify/app-bridge and @shopify/app-bridge-utils
  • Code is properly wrapped in isShopifyEmbedded() check
  • Network errors appear in console, though some are caused by ad blocker interference
  • The decoded base64 host parameter shows [store name].myshopify.com/admin

Current Status:

  • App becomes unembedded once (not looping)
  • Does not redirect back to embedded view
  • Storing host variable before createApp() call did not resolve the issue
  • Problem persists even with ad blocker disabled

Suggested Troubleshooting:

  • Verify OAuth implementation for embedded apps
  • Ensure host parameter is available before creating App Bridge instance
  • Review authorization flow documentation

The discussion remains open with no resolution yet identified.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

When a user clicks on our app, it tries to load in an iframe but is then escaped (unintentionally) to a non-embedded screen.

Below is the code that is running right before escaping the iframe.

this.shopifyApp = createApp({
          apiKey: 'my api key',
          host: 'host from shopify'
        })

        Redirect.create(this.shopifyApp).dispatch(Redirect.Action.REMOTE, permissionUrl)

It appears that the Shopify code is erroring with this particular error…

A network failure may have prevented the request from completing

Also, there are a bunch of the following errors…

https://monorail-edge.shopifysvc.com/v1/produce net::ERR_BLOCKED_BY_CLIENT

2

Hi SnailBlast!

Sorry to hear about your redirection issues. Could you confirm which version of app-bridge you’re running?

To my mind this seems like an issue with Oauth. If you’re trying to build an embedded app, you need to first check isShopifyEmbedded() before redirecting. There’s more info here: https://shopify.dev/apps/tools/app-bridge/getting-started/app-setup#authorize-with-oauth

Let us know if this helps!

  • M
3

Here are the App Bridge versions I am using…

"@shopify/app-bridge": "^3.2.6",
"@shopify/app-bridge-utils": "^3.2.6",

The code that I posted above is wrapped in the “isShopifyEmbedded()” check as below…

if (isShopifyEmbedded()) {
        this.shopifyApp = createApp({
          apiKey: this.$config.shopifyApiKey,
          host: this.$route.query.host
        })

//fails here and redirects
        Redirect.create(this.shopifyApp).dispatch(Redirect.Action.REMOTE, permissionUrl)
        // Otherwise, redirect using the `window` object
      } else {
        window.location.assign(permissionUrl)
      }
4

OK, a couple of questions for you:

  1. Does the app become unembedded just once, or are you stuck in a loop?
  2. Does the app eventually redirect back? It might take a few seconds depending on the app and your internet connection.
  3. Per the “Retrieve the host” doc: “It is a good idea to re-use the same App Bridge instance because the host parameter is only guaranteed on initial load of your app.” Can you try storing the host in a variable before your call to createApp, and then checking to ensure it is actually available before proceeding?

Looking forward to your answers.

5

Below are my answers:

  1. It becomes unembedded once.
  2. It doesn’t eventually redirect back
  3. I changed this to store the host in a variable on load and it didn’t change the behavior. Unsure if this matters, but the host when base64 decoded is “[store name].myshopify.com/admin”
6

The error messages you are getting are due to you using an ad blocker. However, even if you disable it, your main problem will be persist just like before. I am getting the same problem.