Focuses on API authentication, access scopes, and permission management.
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:
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:
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.
Solved! Go to the solution
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.
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.
Same issue on Aug 2021
Maybe this fix will resolve it: https://github.com/Shopify/shopify-node-api/pull/169 ... it will hopefully be released soon.
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.
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
same in Chrome
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?
same issue for me. wondering how to resolve.
Same issue. I tried Chrome and Edge browsers, didn't change anything. I wonder if the tutorials are up to date
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.
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.
the same problem for me too
pleaz share if there is an update
FYI: Still experiencing this loop in Nov 2020 using:
(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.
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
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
Same issue here with koa-auth on the latest version. Shopify any updates regarding an update to this package? Thanks, Chris
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.
Also seeing this with latest versions of Koa-auth
Mac 10.14.6, Safari 14.0.1
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...
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
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?
Same issue,is this problem solved?
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.
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}`);
});
});
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 ?
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.
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.
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
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
We're experiencing a similar problem, would you by any chance know of a dev that can help fix this?
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