The tutorial Shopify app can't set cookies, escapes admin iframe

localhost1
Shopify Partner
9 0 1

A year ago, I successfully completed the tutorial app from Build a Shopify app with Node.js and React

Long story short, after forgetting all about it, I tried to complete it once again.

 

Only this time, at the end of step 3, when I go to my test store, view my app list ([store].myshopify.com/admin/apps) and click on the app, I briefly see a popup saying " Enable cookies - You must manually enable cookies in this browser in order to use this app within Shopify." (exactly like the one shown in this thread), and then I get redirected to the URL of my app (instead of seeing it in an Iframe). More specifically, it very quickly loads a bunch of URLs like those:

[mytesturl].ngrok.io/auth/enable_cookies?shop=[store].myshopify.com
[mytesturl].ngrok.io/auth?shop=[store].myshopify.com

and I eventually end up on:
[mytesturl].ngrok.io

 

(as far as I remember and can see from the tutorial screenshots, the expect result would be to still be in my shop, on a subpage for the app, with my the [mytesturl].ngrok.io stuff in an iframe on this page)

 

Also found that issue mentioned in this thread https://community.shopify.com/c/Shopify-Apps/Some-Third-Party-Apps-may-not-be-accessible-on-Chrome-80-update/m-p/650220 and from the last answer there (on May 7th) it looks like I'm not the only one having trouble with the code form the tutorial...

 

From what I read, it looks like the tutorial app does contain the "fix" (the one described here https://shopify.dev/tutorials/migrate-your-app-to-support-samesite-cookies , with SameSite=None), only it doesn't actually work, apparently :s I tested on Firefox and Brave.

Any idea how to fix this? Any plan to fix the tutorial app? 

0 Likes
localhost1
Shopify Partner
9 0 1

A little update: I found a dirty workaround for this issue: I downgraded koa and koa-session to the versions I used the last time I followed the tutorial (respectively version 2.7.0 and 5.11.0), and I replaced

server.use(session({ secure: true, sameSite: 'none' }, server));

with the old:

server.use(session(server));

in server.js

 

Obviously this isn't a future-proof option though...

0 Likes

I don't think this works anymore. My other guesses were that it may come from shopify-react-bridge package, or maybe polaris. I did same as you, tried to downgrade packages but it doesn't seem to hlp getting rid of that flashing cookie question. My assumption is that comes from Shopify itself in auth process, and is not controllable for us. I get it: it's necessary on Safari for some reason, but there is no point for keeping it on Chrome. Maybe someone from Shopify  staff can give us a hint here?

Maciej Tokarczyk
Shopify Expert
0 Likes