Updating to latest version of @shopify/koa-shopify-auth does not set SameSite cookie

pateketu
Shopify Partner
14 1 15

Got the email from Shopify about upgrading Apps to ensure they work with New SameSite setting in Chrome, as per https://help.shopify.com/en/api/guides/samesite-cookies I update koa-shopify-auth version, but still, the cookies set by koa-shopify-auth does not have SameSite, in below screenshot first 4 cookies are I believe set up koa-shopify-auth and last two are by app code, which you can see has got SameSite. ShopifyCookies.PNG

 

Can some from koa-shopify-auth please confirm if we need to do any additional step/config?

Developer of
Multi-Location Inventory Info App (https://apps.shopify.com/location-inventory-info)
TagRobot Auto-Tagging app (https://apps.shopify.com/tag-robot)
Replies 13 (13)

stephanejais
Shopify Partner
1 0 0

I'm seeing the same thing: the  `shopifyNonce` and `shopifyTestCookie` cookies are missing the SameSite attribute.

 

One note though: the koa.session cookie is your responsibility. You set the sameSite attribute directly through the Koa session api like this:

 

server.use(session({sameSite: 'none',}, server));

 

pateketu
Shopify Partner
14 1 15

@stephanejais I figured that about session cookies, you also need to set secure:true

 

Other confusing bit is I tested out my existing app (which does not have samesite settings) on Chrome 80 Beta and it works as normal no issue, so do we really need this samesite setting?

Developer of
Multi-Location Inventory Info App (https://apps.shopify.com/location-inventory-info)
TagRobot Auto-Tagging app (https://apps.shopify.com/tag-robot)
tolgapaksoy
Shopify Partner
105 7 64

Also, if you bind your shopify app on an HTTP connection, like localhost, and then use proxy like Ngrok or Nginx to use HTTPS, you must set your koa-server up as a proxy:

 

const server = new Koa();
server.proxy = true;
pateketu
Shopify Partner
14 1 15

@tolgapaksoy  had to do the proxy bit when running on Heroku also

Developer of
Multi-Location Inventory Info App (https://apps.shopify.com/location-inventory-info)
TagRobot Auto-Tagging app (https://apps.shopify.com/tag-robot)
tolgapaksoy
Shopify Partner
105 7 64

@pateketuwell Heroku uses something like Nginx under the hood.

Sean_O_Loughlin
Shopify Partner
9 0 2

I have added the sameSite settings on koa-sessions.

 

app.use(session({ sameSite: 'none', secure: true }, app));

and also enabled proxy to true for Heroku/ngrok.

 

app.proxy = true;

 

I have also noticed that the cookies set from the @shopify/koa-shopify-auth version 3.1.55 package does not have sameSite: 'none'. Testing on Version 82.0.4047.0 (Official Build) canary (64-bit) - the developer console is displaying warnings.

 

shopify-cookies.png

 

The shopifyNonce value is used to validate the response from Shopify https://github.com/Shopify/quilt/blob/5ba6cd69793a071950467c5f09c4dee9e93d15d0/packages/koa-shopify-...

 

This cookie value cannot be read and my app displays 'Request origin could not be verified' in the browser. I have also enabled the sameSite experimental flags in Chrome at chrome://flags/#samesite

 

samesite-chrome.png

pateketu
Shopify Partner
14 1 15

In Chrome 80 I have just tried with all the samesite flags enabled, my app i still working so I am confused, I do get a message about blocked cookie in the console but everything works

Developer of
Multi-Location Inventory Info App (https://apps.shopify.com/location-inventory-info)
TagRobot Auto-Tagging app (https://apps.shopify.com/tag-robot)
Sean_O_Loughlin
Shopify Partner
9 0 2

@pateketuI was originally testing locally using ngrok. I have deployed to Heroku and I am no longer encountering this error.

greg-gkr
Shopify Partner
21 0 8

I've added all (I think) the necessary changes for sameSite issue, but I'm getting this error:

 

TypeError: option sameSite is invalid
2020-03-08T04:15:42.980763+00:00 app[web.1]:       at new Cookie (/app/node_modules/cookies/index.js:146:11)
2020-03-08T04:15:42.980763+00:00 app[web.1]:       at Cookies.set (/app/node_modules/cookies/index.js:88:16)
2020-03-08T04:15:42.980764+00:00 app[web.1]:       at oAuthStart (/app/node_modules/@shopify/koa-shopify-auth/dist/src/auth/create-oauth-start.js:18:21)
2020-03-08T04:15:42.980765+00:00 app[web.1]:       at /app/node_modules/@shopify/koa-shopify-auth/dist/src/auth/index.js:47:46
2020-03-08T04:15:42.980765+00:00 app[web.1]:       at step (/app/node_modules/tslib/tslib.js:136:27)
2020-03-08T04:15:42.980766+00:00 app[web.1]:       at Object.next (/app/node_modules/tslib/tslib.js:117:57)
2020-03-08T04:15:42.980766+00:00 app[web.1]:       at /app/node_modules/tslib/tslib.js:110:75
2020-03-08T04:15:42.980766+00:00 app[web.1]:       at new Promise (<anonymous>)
2020-03-08T04:15:42.980767+00:00 app[web.1]:       at Object.__awaiter (/app/node_modules/tslib/tslib.js:106:16)
2020-03-08T04:15:42.980767+00:00 app[web.1]:       at shopifyAuth (/app/node_modules/@shopify/koa-shopify-auth/dist/src/auth/index.js:34:24)

Here's the key parts of the code

 

app.prepare().then(() => {
  const server = new Koa();
  server.proxy = true;
  server.keys = [SHOPIFY_API_SECRET_KEY];
  server.use(session({
      secure: true,
      sameSite: 'none',
    },
    server)
  );
...
ctx.cookies.set("shopOrigin", shop, { httpOnly: false, sameSite: 'none', secure: true });

Any suggestions?

ZainManji
Shopify Partner
58 0 55

Having the same issue 😞

 

Getting "Request could not be verified" after clicking install on the app

greg-gkr
Shopify Partner
21 0 8

I solved the issue by updating to the latest version of koa-shopify-auth, deleting the node_modules folder and package-lock.json then running npm install.

 

You need v0.8.0 of the cookies package to be installed to avoid the error I was getting.

ZainManji
Shopify Partner
58 0 55

I also updated to the latest koa-shopify-auth version, but the problem is the callback URL that is set after clicking "Install app" doesn't have the state query param in it.

 

Which is why the 

Request origin could not be verified

error shows up.

 

 This is the part in the code of koa-shopify-auth repo that is triggering this error - and I'm not sure how to solve this https://github.com/Shopify/quilt/blob/master/packages/koa-shopify-auth/src/auth/create-oauth-callbac...

PrivacyPixel
Visitor
2 0 1

This is my server.js file:

require('isomorphic-fetch');
const dotenv = require('dotenv');
const Koa = require('koa');
const next = require('next');
const { default: createShopifyAuth } = require('@shopify/koa-shopify-auth');
const { verifyRequest } = require('@shopify/koa-shopify-auth');
const session = require('koa-session');
const cors = require('@koa/cors');
const bodyParser = require('koa-bodyparser');
const { router } = require('./server/routes.js');

dotenv.config();

const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

const { SHOPIFY_API_SECRET_KEY, SHOPIFY_API_KEY } = process.env;

app.prepare().then(() => {
  const server = new Koa();
  server.proxy = true;
  server.use(session({ secure: true, sameSite: 'none' }, server));
  server.keys = [SHOPIFY_API_SECRET_KEY];

  server.use(async (ctx, next) => {
    try {
      await next();
    } catch (err) {
      console.log(`${ctx.method} ${ctx.url}`);
      console.log(err);
    }
  });

  server.use(
    createShopifyAuth({
      apiKey: SHOPIFY_API_KEY,
      secret: SHOPIFY_API_SECRET_KEY,
      scopes: ['read_themes', 'write_themes'],
      afterAuth(ctx) {
        const { shop, accessToken } = ctx.session;
        ctx.cookies.set('accessToken', accessToken, {
          httpOnly: false,
          secure: true,
          sameSite: 'none',
        });
        ctx.cookies.set('shopOrigin', shop, {
          httpOnly: false,
          secure: true,
          sameSite: 'none',
        });
        ctx.redirect('/');
      },
    }),
  );

  server.use(bodyParser());

  server.use(router.routes());
  server.use(router.allowedMethods());

  server.use(verifyRequest());
  server.use(cors());
  server.use(async (ctx) => {
    await handle(ctx.req, ctx.res);
    ctx.respond = false;
    ctx.res.statusCode = 200;
  });

  server.listen(port, () => {
    console.log(`> Ready on http://localhost:${port}`);
  });
});


As you guys can see I'm setting:

server.use(session({ secure: true, sameSite: 'none' }, server));

ctx.cookies.set('accessToken', accessToken, {
    httpOnly: false,
    secure: true,
    sameSite: 'none',
});

ctx.cookies.set('shopOrigin', shop, {
    httpOnly: false,
    secure: true,
    sameSite: 'none',
});
But it still doesn't work and the Shopify reviewer won't let my app be approved because of this.
This is the list of dependencies, all bleeding edge:
"dependencies": {
    "@koa/cors": "^3.0.0",
    "@shopify/app-bridge-react": "^1.19.0",
    "@shopify/koa-shopify-auth": "^3.1.63",
    "@shopify/polaris": "^4.16.0",
    "@zeit/next-css": "^1.0.1",
    "babel-eslint": "^10.1.0",
    "dotenv": "^8.2.0",
    "isomorphic-fetch": "^2.2.1",
    "js-cookie": "^2.2.1",
    "koa": "^2.11.0",
    "koa-bodyparser": "^4.3.0",
    "koa-router": "^9.0.1",
    "koa-session": "^6.0.0",
    "next": "^9.4.4",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "webpack": "^4.42.1"
},
I don't know what else I can do to fix this problem.