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

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

0 Likes
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.

0 Likes
Burty
New Member
5 0 0

Thank you Sebastina  works a treat!

0 Likes
IntelliAssist
New Member
1 0 0

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 

0 Likes
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 ?

0 Likes
tomasdelaveau
New Member
14 0 0

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.

0 Likes
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.

0 Likes