Using the new @shopify/app-bridge with @shopify/polaris-react

Solved
New Member
2 0 1

An update on my end, to anybody else that finds their way here. 

 

I was able to correct this rather quickly, (although hacky) by adding an `/auth` route to react-router, that grabs the query string parameters, and redirects the whole thing to my server infrastructure where I handle authentication state checks. 

 

const App: React.SFC = () => {
  return (
    <Router>
      <Route path="/auth" exact render={() => window.location.href = REDIRECT_URL  } />
      <Route path="/a" render={() => <AuthRoutes {...props} />} />
    </Router> 
  )
}

 

 

0 Likes

I encountered the same issue, although my app front-end and back-end is running on the same server, and the localOrigin matches the App URL specified in Partner Dashboard. After 2 hours, I've finally figured out what was wrong. In my case it was the shopOrigin starting with https://

 

 

var app = AppBridge.createApp({
    apiKey: "<%= api_key %>",
    shopOrigin: "https://<%= shop %>.myshopify.com",
});

 

 

These options used to work with EASDK, but are causing an error with App Bridge.

Chrome Dev Console was silent about this. Thankfully, Firefox revealed the error:

 

app-bridge-shop-origin-error.png

To sum up, the correct value for shopOrigin can't include https://. Only shop name followed by .myshopify.com

 

 

var app = AppBridge.createApp({
    apiKey: "<%= api_key %>",
    shopOrigin: "<%= shop %>.myshopify.com",
});

 

@hannachen maybe it would be worth allowing the shopOrigin to start with https://? This would make the migration from EASDK to App Bridge easier. Or at least give an example of a valid shopOrigin in the docs here https://help.shopify.com/en/api/embedded-apps/shop-origin.

 

I'm a software engineer. I make things happen automatically.
0 Likes
Shopify Staff
Shopify Staff
11 1 2

Hi Lukasz,

 

Thanks for the feedback. The change to shopOrigin could use more visibility, so as of v1.6.0, App Bridge throws an informative error when the shopOrigin starts with https://. 

1 Like

Hi @iain-campbell,

 

Thanks for the update. I like this change!

 

I'm a software engineer. I make things happen automatically.
0 Likes
Tourist
12 0 0

I have my `/auth` route running on a different service than my frontend, so my App URL in my app settings is `https://abc123.ngrok.io/auth`. My auth backend will then redirect the user to 'https://abc123.ngrok.io/'. I got this to work just fine using the new App Bridge in Polaris v3 (although it took forever to figure out why my app wouldn't load and there were no helpful error messages). 

 

If any others are experiencing this issue, then create a new app and try run your app in there. I ran into this issue and it ran fine in a newly created Shopify app. I think some older apps are interacting with the iframe in a legacy way. 

0 Likes
Highlighted
New Member
6 0 0

How do You use the new Provider mechanism in the context of React Hospify App tutorial?

https://developers.shopify.com/tutorials/build-a-shopify-app-with-node-and-react/build-your-user-int...

 

The following construction does not work, although it does not produce error, just no connection to the list of products (button does not respond):

 
<React.Fragment>
        <Head>
          <title>Sample App</title>
          <meta charSet="utf-8" />
        </Head>
        <AppProvider>
           <Provider shopOrigin={this.state.shopOrigin} apiKey={API_KEY}>
          <Component {...pageProps} />
          </Provider>
        </AppProvider>
      </React.Fragment>
0 Likes
Tourist
12 0 0

I don't use `Provider`, just the `AppProvider` component. I'm pretty sure `AppProvider` connects to App Bridge for you. It also gets the `shopOrigin` for you as well. 

 

 

<AppProvider apiKey={apiKey} forceRedirect>
  <App />
</AppProvider>

 

 

0 Likes
New Member
6 0 0

Yes, but it is deprecated and will be abandoned soon.

0 Likes
Tourist
12 0 0

Well I hope they make it actually work before then...

0 Likes