App redirecting leaving embedded view

[SnailBlast]

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

[MitchLillie]

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

[SnailBlast]

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)
      }

[MitchLillie]

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.

[SnailBlast]

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"

[zhicheng1]

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.