Hello. Thanks for the tutorial it worked as expected until step 3 add Shopify App Bridge. I have copied the code as instructed to test my configuration. When viewing the test app on the “Unhandled Runtime Error AppBridgeError: APP::ERROR::INVALID_CONFIG: shopOrigin must be provided” [Capture.JPG] …

Hi, I had the same problem as I made this tutorial yesterday and in my case in .env the HOST property was missing. It needs to be set to something like: HOST='https://6431e05c.ngrok.io.{devshopname}.myshopify.com' Of course changed to your actual ngrok forward url. Maybe this is also your case. …

I have tried this solution, and added the missing HOST property in the .env file, but unfortunately the error still exist Here is the error message: [Annotation 2020-07-16 183133.png] and here is the snippet from the server.js: [Annotation 2020-07-16 182953.png]

You set fixed url into .env file. By the way, when I try to make public app..?

Hi there I cannot see any relation between the HOST property and the shopOrigin cookie. The reason why you get this error is because in _app.js the config object for the app-bridge-react Provider has undefined value for shopOrigin. In the demo app the value is set from the cookie named shopOrigin.…

The problem is about shopOrigin cookie set in afterAuth. Re-login your shop account will help and that’s how I solved the same issue. Jack

This code works well in almost browsers. But, in safari, cookie doesn’t work and it goes circled cycle. Could you give us the code which works well in safari browser, too? Thanks

This solution has fixed it from me, thank you @jackcylin !

Glad it helps. However, this way does not cover all, since afterAuth wasn’t invoked all the time (follow Shopify tutorial). My final solution is to attach a middleware to check if shopOrigin exists and update one if needed. I am not sure if this way is the right answer, but it works for me. server.…

I tried your last solution jackcylin, but I have a new error message : ReferenceError: validateHMAC is not defined Any idea to fix this ReactBridge issue ? Thanks ! :slightly_smiling_face: Arthur

Frankly, re-login is not the solution to this issue. Browser doesn’t find shopOrigin cookie causing the issue. There are many reasons cookie not found. You need to see Shopify development team upgraded app bridge from 3x to 4.2.x to remove 3’rd party cookie dependency via JWT session token . To fix …

shopOrigin must be provided- Error, Step 3 Build shopify add with Node and React Tutorial

Retired Boards Appdev Tools

FaizaBashir July 27, 2023, 3:03am 19

Hey @jackcylin , I am unable to open screenshot

Topic		Replies	Views
Shopify Tutorial: AppBridgeError: APP::ERROR::INVALID_CONFIG: shopOrigin must be provided Tools	6	134	August 10, 2021
Getting "AppBridgeError: APP::ERROR::INVALID_CONFIG: shopOrigin Store Design	1	47	December 6, 2020
App Bridge problem Tools	2	206	August 9, 2020
Embedded app is not working in case of blocked third party cookies in chrome Shopify Apps	5	167	December 28, 2021
Shopify App Bridge not working Fulfillment Api	2	122	August 24, 2021

shopOrigin must be provided- Error, Step 3 Build shopify add with Node and React Tutorial

Related topics