Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Re: Embedded App blocked by 3rd party cookie policy of Safari

Solved

Embedded App blocked by 3rd party cookie policy of Safari

chris_pappen
Shopify Partner
14 0 4

Hello guys,

I am in the middle of building my very first Shopify App. During installation I used the Shopify CLI to get started quickly and easily. I am using React + NodeJS + Mongo. 

Due to the fact that Safari is blocking all 3rd party cookies I am not able to get my app running on Safari. 😕 

My research revealed that devs are now "forced" to use session tokens to authenticate instead of cookies. Is that there any easier way?

If not: Although I've seen this tutorial I am kinda stuck of where to start since the guide doesn't provide clear coding details.

I'd highly appreciate any feedback.

Best,

Chris

Accepted Solution (1)

iain-campbell
Shopify Staff (Retired)
54 9 23

This is an accepted solution.

Hi Chris!

Browsers are slowly putting more and more restrictions on the use of cookies in iframes. As a result, we've built the new session token auth method to allow embedded apps to authenticate without persisting cookies. At this point, if you want your embedded app to work in Safari, you need to use session token auth. This will eventually become true for Firefox and Chrome as well. We're adapting to this situation too, and actively working on improving the tooling.

For example: we're in the process of updating the starter embedded app you get from Shopify CLI to use the new session token authentication. Long story short, getting session tokens to work with server-side rendering is not trivial. In the meantime, check out this thread on the App Bridge issues board: https://github.com/Shopify/shopify-app-bridge/issues/13. There’s a working example there using Next.js that might help you out.

If you haven't already checked out the Shopify Partners Slack workspace, I'd encourage you to join there as well. You can find the link in the Support section in Shopify Partners. Shopify staff are active there as well, and it can be quicker to work through issues there.

Hope this helps!

To learn more visit the Shopify Help Center or the Community Blog.

View solution in original post

Replies 8 (8)

Filljoy
Shopify Partner
211 10 67

Let me say first off that I don't know what the Node app that the Shopify CLI creates is doing under the hood (so this may not be helpful), but in my case I'm just using standard JS on the front end and Node on the server side. I've been messing around with this in my dev environment and it was pretty straightforward to implement using the "Use session token helpers directly" section of the tutorial. You use App Bridge Utils to get the jwt, and then someone published an npm library to validate it on your server side: https://www.npmjs.com/package/shopify-jwt-auth-verify. But again, I'm not sure how easy it is to modify or substitute whatever the existing Shopify CLI Node app is doing. 

 

 

chris_pappen
Shopify Partner
14 0 4

Thank for your answer. I'll look into it.

iain-campbell
Shopify Staff (Retired)
54 9 23

This is an accepted solution.

Hi Chris!

Browsers are slowly putting more and more restrictions on the use of cookies in iframes. As a result, we've built the new session token auth method to allow embedded apps to authenticate without persisting cookies. At this point, if you want your embedded app to work in Safari, you need to use session token auth. This will eventually become true for Firefox and Chrome as well. We're adapting to this situation too, and actively working on improving the tooling.

For example: we're in the process of updating the starter embedded app you get from Shopify CLI to use the new session token authentication. Long story short, getting session tokens to work with server-side rendering is not trivial. In the meantime, check out this thread on the App Bridge issues board: https://github.com/Shopify/shopify-app-bridge/issues/13. There’s a working example there using Next.js that might help you out.

If you haven't already checked out the Shopify Partners Slack workspace, I'd encourage you to join there as well. You can find the link in the Support section in Shopify Partners. Shopify staff are active there as well, and it can be quicker to work through issues there.

Hope this helps!

To learn more visit the Shopify Help Center or the Community Blog.

chris_pappen
Shopify Partner
14 0 4

Thanks a lot for this clear words!

 

I am going to check the Slack space and the board you mentioned. Can you give me some realistic dates on when the Shopify CLI will be able to provide the updated starter version? Perhaps it's a  good idea to wait if it's only 1-2 weeks.

 

Thanks!

chris_pappen
Shopify Partner
14 0 4

I just found this npm package. Do you think that could solve the issue?

https://www.npmjs.com/package/koa-shopify-auth-cookieless

chris_pappen
Shopify Partner
14 0 4

I just found this github Repo from Nate. Its a demo template for Shopify CLI to use session tokens instead of cookies.

https://github.com/nprutan/shopify-cookieless-auth-demo

 

 
Kim_H
Shopify Partner
5 0 0

Hi @iain-campbell! We have implemented the new cookieless authentication to our embedded app as you mentioned previously, but it still doesn't work properly in Safari when our customer checked their setting "prevent cross-site tracking". The app will stop with no popup hints and will display the following errors in browser console: 

Any solution/workaround about this problem? It seems like the same issue as described in this thread: Embedded app wont load in Safari - no Cookies and in this thread: Unsupported Content-Security-Policy directive breaks embedded apps on Safari.

iain-campbell
Shopify Staff (Retired)
54 9 23

Hi Kim, would you mind creating an issue for this on github? https://github.com/Shopify/shopify-app-bridge/issues/new?labels=bug&template=bug_report.md

Please include as much information as possible. If you can provide a link to a shop with the app installed, that would be very helpful as well.

To learn more visit the Shopify Help Center or the Community Blog.