Where do I get the value for `shopOrigin` when using Shopify app bridge?

Question

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

Answer 1

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.

Answer 2

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

Answer 3

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.