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

Highlighted

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

Sanford Eliot Knits
0 Likes
Highlighted
Excursionist
34 1 5

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

0 Likes
Highlighted
Shopify Partner
12 0 0

@Adam_Hurlburt are you getting something like this? 

 

0 Likes
Highlighted
Excursionist
34 1 5

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.

0 Likes
Highlighted
Tourist
4 0 2

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

0 Likes
Highlighted
Excursionist
34 1 5

@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.

1 Like
Highlighted
New Member
1 0 0

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

0 Likes
Highlighted
New Member
1 0 0

NEED HELP PLS

0 Likes