Re: Shopify App Gets Caught in Infinite 'Enable Cookies' loop in Safari
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:
- 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:
- After accepting this, and logging in to my store as normal, I get the standard OAuth permission screen.
- After clicking "Install unlisted app" I get a standard Approve Charge screen, and accept the charges there.
- At this point, the browser briefly goes to the sample app's default page, NOT in the Shopify admin iFrame.
- 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... - 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
- 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.
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
f
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
A popup requesting access
And an infinite loop...
MacOS 11.0.1
Safari 14.0.1
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?
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}`);
});
});
