Embedded App Loading Problem in Admin Frame

Highlighted
New Member
3 0 0

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
X-Frame-Options=DENY
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?

0 Likes
New Member
3 0 0

I there anyone, can help me on it???

0 Likes
Shopify Partner
2 0 0

What technology are you using?  How are you redirecting/rendering the new view?

0 Likes
New Member
3 0 0

Solved

0 Likes
Shopify Partner
2 0 0

Can you explain your solution?  Others might find it useful.

0 Likes
Shopify Partner
123 4 12

great you solved it, not so great you did not explain what solved your issue.

0 Likes
Shopify Partner
8 0 0

Hi, 

  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.

 

0 Likes