App frame refusing to load on reloading for 4 times.

[sunitha_nair]

We are developing a Shopify embedded application and we are facing a weird issue. The app seemingly works fine in normal situations. However, if I attempt to reload the app page in a development store 4 times in a row, the app's frame refuses to load and the console logs the following error:

Refused to display 'https://demo-testing-app.myshopify.com/admin/apps?oauth_error=third_party_cookies' in a frame because it set 'X-Frame-Options' to 'deny'.

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://gmerchantsync.iqz.systems') does not match the recipient window's origin ('null').

 This is preventing us from entering the app for listing. Any help here is appreciated. Thanks.

[Alex]

It looks like whatever library you're using is performing a redirect to an admin path without it being a full page redirect, effectively trying to frame the admin. If you're using a first party library and this is reliably replicable, I recommend creating an issue in the corresponding public repository. The same applies if it is a third party library, but that will depend on the current state of support for that library by the authors.

Cheers.

[sunitha_nair]

@Alex I am not using any third party library for authentication and I have followed this tutorial https://help.shopify.com/en/api/tutorials/build-a-shopify-app-with-node-and-express by shopify for the authentication. 

I am trying to redirect them to the below url for authentication:

https://${shop}/admin/oauth/authorize?client_id=${process.env.SHOPIFY_API_KEY}&scope=${process.env.SHOPIFY_SCOPE}&state=${state}&redirect_uri=${redirectUri}

The link seems to works fine the first three times.

[Alex]

Ah, thanks for clarification! I was able to look into this more.

It looks like we have loop detection built into that OAuth path. We detect the loop be incrementing a cookie integer value by 1 (a tick) each time a specific app sends someone to that path on a specific shop. It looks like visiting that link quickly in succession leads to this.

[rajshrimohanks]

Thanks for the insight. What do you suggest we do in this case? Is this because we've handled something in a not recommended way?

[Alex]

What I'm curious about is what you need to be doing to cause this besides visiting /oauth/authorize (via your redirect) several times in a short span of time. If your concern is about seeing this in production, this only applies on a per-client basis since the "ticker" is stored in cookies. Unless you're repeatedly sending a single client to this route, or they don't have cookies enabled, they shouldn't see this.

If you're just debugging and running into this, the best thing you can do if you see this is wait about 1 minute (the expiration time).

Cheers.

[sunitha_nair]

@Alex Thanks for your response. This issue was raised  by Shopify during our app review process. Is there a work around for this issue?

[Alex]

Thanks for the heads up. It's not an obvious precaution we have implemented, so I'll talk to the one reviewing your listing  and we'll get that sorted out when we can.

Cheers.

[SangNDD]

I'm running into the same issue. I was doing just exactly as the tutorial with NextJS, KoaJS and React told me to do so. After reading your responses,  I found that there is a cookie named oauth_loop_detector in my Shopify store which will increase by 1 every time the app reloads. Really appreciate it if someone could help me fix this?

[sunitha_nair · Accepted solution]

We have figured this one out. The tutorial doesn't make it obvious but Shopify seems to check for an auth loop whenever the root url ('/') of the application is accessed.

The tutorial has code like the following:See the ctx.redirect('/') there? That's the offending piece of code. In trying to check for a loop, Shopify is incorrectly flagging a legitimate access url access as a bad one.

The fix:

It's quite simple. Never redirect to root in your application. Move the main page of your app to something like '/home' and do this instead:

ctx.redirect('/home');

Make sure that the route home is available and you are good to go.

Shopify should probably update their docs to mention this.

[SangNDD]

Thanks a lot. I have fixed it

---

@sunitha_nair wrote:

We have figured this one out. The tutorial doesn't make it obvious but Shopify seems to check for an auth loop whenever the root url ('/') of the application is accessed.

The tutorial has code like the following:See the ctx.redirect('/') there? That's the offending piece of code. In trying to check for a loop, Shopify is incorrectly flagging a legitimate access url access as a bad one.

The fix:

It's quite simple. Never redirect to root in your application. Move the main page of your app to something like '/home' and do this instead:

ctx.redirect('/home');

Make sure that the route home is available and you are good to go.

Shopify should probably update their docs to mention this.

---

[cyrim]

I have been with stuck with the same problem for over a week. I cannot seem to find a solution. I am not using koa so, I don't have same ctx.redirect in my codebase. I am using node.js and express.js and following this tutorial. https://help.shopify.com/en/api/tutorials/build-a-shopify-app-with-node-and-express

Would you be able to provide a hint on where I would need to fix the redirect issue with the above tutorial?

[sunitha_nair]

In the tutorial you mentioned, you need to replace 

res.status(200).end(shopResponse); 

The above statement ends your response with a json response without redirecting anywhere.

with the following after requesting access token from shopify

res.redirect('/home');

And make sure to serve the route '/home'.

Hope this works!

[cyrim]

I am already using absolute path. This is what it looks like with the actual code.

https://pastebin.com/JJc0sEFj

[sunitha_nair]

In that case redirect to your app by appending your shopify key associated with the application to your link https://${shop}/admin/apps/<your-api-key/

Something like this would work

[SoCalJinx]

I can't use Sesami because of the 3rd party cookie block.  What is the solution, please.