AppBridgeError: APP::ERROR::INVALID_ORIGIN when trying to redirect to OAuth link

[cuongnm_bb]

Hello everybody,

I'm debugging a Shopify app for a client.

The app fails to work because it is used the deprecated EASDK. So, I'm converting it to use the new App Bridge method.

Unfortunately, even when I provide the correct value for shopOrigin when creating an app with createApp method of App Bridge, the browser always refuse to redirect to the OAuth link, in the browser's console, I see the following error:

app-bridge:1 Uncaught a {name: "AppBridgeError", message: "APP::ERROR::INVALID_ORIGIN", action: {…}, type: "APP::ERROR::INVALID_ORIGIN", stack: "AppBridgeError: APP::ERROR::INVALID_ORIGIN"}

Does anybody experience this problem before?

[iain-campbell]

The full text of the error should say something like "Message origin 'origin1' does not match app origin 'origin2'". You need to load your app from the 'App URL' you set in the 'App Setup' page of the Shopify Partners dashboard.

[cuongnm_bb]

Thanks a lot! It works.

[Ruzen2]

Hey @cuongnm_bb 
   Am having the same problem like you had. 
Can you please tell me how you solved it?

[cuongnm_bb]

You have to load your app from the 'App URL' you set in the 'App Setup' page of the Shopify Partners dashboard. Previously, I set the App URL to https://localhost/ but loaded my app from a proxy URL created by Ngrok. That's why I face the problem. Later, I updated the App URL to match the Ngrok URL and the problem was gone.