How to use the new @Shopify/app-bridge with @Shopify/polaris-react

chef_carol

Shopify recently released their new @shopify/app-bridge , but it is unclear to me how it should be used alongside @shopify/polaris . For example, I have tried to make a React component that will use the app-bridge and polaris to display a toast. import React, { Component } from "react"; import * as PropTypes from "prop-types"; import { Toast } from "@shopify/app-bridge/actions"; import { Page } from "@shopify/polaris"; class Start extends...

Originally asked by chadhamre on Stack Exchange (stackoverflow) (CC BY-SA 4.0).

uphilltech

Great question — answering as the UphillTech team:

So after a lot of debugging, I found out from Shopify that inside App Bridge, before taking any action, they check that the localOrigin matches the appURL (one that's entered in the partners dashboard). In my case, I have a backend (node.js on heroku used for authentication) and a frontend (react bundle on firebase) my app starts by hitting the backend, and then if authentication checks out, it redirects to the front end. And hence the localOrigin does not match... hmmm, I'm very glad to have figured this out since I lost a lot of sleep over it. Now the question is what to do about it... maybe this is something that could be updated with AppBridge? Or is there a better design I should be...

Full answer by chadhamre: https://stackoverflow.stackexchange.com/a/55669507 (CC BY-SA 4.0).

Need it done for your business? UphillTech.