[Reinstallation] - AppBridgeError: APP::ERROR::INVALID_CONFIG: host must be provided
Hello folks,
I hope everyone is well
I've been developing a public app for Shopify that has been causing me some issues recently that are still unresolved. I'll go into more detail in the next few lines.
I emphasize that I have read all the documentation from shopify.dev/apps regarding authentication, app bridge, graphql, etc. It is possible to find a lot of information with few references on how to put it into practice. Most of the snippets are updated to CLI 3.0 according to Github which doesn't help me at all. That's why I'm turning to the professional developers of this community with a focus on those who have already gone through this problem so that they can provide me with light and guidance.
I've already searched the Shopify discussion forums to find a solution to this issue and still no success. Then I appreciate any help.
My app was built in NODE using Shopify CLI 2.0 before upgrading to 3.0 and I'm using NGROK to run it.
Some important libs:
react: 17.0.2,
react-apollo: 3.1.3,
react-dom: 17.0.2,
webpack: 4.44.1,
next: 12.1.0,
next-env: 1.1.1,
@Shopify/app-bridge-react: 3.1.3,
shopify/app-bridge-utils: 3.1.3,
@Shopify/koa-shopify-auth: 5.0.3
Most of the developer posts on the AppBridgeError theme had code about next.config.js and _app.js, so I'm submitting mine here as well for review in case anyone finds the solution through them which I'm not finding.
next.config.js
_app.js
Snippets from server.js
Tested browsers:
Chrome: Version 103.0.5060.134 (Official Build) (64-bit)
Firefox: Version 102.0.1 (64-bit)
Error description:
When I first run NGROK, a URL is generated with the parameter of the store under development. This URL allows you to install the application normally as well as access it successfully.
Generated URL: https://4898-60-242-160-120.ngrok.io/login?shop=demo-store-image-direct.myshopify.com
The error described as "AppBridgeError" occurs when I uninstall the app from the store and try to reuse the same URL generated by NGROK to reinstall the app from the store.
The error explicitly says "host must be provided".
However, analyzing the URL generated with the NGROK initialization, I realized that it does not contain the host parameter, but it still works correctly when accessed. After uninstalling the app and trying to use this URL again, it says that this HOST parameter needs to be provided. It makes no sense to me. If this host parameter is important in the URL when launching NGROK, the URL generated by Shopify CLI should contain this HOST and not just the SHOP parameter, as you can see below:
https://4898-60-242-160-120.ngrok.io/login?shop=demo-store-image-direct.myshopify.com
I did a mapping of ctx.query and realized that shop and host parameters are different:
host: 9yZS1pbWFnZS1kaXJlY3QubXlzaG9waWZ5LmNvbS9hZG1pbg
shop: my-store.myshopify.com
If I were to speculate on this issue, I would say that it is a redirect issue where it is necessary to create some specific URL providing this HOST. But I'm not sure about that, and even if I was right, I don't even know the composition of this URL.
Thanks in advance for reading
