FROM CACHE - en_header

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

Solved
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.

Replies 75 (75)
Sebastina
New Member
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

 

scyan
New Member
1 0 0

 

Same issue,is this problem solved?

amrooz
Tourist
6 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.

Burty
New Member
5 0 0

Thank you Sebastina  works a treat!

IntelliAssist
New Member
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
New Member
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 ?

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
New Member
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
16 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 43

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.  

Mykhailo
Shopify Partner
9 1 4
bdowling
Pathfinder
80 13 43

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

suancarloj
New Member
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
6 0 0