Working on a Shopify App. I have followed pretty much every step in the blog post of building a Shopify app with node and react, and I have reached a little bump on the road.. When installing the app on Chrome, it works fine, but if I then open Safari and log in to my test development store and try open the app, I get a request to Enable Cookies. This is fine, as we of course want to comply with the ITP rules and all, but every time I click the button and gets back to the app page in Shopify, I get redirected back to the Enable Cookies screen again. I have checked the console, and the cookies has been created on my ngrok domain, but no matter how many times I click the button I keep getting redirected back to enable cookies.
Worth noting is, that this doesn't occur in incognito mode. If I open Safari as incognito, and click the enable cookies button, I am redirected back to use the app in Shopify..
Any clue what is going on?
PS.. I have tried to empty cache, removed cookies from both sites in Safari and also updated to the latest version of koa-shopify-auth from Github.
Haven't heard anything yet no.. I have tried to work my way around it, and so far it seems to be working.. But honestly I can't recall exactly which steps I took in order to get passed it. I thought - since nobody else had replied or reacted with similar issue, that I was a unique case, and my browser just was the problem.. One thing I do recall doing was changing the <AppProvider /> shopOrigin attribute to be explicitly specified:
Ok so I finally figured out what is going on here. It's not pretty but here goes...
If Safari lists you as a 3rd party tracker the ITP workaround outlined by Shopify will not work! This is old news considering that is what this thread is about, but using ITP Debug mode in Safari 13 confirms that the enable cookies loop is the result of your domain being listed as a 3rd party tracker, which essentially will prohibit any cookies to be set by scripts in your iframe, even if you do the whole user gesture thing on the enable cookies page.
Here are a few solutions, each results in a terrible UX for their own special reasons:
1. The automated way: Once you are listed as a tracker the only way to set a top level cookie from your embedded app is to request storage access from safari from within the iframe.
Broadly speaking you will need to:
- send the user to the top level enable cookies page, on click send them back to the embedded app as directed in the Shopify guide
- when they enter the embedded app again you need to record another user gesture from within the iframe, and then while "consuming" the gesture requestStorageAccess from the browser. The browser should remember you just visited the enable cookies page and grant access, but in some cases it will make the user click a dialog box to grant storage access (meaning 3 useless clicks to get into the app). The fun part is that once the browser lists you as a tracker this is required every time the user opens the app. There are a lot of specifics I left out since this is ultimately a really un-professional experience for the user, and is a major headache to try and work in to your auth flow, but it does work. If anyone wants more specifics on this let me know and I can outline as needed, but I really don't recommend it.
2. Clear the browser history: Completely clearing the browser history will un-list your domain as a tracker. Since the ITP rules are not public I'm not sure how long until you might be listed as a tracker again.
3. Turn off "Prevent cross-site tracking." Asking a lot from the user but this will of course solve all of your 3rd party cookie woes. Defeats the purpose of all of this work though.
4. Use another browser: We can turn Safari into the new IE as punishment for Apple's vague and confusing rollout of ITP 2
Ultimately we decided to set a session cookie when the user visits the enable-cookies page saying they visited it, then if they land on the enable-cookies page again and the session cookie is still there we break the auth loop and redirect them to a page that tells them then can clear their history, use another browser, etc.
All in all the above are technically solutions, but not very pretty ones. Safari has left a lot of collateral damage with their ITP 2.0 rollout and it seems like the Shopify docs haven't caught up. I need someone to blame for losing the last 2 weeks of my life though...