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

Retired Boards Appdev Store Design
1

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
ShopifyCookies.PNG1331×299 23.4 KB

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

3 Likes
2

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));
3

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

4

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;
2 Likes
5

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

6

@pateketu well Heroku uses something like Nginx under the hood.

7

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
shopify-cookies.png1644×131 8.64 KB

The shopifyNonce value is used to validate the response from Shopify https://github.com/Shopify/quilt/blob/5ba6cd69793a071950467c5f09c4dee9e93d15d0/packages/koa-shopify-auth/src/auth/create-oauth-callback.ts#L16

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
samesite-chrome.png809×547 45.7 KB

2 Likes
8

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

9

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

10

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?

11

Having the same issue :frowning:

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

12

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.

1 Like
13

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-callback.ts#L17

3 Likes
14

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.

1 Like