App redirecting leaving embedded view

SnailBlast
Shopify Partner
4 0 0

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

Replies 5 (5)

MitchLillie
Shopify Staff
5 0 1

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

To learn more visit the Shopify Help Center or the Community Blog.

SnailBlast
Shopify Partner
4 0 0

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
Shopify Staff
5 0 1

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.

To learn more visit the Shopify Help Center or the Community Blog.

SnailBlast
Shopify Partner
4 0 0

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
Shopify Partner
28 2 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.