Some Third-Party Apps may not be accessible on Chrome 80 update

[TyW]

On February 17th 2020, an update to the Google Chrome browser (Chrome 80) will change the way websites are able to access browser cookies.

As your Shopify admin relies on cookies to authenticate with apps you have installed on your store, this may impact some of the Shopify apps you use if the developer has not updated their app to support this change.

When accessing an affected app, you may see a cookie error, constant loading, app error screen or missing functionality.

This issue only affects you if:

• you upgrade to Chrome 80 or later
• use an app that loads within the Shopify admin, also known as an embedded app
• the app’s developer has not updated their code for Chrome 80

Temporary workarounds:

• open the Shopify admin with another browser to access the app. Alternatives include Firefox or Safari (this will only work temporarily).
• install an alternative app from the Shopify App Store that has updated to function on Chrome 80

If you are using an app affected by this issue, please contact the app’s developer so that they are aware they need to make updates to support Chrome 80.

[Christine_1]

Hello, 

I am very concerned that my 3rd Party Loyalty app is not working from my website.  Currently, I am on a Free Trial with Marsello and not able to utilize their services. The Loyalty Widget pops up from our home screen but redirects back to the homepage when customers try to register their profiles.  I have contacted Marsello, but they claimed the to be an issue with Shopify not their technology.  

Please, contact me if  you have additional questions about my issue. 

Thank you, 

[ch3ck]

Hi Christine, I'm interested in learning more about your security issues with your user. Will you be available for a quick chat?

Thanks,

Nyah

[robertk0215]

Non of my 3rd party apps working!

[johnnywang]

if you are using Shoify app gem, and  dont want to upgrade your shopify api lib, you can install this rails_sate_site_cookie gem

https://github.com/pschinis/rails_same_site_cookie

[aldrien]

Hi @johnnywang I'm still getting this flag error.

[Khasan]

Hello, I have the same issues. I have tried with the Firefox browser and Internet Explorer tried. I even used another WIFI but still, I couldn't finish setting up apps.

Please let me know.

How I can set up apps now? Does it temporary this issue? 

[jabryer]

So what are we to do in this situation. I have this message that "private apps installed on your store need to be updated by a developer before april 1, 2020 to continue working " and I have multiple apps? 

[Khasan]

I have resolved the problem! I have finished the set up via my Shopify app on my phone! and it is working perfectly!

[SFICDan]

I am now able to use my apps...I just had to allow third party cookes in the Chrome settings. Uncheck "Block third-party cookies" in Settings: Privacy and security: Cookies and site data.

[Elly1]

Thank you so much!! All of a sudden yesterday I could not access the ebay channel to load more listings. This fix worked like a charm!

[traceyfurness]

Thanks so much for the help, quicker than customer support. I allowed cookies and it updated and I could add the California opt out privacy policy.

[MokoolApps]

If you can test and see if I got this issue would be appreciated -https://apps.shopify.com/mokool-translate-pro.    Just released a new app and dont see this issue, but wanna make sure if we do it gets fixed.

[Vicente]

@MokoolApps , I am currently developing an embedded app too and I was able to solve the problem about third party cookies in chrome. However I have a problem when using Chrome Canary version 85 if it is in incognito mode where in setting is turn on to Block third party cookies.   I can't seems to find a solution for this issue.  I would be happy if someone can point me to a right direction on solving this issue.

[navadiyasank]

I am Ruby On Rails Developer and use https://github.com/Shopify/shopify_app for develop Shopify public app. The app is rejected from shopify side with the reason samesite cookie issue.
I have try to fic the issue as per the guidance suggested by them and I have updated My shopify Appp gem to the latest version. still issue is not fixed. Can anyone please help me to fic this error So I resubmit the app for review to shopify again?
you can check referene video here: https://www.loom.com/share/43cde6e6d4334bb481ecbf37685c3837

[StarlightTears]

Hello, i was updated code like https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react. but problem still same. Still...Can help us check ? 

[trong-nghia]

i need help connet to gogle shop. trong-nghia-nguyen.myshopify.com. 

mail: davisnguyen983@gmail.com

[kosta1994r]

dododo

[SimplyLotus]

Hello I'm having trouble connecting my store to SHIPSTATION? I keep getting a " a remote server returned as error.  UNAUTHORIZED " ???

[Cheej]

Hi, I am having issue with some of the apps setting. i have been trying to set up volume and discounted pricing and Sticky add to cart booster pro apps but both of those apps lead me to payment method page and when try to put my details clicking on any of the options, I cannot proceed further. i am not getting what is wrong ? i tried to do it from my mobile, used different browsers and even uncheck thirdparty cookies. but still i am not able to set up those apps. Any kind of suggestion would be a great help. thanks 

[Cheej]

it is not under Buy Botton. After instaling, when i click on them, it shows the page which i have attached below.  i tried to put my detail clicking on credit card, it is just stuck in middle. can you the green line? I have been trying to resolve this problem for 3/4 days. 

[Cheej]

it is not under Buy Botton. After instaling, when i click on them, it shows the page which i have attached below.  i tried to put my detail clicking on credit card, it is just stuck in middle. can you the green line? I have been trying to resolve this problem for 3/4 days. 

[Cheej]

it is not under Buy Botton. After instaling, when i click on them, it shows the page which i have attached below.  i tried to put my detail clicking on credit card, it is just stuck in middle. can you the green line? I have been trying to resolve this problem for 3/4 days. 

[wasim-akhtar]

I am having trouble with my app as it gets caught in the redirection loop. The app uses Rails v5.2 , Ruby v2.5.1 , shopify_app v13.4.0 and shopify_api v9.1. 

I have whitelisted redirection urls with https as well as http.  After authorization, for some reason it uses http as redirect_url and Chrome complains about cookie not using

Secure causing the app to redirect in endless loop.  If I remove the http url from whitelisted urls, then I get redirect_uri mismatch. 

Does anyone faces the similar issue? 

[sanfordeliot]

I tried your suggestion to use Firefox instead of Brave or Chrome and I still have two apps that don't work.

[Adam_Hurlburt]

I followed the steps in the doc: https://shopify.dev/tutorials/migrate-your-app-to-support-samesite-cookies and am still having issues.

I have made the changes to set the samesite and secure attributes and thought my app was working fine after installation however after restarting browser it is stuck in an endless redirect loop throwing app bridge errors, when I check the chrome issues I see the cookie "shopifyTopLevelOAuth" for my domain is being blocked.

I can get the app to work again if I manually call /auth?shop=XXX, but then after restarting browser I get stuck in the same loop.

I'm not sure where that shopify cookie is being set but something is not working correctly. My auth follows the example for node/react and was updated to support same site cookies according to the doc I mentioned at the start of this post.

After selecting the app from shopify admin this is the response I get back:

HTTP/1.1 200 OK Server: nginx/1.10.3 (Ubuntu) Date: Thu, 13 Aug 2020 13:02:39 GMT Content-Type: text/html; charset=utf-8 Transfer-Encoding: chunked Connection: keep-alive Set-Cookie: shopifyTopLevelOAuth=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT; secure; httponly X-Powered-By: Next.js ETag: "28c5-e7iyK0tvAa0ccy4qire7+lwH0yw" Vary: Accept-Encoding Content-Encoding: gzip

There is a warning in chrome indicating the cookie for shopifyTopLevelOAuth was blocked because it is missing the samesite attribute. From what I can tell koa-shopify-auth package should be setting this response. I am using the latest package: 

"@shopify/koa-shopify-auth": "^3.1.65",

On further inspection I am wondering if this line in koa-shopify-auth is the problem since it does not set the samesite attribute for the shopifyTopLevelOAuth cookie?

https://github.com/Shopify/quilt/blob/5ba6cd69793a071950467c5f09c4dee9e93d15d0/packages/koa-shopify-...

[maltillo]

@Adam_Hurlburt are you getting something like this? 

[Adam_Hurlburt]

For me it just freezes the chrome tab after spamming errors about the app bridge not getting the shop origin.

This happens only after a period of time when I go back into the app (guessing the session times out)

If I append /auth?shop=shopname to the url then the app starts working again for awhile until the session expires.

[Markus04xD]

@Adam_Hurlburt Have you found a fix for this yet? We are having the same problem with our private app.

[Adam_Hurlburt]

@Markus04xD - yes I have found a workaround. 

I did some debugging and found that although the koa session still has the shop and the access token, the example code from shopify (https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react/build-your-user-interface-with...) sets the shopOrigin cookie value only during afterAuth(). 

The snippet:

server.use(
    createShopifyAuth({
      apiKey: SHOPIFY_API_KEY,
      secret: SHOPIFY_API_SECRET,
      scopes: [SCOPES],

      async afterAuth(ctx) {
        //Auth token and shop available in session
        //Redirect to shop upon auth
        const { shop, accessToken } = ctx.session;
        ctx.cookies.set("shopOrigin", shop, {
          httpOnly: false,
          secure: true,
          sameSite: "none"
        });
        ctx.redirect("/");
      }
    })
  );

The App Bridge Provider is then initiated in the App component with this code in the example, showing to use cookies:

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    const shopOrigin = Cookies.get("shopOrigin");
    return (
      <Container>
        <AppProvider i18n={translations}>
          <Provider
            config={{
              apiKey: API_KEY,
              shopOrigin: shopOrigin,
              forceRedirect: true
            }}
          >

The problem I found was that the cookie being set this way expires after the browser session and was not being re-instantiated (unless there was a new auth redirect). Koa-shopify-auth will only redirect to auth if the session is no longer valid (shop origin changes or session cookie koa-sess is removed). So I was seeing a situation which may be the same as what you are seeing where the app would start throwing errors after a while saying the App Bridge could not be instantiated because shoporigin wasn't passed. 

It seems like this manifests intermittently, I never dug into how it was working before and if koa session would re-init the cookies based on the previous session or something. Or maybe the session was longer lived before and has changed due to some internals. I'm not sure. But what I have found during my debugging is that the koa-sess cookie is still valid but the shopOrigin cookie has been deleted and this will cause this problem to manifest.

Regardless of how this is working, I think this is a flawed approach to getting the shopOrigin via cookie since it is disconnected from the actual auth mechanism (from what i can tell in koa-shopify-auth the cookie is never set and afterAuth will only be called again if koa-sess is invalid). These have different TTLs and so I think it's error prone and that's what I am seeing. But I'm not an expert in web dev so if I'm wrong about how this is working I would appreciate the explanation.

As a workaround, I updated the next app server.js from

server.use(async (ctx) => {     
    await handle(ctx.req, ctx.res);
    ctx.respond = false;
    ctx.res.statusCode = 200;
    console.log(`server responding: ${ctx.req.url}`);
    return
  });

to 

server.use(async (ctx) => { 
    
    if (typeof ctx.cookies.get('shopOrigin') === "undefined" && typeof ctx.session.shop !== "undefined") {
      ctx.cookies.set('shopOrigin', ctx.session.shop, { httpOnly: false, sameSite: 'none', secure: true });
      ctx.redirect(ctx.req.url);
      return
    }
    
    await handle(ctx.req, ctx.res);
    ctx.respond = false;
    ctx.res.statusCode = 200;
    console.log(`server responding: ${ctx.req.url}`);
    return
  });

This ensures the cookie is set for when the App component is rendered. Note that I initially tried to just set the cookie and then allow the rest of the method block to complete but this didn't work on initial load, likely because the cookie wasn't actually set when the App component was rendered. Redirecting seemed to solve the issue and should only happen in the event the cookie expires. 

You should be able to test if you have a similar problem by opening chrome dev tools, deleting the shopOrigin cookie and reloading your app before and after the change. Before the change, you should see the koa-sess cookie but no shopOrigin cookie (except right after auth). After the change if you delete it, it will be restored and the page will load appropriately.

I hope this helps you and others. This still seems strange to me since I am surprised the shopify example app doesn't have problems, but maybe it has never been tested recently after the session expires, it is just an example app overall. Additionally, I'm not using Apollo (which maybe will restore the cookie during the fetch credentials), the example code has an apollo client.

[ram151]

I wanted to import Ali express review to my store but unable to import pls help 

[JERSEYQUEENS81]

NEED HELP PLS

[chica1]

i want to ge the pixel

[Kim_H]

Hello,

We have developed an app which is embedded admin app.

Our merchant have encountered a problem that they may get error "The app couldn't be loaded" in chrome, when they are trying to enter our app THREE times (loop: clicking "Apps" in Shopify menu and then access our app from installed app list). Although merchants can normally access our app again at the forth time then, we are afraid that there is still have issue we missed to handle.

I would like to know if Shopify have engaged any rules to handle the cookie by deleting it (or something) if merchant is trying to authenticate too often?

There seemed to have another way to authenticate merchants (we haven't tried yet). Does any one can suggest how to solve it? It would be better if we don't need to replace session cookies with session tokens.

Let me know if you need more info. Thanks!

[mrgee]

i thank i update chrome 80 it asking for a code

[strgzr]

This seems to include the Facebook Sales Channel... any idea when the app will be updated?

Cheers.

[MyDreamStore40]

www.MyDreamStore40.com

[trynatty]

I tried to connect the Geolocation app to my store shop but I couldn't.
Please if you are able to help me it will be great. I am starting my own business right now also I am no expert about it, websites and stuff like that.
 My page is TRYNAATY, if you see something wrong as update, please let me know.

[Facebook]

Hi This is my firs app

[iffikhan30]

Run This command your issue will be resolve.

npm run config:link
npm run config:push
npm run dev