@shopify/app-bridge-react provider skip app installation

Monulth
Shopify Partner
1 0 0

I'm having trouble configuring an existing react app and @Shopify/app-bridge-react.
1. The top level is wrapped in a provider with a true forceRedirect flag in the configuration (following the example of https://github.com/Shopify/shopify-frontend-template-react/blob/a77055f4eb2525da985e0478dc4266cca7b0...).
2. The app runs on its domain and without having time to do anything is automatically redirected to https://admin.shopify.com/store/<my-store>/apps/<api-key>/<my-route> with a 404 error, ignoring the app installation in the store.

Note: if the app is already installed, it launches in inframe with no problem.

What is the overall expected behavior:
1. The app launches and goes to the app install page in the store, or directly to the inframe on the store page if the app is already installed.

Reply 1 (1)

Liam
Shopify Staff
2731 298 769

Hi Monulth,

 

The behavior you're experiencing seems to be related to the forceRedirect flag. When forceRedirect is set to true, Shopify App Bridge will attempt to redirect users to the Shopify admin page that embeds your app automatically when it detects your app is loaded outside of Shopify admin.

 

If your app is not yet installed on the store, it might attempt to redirect to a non-existent page (since the app is not installed yet), hence the 404 error.

Here are some things you could try:

  1. Conditionally set forceRedirect: You might want to only set forceRedirect to true when your app is already installed. You can check if your app is installed by making an authenticated request to the Shopify REST Admin API and checking the response.

  2. Install your app programmatically: If your app is not yet installed, you could redirect users to an installation page, or you could use the Shopify Billing API to create a recurring application charge and then activate it, which installs your app on the store.

  3. Handle 404 errors: You could also handle 404 errors on your app and redirect users to an appropriate page (like an installation page or an error page).

Try out the above approaches and let us know if you're still having issues.

Liam | Developer Advocate @ 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