Re: Shopify App Gets Caught in Infinite 'Enable Cookies' loop in Safari

Solved

Shopify App Gets Caught in Infinite 'Enable Cookies' loop in Safari

STAGE_TEN
Shopify Partner
8 1 5

We have been experiencing a problem where users attempting to access our Shopify App from a Safari browser, either on desktop or iPhone, get caught in an infinite ‘Enable cookies' loop.

 

Our app is built as an Embedded App, using the current versions of Shopify's various libraries. We are using:

  • Safari (MacOS) Version 13.0.4 (14608.4.9.1.4)
  • Safari (iOS) on iOS 13.3

To verify that the problem wasn’t specific to our app code, I used the demo React app included in a tutorial: https://github.com/Shopify/shopify-demo-app-node-react

 

I set this up as is defined in the documentation, and the behaviour is as follows:

  1. Starting a standard attempt to install an app via hitting: https://9f508623.ngrok.io/auth?shop=lee-stageten-store.myshopify.com, I get an ‘Enable cookies' screen:
    Screen Shot.png
  2. After accepting this, and logging in to my store as normal, I get the standard OAuth permission screen.
  3. After clicking "Install unlisted app" I get a standard Approve Charge screen, and accept the charges there.
  4. At this point, the browser briefly goes to the sample app's default page, NOT in the Shopify admin iFrame.
  5. It then attempts to redirect to the Shopify admin because of the 'forceRedirect' statement here:
    https://github.com/Shopify/shopify-demo-app-node-react/blob/4dd8f5a2db89910024f2cb52c43bed30b480c3de...
  6. The browser then logs: [Error] Unable to post message to https://lee-stageten-store.myshopify.com. Recipient has origin https://<name>.ngrok.io. (That's our testing 
  7. I am returned to the same 'Enable cookies’ page as above. Continuing produces the same loop infinitely.

Our own application experiences exactly the same problem.

 

This all looks related to Safari ITP (https://help.shopify.com/en/api/guides/itp-impact), but it appears newer versions of Safari have broken the solution described in that article. Do you have any further advice or ideas we can try? Given our users will want to use our application from a iOS device, this is a critical issue for us.

Accepted Solutions (2)
Michael_Ragalie
Shopify Staff
38 2 12

This is an accepted solution.

We released v3.1.61 of koa-shopify-auth this afternoon that should fix issues with Safari 13.1: https://www.npmjs.com/package/@shopify/koa-shopify-auth/v/3.1.61

 

Please give it a try and let us know if it works for you!

To learn more visit the Shopify Help Center or the Community Blog.

View solution in original post

STAGE_TEN
Shopify Partner
8 1 5

This is an accepted solution.

Just a note for anyone who finds this topic and is still having this problem:

We recently switched to using cookieless authentication, which has resolved the problem permanently for us. Check out the pinned article Introducing cookieless authentication beta with App Bridge for discussion, and there is more information in Shopify's Authenticate your app using session tokens tutorial.

I hope this helps.

View solution in original post

Replies 79 (79)

hannachen
Shopify Staff
54 8 17

👋Hi STAGE_TEN,

Thank you for taking the time to reproduce this issue on a test app and writing up such detailed instructions. I was able to reproduce the issue on my end, and I think you might be onto something, it does appear to be related to Safari ITP. We have a possible fix from a while back in anticipation for this Safari update within the `@shopify/koa-shopify-auth` utils, but we'll have to do some tests to verify that it does indeed work. For the time being, there's no workaround I can think of. Please bear with me while I dig into this issue a bit more, and I'll share the results ASAP.

Hanna | 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 the Shopify Help Center or the Shopify Blog

Sebastian_H
Shopify Partner
17 3 4

similar behavior in Firefox. Really annoying. Hope there will be a solution in @shopify/koa-shopify-auth soon

hannachen
Shopify Staff
54 8 17

Hey folks, I'm following up to let you know that this is still being worked on. A lot has changed since the possible solution was proposed, and there's quite a bit of catching up. s_werk, thank you for the additional info, it sounds like Firefox also have their own ITP and should be throughly tested as well. Much appreciated 🙏

Hanna | 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 the Shopify Help Center or the Shopify Blog

jsx
Visitor
3 0 0

I am having a similar problem in both Safari and Chrome. I'm new to developing apps with shopify and have been using the tutorial here:

https://developers.shopify.com/tutorials/build-a-shopify-app-with-node-and-react

 

I've built three test apps; one on my MacBook localhost, one on a FreeBSD server, and one on an Ubuntu server.

 

The one on localhost, as expected, passes all trust checks and loads as expected into the Shopify interface and as seen in the tutorial.

 

The installs on the remote servers do not. First the warning about enabling cookies is shown, and then the app loads externally as a redirect. I attempted to implement a user-proposed solution ( https://community.shopify.com/c/Shopify-APIs-SDKs/Embedded-App-not-working-in-Safari/td-p/335934/pag... ) but it did not work. It does not seem possible with updated browsers to embed an app in the Shopify admin interface.

 

I wonder if this is working for anyone? Or if users are simply assuming it's their fault and disabling the browser security?

Ehsan_Khakbaz
Shopify Partner
40 1 7

An updates on this?

Customers cannot open our app and we need support!

victor75
Shopify Partner
9 0 1

Hello,

 

Any news? This starts to impact more and more clients every day, and I cannot manage to find any workaround.

hannachen
Shopify Staff
54 8 17

Hello everyone, thanks for your continued patience on this. It appears that there were a few underlying issues around app auth flow, and not all related to the koa-shopify-auth library, making it quite tricky to debug. A few of those issues were addressed last week, and just yesterday we were able to isolate this bug. Unfortunately the proposed solution from last year didn't seem to solve the problem, so I am looking into other solutions at the moment.

Hanna | 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 the Shopify Help Center or the Shopify Blog

FandyGotama
Visitor
3 0 0

Any timeframe for the fix?

Ash00
Visitor
1 0 0

I'm having the same issue.

davydovct
Shopify Partner
18 0 2

Same here. Chrome (MacOS) latest build

hannachen
Shopify Staff
54 8 17

Hi everyone, thanks for chiming in with your issues. I'm still unable to reproduce the bug consistently, but I did find out that there are actuaally two issues that could cause a redirect loop.

 

For those who are experiencing this bug in Chrome, do you eventually get redirected back to the app listing page with an error message? Described here in point #3: https://shopify.dev/tutorials/migrate-your-app-to-support-samesite-cookies Also, what version of `koa-shopify-auth` are you using in your app?

 

For Safari, I'm unable to get the redirect loop at all. When I use this URL format (https://9f508623.ngrok.io/auth?shop=lee-stageten-store.myshopify.com) but replaced with my own app and shop, I actually receive an error message saying that the shop url is invalid. What do you see when installing with this url instead?  https://9f508623.ngrok.io/auth/inline?shop=lee-stageten-store.myshopify.com

Hanna | 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 the Shopify Help Center or the Shopify Blog

VacantMind
Shopify Partner
4 0 4

Hi - has there been any movement on this? I have received a couple of complaints from users of my app. I've updated to koa-shopify-auth 3.1.58 and the issue is still happening.

davydovct
Shopify Partner
18 0 2

koa-shopify-auth 3.1.33

koa-shopify-webhooks 1.1.12
koa-router 7.4.0
koa-session 5.12.3

Everything works fine for about month ago. Now i'm stuck with redirect loop

davydovct
Shopify Partner
18 0 2

Okay, i've update all libs with npm update, then clean cache and install again. Now, seems like redirect issue is gone

STAGE_TEN
Shopify Partner
8 1 5

Hi Hanna,

 

Thanks for the response -- our issue has always only been in Safari. Our developer investigated further using the the new URL format you provided and our original test steps. He responded with:

 

"If I clear cookies, go back and try exactly the same steps it fails."

 

Further, he performed the test in a private browsing windows and reports:

 

"I was able to get past the Enable cookies screen once, but the problem reappears.

 

"To clarify, a full cycle with login to the store and installation using the `/auth/inline` form of the URL works in a Safari private window, but not in a regular one, regardless of whether I clear all my Shopify and STAGE TEN cookies or not. I have no extensions/ad blockers etc running in Safari.

 

"Having installed the app successfully in the private window, if I then attempt to access it from a regular Safari window I get the same 'enable cookies' loop."

 

I hope this additional information helps.

AvocadosLab
Shopify Partner
51 4 45

This seems to be Safari Version 13.1 specific issue to me. Consistently able to reproduce on this version of Safari and looks fine.

Ehsan_Khakbaz
Shopify Partner
40 1 7

@AvocadosLab I have Safari Version 13.0.5 (15608.5.11) and have the same issue.

AvocadosLab
Shopify Partner
51 4 45

Yeah, seems to be in every 13.x.x version.

RH87
Visitor
1 0 0

Hi,

 

is there meanwhile a solution for this bug?

I am getting this error message each time when I access my Insta and FB app in Shopify. My product catalogue doesn't get synchronised anymore neither.

AvocadosLab
Shopify Partner
51 4 45

@hannachen should we expect a patch from Shopify around this in koa-auth? This issue is clearly reproducible in Safari 13.1 because it blocks third party cookies by default. 

Smartflowlabs
Visitor
1 0 0

This is quite an urgent issue as a lot of visitors are using the latest version of Safari. We can replicate the Redirect Loop issue caused by Koa-Auth-Shopify in multiple stores and for multiple Apps. The code of the issue seems to be the Third-Party-Cookies being blocked by default in Safari 13.1.

Shopify, we're getting multiple reports per day (and growing) of this issue and this is highly impactful. Could you please advise on a temporary fix until the module gets updated?

Michael_Ragalie
Shopify Staff
38 2 12

We're working on a fix! I'll post when we have an updated version of the library out for you to try. Thanks for reporting this!

To learn more visit the Shopify Help Center or the Community Blog.

Michael_Ragalie
Shopify Staff
38 2 12

This is an accepted solution.

We released v3.1.61 of koa-shopify-auth this afternoon that should fix issues with Safari 13.1: https://www.npmjs.com/package/@shopify/koa-shopify-auth/v/3.1.61

 

Please give it a try and let us know if it works for you!

To learn more visit the Shopify Help Center or the Community Blog.

AvocadosLab
Shopify Partner
51 4 45

I just tested "v3.1.61" of "koa-shopify-auth" on Safari 13.1 it did fix cookie redirect issue! Thanks a ton for releasing patch quickly. Much appreciated 🙂 

 

I'm seeing following prompt every time I'm trying to open my app on Safari 13.1 though, is that a new normal?

 

Screen Shot 2020-05-01 at 4.38.34 PM.png

 

Michael_Ragalie
Shopify Staff
38 2 12

Glad it's working for you!

 

Yes, that's the new normal (for the moment). But we're working on something better 🙂 https://twitter.com/jmwind/status/1256249454430224386

To learn more visit the Shopify Help Center or the Community Blog.

AndrewWalters
Shopify Partner
55 6 19

Niiice!

 

I thought it was strange that cookies (and redirects) were needed at all. It seemed like just adding a definable parameter at the install URL would be enough to get rid of them.

 

I think I also read about iframe-less apps - I can't wait to read about the details of that magic 🙂

Want to increase conversions or get more social media attention? Try Brisa Video Creator to quickly and easily create videos that engage your viewers!
artva
Visitor
3 0 0

We've upgraded to v3.1.61 and now in the initial authentication process we get the following error:

Request origin could not be verified

It happens in all browsers.

 

Only in the second attempt to authenticate, it works well.

 

Any ideas?

 

 

Michael_Ragalie
Shopify Staff
38 2 12

Hi artva,

 

Were you able to reproduce this error with the example app in the repo? That's a good way to know whether it's an issue with the library or with the configuration. https://github.com/Shopify/quilt/tree/master/packages/koa-shopify-auth#example-app

 

I'd also recommend you create a new thread for this issue so that it gets more visibility.

 

-Mike

To learn more visit the Shopify Help Center or the Community Blog.

ClementBR
Shopify Partner
161 2 48

Regarding https://twitter.com/jmwind/status/1256249454430224386, can we get a rough idea of how this will work and when it would be released?

Will it be only for App Bridge or also available for the EASDK?

 

Given the recurring cookies issues with customers, we are considering rewriting our authentication mechanism to be cookie less, but it would be a shame if we did the work and shortly after the new solution was released...

Michael_Ragalie
Shopify Staff
38 2 12

Hi! We'll be sharing more details soon! You can expect it to be available for all partners this summer.

 

It will only be available for App Bridge, so now's a good time to upgrade to App Bridge if you're still on EASDK.

 

Thanks!

-Mike

To learn more visit the Shopify Help Center or the Community Blog.

ClementBR
Shopify Partner
161 2 48

Thanks @Michael_Ragalie 

Regarding summer, is that the timeframe for production or beta?

 

I understand that you might not be able to share more yet, but I was hoping you could just share the type of embedding technique that you will be using, as it can have an impact on the authentication design we might choose.

 

For example, is it based on a link tag like <link rel="import" href="<url>">, or some other mechanism?

ClementBR
Shopify Partner
161 2 48

Also, will apps be loaded in a 'first-party' context, as opposed to iFrame which create a 'third-party' context.

Michael_Ragalie
Shopify Staff
38 2 12
Apps will still be loaded in a third-party context.

To learn more visit the Shopify Help Center or the Community Blog.

ClementBR
Shopify Partner
161 2 48

Thanks I'm looking forward to experimenting with the beta.

Safari users in particular are running into a lot of third party cookie issues.

ClementBR
Shopify Partner
161 2 48

Still within an iFrame right?

victor75
Shopify Partner
9 0 1

Hello,

Our customers still run into this issue, even after the upgrade to the version 3.1.65 of shopify/koa-shopify-auth

What can we do as a temporary solution?

Michael_Ragalie
Shopify Staff
38 2 12

Hi Victor, it can be hard to diagnose issues with the cookie-based auth flow. If you're running into problems, I'd recommend you try out the new cookieless option and see if it resolves some of the issues: https://shopify.dev/tools/app-bridge/authentication

To learn more visit the Shopify Help Center or the Community Blog.

Michael_Ragalie
Shopify Staff
38 2 12

Hi! That's the timeline for production.

 

The gist is that Shopify issues a JWT to the app frontend via App Bridge, you include that JWT in the Authentication header of your requests to your app backend, and then your app backend can verify the JWT signature and know which shop/user the request is on behalf of.

 

We'll share more details soon! Thanks!

To learn more visit the Shopify Help Center or the Community Blog.

Sebastina
Visitor
2 0 1

I am using Safari and I had the same issue. 

Go to Safari ==> Preferences ==> Privacy 
On here just uncheck the box "Prevent cross-site tracking"

Refresh the page and you wont see that popup anymore. 

 

Sebastina_0-1620634023395.png

 

Burty
New Member
5 0 0

Thank you Sebastina  works a treat!

Ehsan_Khakbaz
Shopify Partner
40 1 7
Thank you Michael for the update.
We’ll test it soon.
mirimiri
Visitor
1 0 0

Kia ora. I am stuck in the loophole myself and am not having any success trying to edit my availability in Sesami on my Shopify Store. It just keeps looping back to needing access to my website data. I have zero knowledge about how to deal with this. Any help would be greatly appreciated. Mirimiri

Marwan1999
Tourist
4 0 0

the same problem for me too
pleaz share if there is an update

tomasdelaveau
Tourist
16 0 1

I'm in the the fourth part (Build your user interface with Polaris) of this tutorial.

The first time I attempt to load the App's homepage, the following page appears for an instant:

tomasdelaveau_2-1622600189521.png

Then I arrive at https://undefined/admin/oauth/authorize?client_id=[client_id]&scope=read_products&redirect_uri=[ngro...
tomasdelaveau_2-1622598452115.png
The second time I load the homepage, it appears fine
tomasdelaveau_1-1622598233972.png
When I try to access [app_homepage]/annotated-layout, the same sequence follows, except that I arrive here instead:
tomasdelaveau_0-1622599640640.png

Considering the connection limit inherent to Ngrok, I tried the same approach using Local Tunnel. And the same sequence of events took place, except that for annotated-layout I keep arriving at the 'undefined' error page after the flashing 'enable cookies' page. After four attempts, Shopify redirects to admin/apps with the following warning:

tomasdelaveau_0-1622601751390.png

But this happens even after I've added [store_domain].myshopify.com in Sites that can always use cookies in Chrome settings.

I've checked the Ngrok/LocalTunnel address in the App setup ( in App URL and Allowed redirection URL(s) ) and in the .env file of the app. I also checked the annotated-layout page URL (compared to the filename in pages directory) and tried clearing cookies. By checking the server logs I can see that the request doesn't even hit the server. 

I tried using Safari and it doesn't work either, with the difference that the browser stays on the 'enable cookies' instead of just flashing it. I'm using the latest version of koa-shopify-auth (4.1.3) and I've double-checked the code in server.js to verify it matches the one in the tutorial.

Cory113
Visitor
2 0 0

@tomasdelaveau Did you ever find a solution? I'm having the exact same problem as you. Everything work fine up until this step:

 

"View the pages/annotated-layout.js page in your browser by appending annotated-layout to the end of your store’s myshopify URL. For example, https://dev-tools-education.myshopify.com/admin/apps/sample-embedded-app/annotated-layout."



Trying this just throws the Enable Cookies Manually error. Pretty frustrating when a resource/tutorial for new devs doesn't even work.

tomasdelaveau
Tourist
16 0 1

Hi @Cory113 , I never found a solution. I'm deving it non-embedded now.

Avi_Ben_Zaken
Shopify Partner
18 0 6

Hey all,

I'm using all new shopify api's, working with session tokens and still have the 'Enable Cookies' banner.

I noticed it's happening after restarting the server and I can see on my ngrok a GET call to /auth/enable_cookies, with no reason, of course.

Since I'm 100% not using cookies, I started to search under that "koa-shopify-auth" pack.

Found that code:

                    "case 14:
                        if (!(ctx.path === enableCookiesPath)) return [3 /*break*/16];
                        return [4 /*yield*/enableCookies(ctx)];"
 
at node_modules\@shopify\koa-shopify-auth\dist\src\auth\index.js
 
Change "enableCookies(ctx)" to "next()" and problem fixed.
I'm on the latest "@shopify/koa-shopify-auth""^4.1.3" so I don't see any other solution.
Be aware - It's not recommended to change node_modules so if you use this solution don't forget to reEdit it whenever you reInstall it.
bdowling
Pathfinder
80 13 45

Hi, I'm having the same problem. Getting a "same_site_cookies error" and i'm using session NOT cookies. Any alternatives to editing the modules, you can think?

Code-Kat
Tourist
3 0 2

I am having the same issue with chrome in July 2021.  I have already updated @Shopify/koa shopify-auth to the most recent version. Any help would be greatly appreciated.