Throughout the documentation for the new App Bridge, Shopify refers to the shopOrigin
value and how it’s used to configure the Provider from app-bridge-react
but they never specify how to get this value?
The react app is loaded inside of an iframe and the src includes the shopOrigin
value as a query string param called shop
, but when I try the following code I get the error window is not defined
:
const params = queryString.parse(window.location.search);
const config = {
apiKey: process.env.SHOPIFY_API_KEY,
shopOrigin: params.shop,
};
1) Why would I be getting window is not defined
in javascript code running in a browser?! This makes no sense to me
2) If this value can be read from of the provided libraries such as @shopufy/app-bridge-react
please tell me how
3
Answers
Unless you’re using a library tailored specifically to Shopify, you have to manually save the shop origin during OAuth authorization.
Hopefully this Shopify tutorial is of some assistance
The shopOrigin is available within your browser cookies.
If you followed the Shopify development for react and Node.js, you should already saved this after the Shopify authentification.
I am not sure what exactly is the need for shopOrigin, if you just wanted to go to admin section of the shop from client side you can use Redirect in app bridge. otherwise you can store the shop detail on server during auth process and create a get api to retrive the details on client side as needed.