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)
Mykhailo
Shopify Partner
9 1 5

Same issue on Aug 2021

bdowling
Pathfinder
80 13 45

Maybe this fix will resolve it: https://github.com/Shopify/shopify-node-api/pull/169 ... it will hopefully be released soon.

dragos_109
Visitor
1 0 0

Hey, Micheal I tried reading it and I'm not good at coding and stuff like that but im not really sure where I should download it and how. I was hoping you could explain it a little bit more for me.

TheImpalerMag
Visitor
1 0 0

SOLUTION

Go to preferences and turn off prevent cross site tracking. 

worked for me. hope it helps all of you. using Mac OS 10.15.6 safari 13.1.2

fScreen Shot 2021-02-02 at 4.12.08 PM.png

TSEHE
Visitor
1 0 1

same in Chrome

sam12341
Tourist
13 0 3

I just tried to go through this yesterday and also got stuck in the redirect loop. 

Is the tutorial up to date, or is there a finished version that is up to date that is available for comparison? 

kevlar27
Visitor
1 0 0

same issue for me. wondering how to resolve.

aburak256
Tourist
8 0 0

Same issue. I tried Chrome and Edge browsers, didn't change anything. I wonder if the tutorials are up to date

amrooz
Shopify Partner
7 0 0

I had similar reaction. I tried to run app using cookiless auth so I run chrome in incognito mode. But it keeps prompting that I should enable cookies and redirects.

JonathanMucha
Shopify Partner
5 0 0

Same issue here. While attempting to move from cookies to session tokens in my app this issue popped up. The odd thing for me is that my app isn’t using cookies anywhere, and I don’t have any idea what’s causing this issue. 

Marwan1999
Tourist
4 0 0

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

PublicApps
Shopify Partner
146 5 34

FYI: Still experiencing this loop in Nov 2020 using:

  • koa-shopify-auth: 3.1.72
  • Safari 14.0

(Chrome 86.0 and Firefox 82.0 are OK).

Public Apps | Theme customization & App development
 - Was my reply useful? Like it to let me know!
 - Did I answer your question? Please mark as Accepted Solution.
 - Need more help? Contact us.

Bahai-Books
Visitor
1 0 1

FYI: We are also experiencing this concern with our custom App. Using Chrome is the current work-around but presumably over time, browsers will become more strict and this infinite loop problem in Safari may also occur in other browsers. Senior staff at Apple Support have not been able to help.

More Actions: Edit Book Metadata to load our app
Screen Shot 2020-11-17 at 7.45.15 am.jpg

 

A popup requesting access

Screen Shot 2020-11-17 at 7.45.31 am.jpg

And an infinite loop... 

Screen Shot 2020-11-17 at 7.45.49 am.jpg

MacOS 11.0.1

Safari 14.0.1

JohnCosmekLabs
Tourist
3 0 3

I can confirm that I am seeing this issue in my apps as well (Safari 14 on Desktop, and Mobile Safari). Could someone on the Shopify side please give us some details as to when we can expect a fix?

PS @Shopify/koa-shopify-auth v3.1.72 does not solve the issue

chris_pappen
Shopify Partner
14 0 4

Same issue here with koa-auth on the latest version. Shopify any updates regarding an update to this package? Thanks, Chris

miguelisolano
Visitor
1 0 1

We're experiencing the same issue with Safari 13.0.4 on Mac 10.15.2 and the latest version of koa-auth. Thank you Shopify in advance for any updates on this.

Lindsey_Fallow
Visitor
1 0 0

Also seeing this with latest versions of Koa-auth

Mac 10.14.6, Safari 14.0.1

BenWa
Visitor
1 0 0

Same error with Brave Browser (Version 1.19.88 Chromium: 88.0.4324.96) with version @Shopify/koa-shopify-auth 3.2.0

No error with Chrome...

hannachen
Shopify Staff
54 8 17

Hi @Bahai-Books, thank you for your screenshot and detailed description of the bug you've encountered. After some investigation, it looks like there was indeed a bug with app links where the host parameter might be missing during auth. One of the fixes has gone in, and we are currently getting the last of the fix in place.

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

Burty
New Member
5 0 0

0D4F16CF-E55A-478B-9639-1E6CEEDCD27B.png

This same problem appears when trying to view the Pinterest Channel through the iPhone app  and on safari for the iPhone. It works perfectly fine on safari on my Mac. Is there a fix for this?

scyan
Visitor
1 0 0

 

Same issue,is this problem solved?

amrooz
Shopify Partner
7 0 0

I had such case on chrome. But I used some old boilerplate.

After bumping @Shopify/koa-shopify-auth to 4.1.3 from 3.1.2 and few other stuff, it's working. 
If you have any problems, I suggest to try the newest boilerplate.

IntelliAssist
Visitor
1 0 1

Can someone help with the below server.js file

Issues : 

On first time OAuth of App installation it redirects perfectly.

On second time when App is clicked from Store Dashboard it Embeds it in Shopify Dashboard event when IS_EMBEDDED_APP is set to false

 

Now when the node server is restarted, and the app page is opened from shopify dashboard it redirect to the url but with a pop up of manually enabling cookies is browser. 

How to fix it ?

 

 

require('isomorphic-fetch');
const dotenv = require('dotenv');
const Koa = require('koa');
const session = require('koa-session');
const next = require('next');
const {
  default: shopifyAuth
} = require('@shopify/koa-shopify-auth');
const {
  verifyRequest
} = require('@shopify/koa-shopify-auth');
const {
  default: Shopify,
  ApiVersion
} = require('@shopify/shopify-api');
const Router = require('koa-router');

const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== 'production';

dotenv.config();
console.log(process.env.SHOPIFY_APP_URL);

Shopify.Context.initialize({
  API_KEY: process.env.SHOPIFY_API_KEY,
  API_SECRET_KEY: process.env.SHOPIFY_API_SECRET_KEY,
  SCOPES: process.env.SHOPIFY_API_SCOPES.split(","),
  HOST_NAME: process.env.SHOPIFY_APP_URL.replace(/https:\/\//, ""),
  API_VERSION: ApiVersion.October20,
  IS_EMBEDDED_APP: false, 
  SESSION_STORAGE: new Shopify.Session.MemorySessionStorage(),
});

const app = next({
  dev: dev
});
const handle = app.getRequestHandler(); 


const ACTIVE_SHOPIFY_SHOPS = {};

app.prepare().then(() => {

  const server = new Koa();
  const router = new Router();
  server.keys = [Shopify.Context.API_SECRET_KEY];
  server.proxy = true;


  server.use( 
    shopifyAuth({
      accessMode: 'offline',

      afterAuth(ctx) {


        const {
          shop,
          accessToken
        } = ctx.state.shopify;

        console.log('shop is:-    ' + shop);
        console.log('accessToken is:-    ' + accessToken);

        
        ACTIVE_SHOPIFY_SHOPS[shop] = 26787535;
        ctx.redirect(`/?shop=${shop}`); 



      },
    }),
  );


  const handleRequest = async (ctx) => {
    await handle(ctx.req, ctx.res);
    ctx.body = 'Intelliassist API SERVER'; 
    ctx.res.statusCode = 200;
  };

  router.get("/", async (ctx) => {
    const shop = ctx.query.shop;

    if (ACTIVE_SHOPIFY_SHOPS[shop] === undefined) {
      ctx.redirect(`/auth?shop=${shop}`); 
    } else {
      let sysAdminId = ACTIVE_SHOPIFY_SHOPS[shop];
      let redirectUrl = `https://intelliassist.co/elogin?eCommSolution=shopify&shop=${shop}&userId=${sysAdminId}`;

      console.log(redirectUrl);
      ctx.redirect(redirectUrl);
    }
    
  });

  router.get("(/_next/static/.*)", handleRequest);
  router.get("/_next/webpack-hmr", handleRequest);
  router.get("(.*)", verifyRequest({
    accessMode: 'offline'
  }), handleRequest);

  server.use(router.allowedMethods());
  server.use(router.routes());

  server.listen(port, () => {
    console.log(`> Ready on http://localhost:${port}`);
  });
});

 

 

On Opening App Page after Server RestartOn Opening App Page after Server RestartOn Repetitive Opening App Page After OAuth is doneOn Repetitive Opening App Page After OAuth is done 

Travis25
Visitor
2 0 0

Hi just needed an update on this issue ? Is the last fix on the way ? I am also using session based auth and facing the enable cookies error. When you said host is missing during auth what exactly do you mean by the can you guide me in the right direction from where is this error originating ?

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.

Shruti9
Tourist
6 0 12

Hello

i am not able to get the site to work with this ALLOW THIRD PARTY COOKIES issue on Safari or Chrome .  Why is this still happening. 

suancarloj
Visitor
2 0 1

I was facing the same issue although I implented the shopify session, I managed to fix the issue.

 

The issue was that some pages had the same path as some api endpoints

ken157
Shopify Partner
12 0 4

Facing the same issue
https://gyazo.com/0b7558f0275abefe564a901eefe6f01a

package.json
https://pastebin.com/eBpSfGaA

Tested on:
Chrome: 96.0.4664.110 
Brave: 1.33.106

Requests:
https://gyazo.com/c5b2c10ba0691eb682da8a0aea4d0460

 

rubyflores
Shopify Partner
12 0 0

We're experiencing a similar problem, would you by any chance know of a dev that can help fix this? 

rubyflores
Shopify Partner
12 0 0

We're experiencing a similar issue, I am looking for a dev that can help with this, does have anyone have referrals?  we can be reached at buyonecollective@gmail.com