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

cuongnm_bb
New Member
3 0 0

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?

0 Likes
iain-campbell
Shopify Staff
Shopify Staff
54 9 21

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.

iain-campbell | Developer @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

cuongnm_bb
New Member
3 0 0

Thanks a lot! It works.

0 Likes
Ruzen2
Tourist
11 0 2

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

0 Likes
cuongnm_bb
New Member
3 0 0

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.

0 Likes