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

Highlighted
Tourist
8 1 11

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?

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

 

0 Likes
Highlighted
Tourist
8 1 11

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

0 Likes
Highlighted
Shopify Partner
56 5 22

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
Highlighted
Tourist
8 1 11

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

0 Likes
Highlighted
Shopify Partner
56 5 22

@pateketuwell Heroku uses something like Nginx under the hood.

0 Likes
Highlighted
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

2 Likes
Highlighted
Tourist
8 1 11

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

0 Likes
Highlighted
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.

0 Likes
Highlighted
Shopify Partner
19 0 4

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?

0 Likes