You should want to call the API for the backend admin. The shop value is
the Shopify default domain name, for example: xxx.myshopify.com.
Topic summary
AppBridgeError “APP::ERROR::INVALID_CONFIG: shopOrigin must be provided” occurs after adding Shopify App Bridge in a Node/React tutorial.
- Root cause: shopOrigin is undefined in the App Bridge Provider because the shopOrigin cookie isn’t present. The cookie is normally set during OAuth in afterAuth by @shopify/koa-shopify-auth.
- Early tip: one user suggested adding HOST (ngrok URL) to .env, but others note HOST is unrelated to the missing shopOrigin cookie.
What worked:
- Re-login to the shop to trigger afterAuth and set the cookie (confirmed by multiple users).
- Add a Koa middleware to detect a missing shopOrigin cookie, validate query HMAC, set the cookie, and redirect back to the app. If using this snippet, import validateHMAC from @shopify/koa-shopify-auth to avoid “validateHMAC is not defined.”
Browser note:
- Safari may block cookies (3rd‑party), causing loops. A commenter notes Shopify App Bridge moved to 4.2.x using JWT session tokens to reduce 3rd‑party cookie dependency.
Additional question (backend shop URL):
- “shop” is the myshopify.com domain (e.g., xxx.myshopify.com). It’s visible client-side via window.Shopify, but window isn’t available server-side; no definitive backend retrieval method is provided here.
Status: Partial resolutions via re-login or middleware; Safari/cookie nuances remain. Screenshots included but not essential to the fixes.