I can install the app on a dev store, the API functions are working great once I get into the app but I think it is having issues actually opening the app - most likely something wrong with my Embedded App SDK stuff and a missing redirect.
My current flow is as follows ->
abc.ngrok.io is a app
1. User enters app at abc.ngrok.io/install
2. /install builds auth url and redirects user to it
3. Shopify redirects back to abc.ngrok.io/finish_auth
4. /finish_auth exchanges temp token for a permanent one, stores perm in my db, then redirects to /create_charge
5. /create_charge and /activate_charge work perfectly, redirect to abc.ngrok.io/
6. abc.ngrok.io opens in a NEW window, not in the iFrame.
I believe somewhere in here I need to be escaping an iFrame as outlined in the documentation here -
Since the application is loaded inside an iframe it is critical that the initial OAuth request redirect escapes the iframe to make the requests. Shopify returns the
header and prevents any Shopify admin pages from being loaded inside an iframe.
Is this the cause of my "new window" opening issue? If so, can you give me any pointers as to where this iFrame escape should take place in my flow?
I am facing the same issue of the app not getting loaded in the iframe after installation.
I am using a client-side rendering for my react app. The /shopify/callback endpoint in the app setup performs oauth, fetches and saves the token in a database and does a redirect to the react app. Soon after installation, I see an error inside the admin dashboard that the path is not found (figure attached)
My react app URL takes shop=<shop name> in the route. I had to do this inorder to fetch the shop name and use it while storing the tokens in an internal database.
Please tell me what can be done differently here so that the redirect inside admin dashboard works properly.