@shopify/koa-shopify-auth

Middleware to authenticate a Koa application with Shopify.

Sister module to @shopify/shopify-express, but simplified.

Features you might know from the express module like the webhook middleware and proxy will be presented as their own packages instead.

Warning: 3.1.61-3.1.62 vulnerable to reflected XSS

Versions 3.1.61 and 3.1.62 are vulnerable to a reflected XSS attack. Please update to the latest version to protect your app.

Installation

1$ yarn add @shopify/koa-shopify-auth

Usage

This package exposes shopifyAuth by default, and verifyRequest as a named export.

1import shopifyAuth, {verifyRequest} from '@shopify/koa-shopify-auth';

shopifyAuth

Returns an authentication middleware taking up (by default) the routes /auth and /auth/callback.

1app.use(
2  shopifyAuth({
3    // if specified, mounts the routes off of the given path
4    // eg. /shopify/auth, /shopify/auth/callback
5    // defaults to ''
6    prefix: '/shopify',
7    // your shopify app api key
8    apiKey: SHOPIFY_API_KEY,
9    // your shopify app secret
10    secret: SHOPIFY_SECRET,
11    // scopes to request on the merchants store
12    scopes: ['write_orders, write_products'],
13    // set access mode, default is 'online'
14    accessMode: 'offline',
15    // app address, default is '', eg. "myshopifyapp.com"
16    appAddress: '',
17    // callback for when auth is completed
18    afterAuth(ctx) {
19      const {shop, accessToken} = ctx.session;
20
21      console.log('We did it!', accessToken);
22
23      ctx.redirect('/');
24    },
25  }),
26);

/auth

This route starts the oauth process. It expects a ?shop parameter and will error out if one is not present. To install it in a store just go to /auth?shop=myStoreSubdomain.

/auth/callback

You should never have to manually go here. This route is purely for shopify to send data back during the oauth process.

verifyRequest

Returns a middleware to verify requests before letting them further in the chain.

1app.use(
2  verifyRequest({
3    // path to redirect to if verification fails
4    // defaults to '/auth'
5    authRoute: '/foo/auth',
6    // path to redirect to if verification fails and there is no shop on the query
7    // defaults to '/auth'
8    fallbackRoute: '/install',
9  }),
10);

Example app

1import 'isomorphic-fetch';
2
3import Koa from 'koa';
4import session from 'koa-session';
5import shopifyAuth, {verifyRequest} from '@shopify/koa-shopify-auth';
6
7const {SHOPIFY_API_KEY, SHOPIFY_SECRET} = process.env;
8
9const app = new Koa();
10app.keys = [SHOPIFY_SECRET];
11
12app
13  // sets up secure session data on each request
14  .use(session({secure: true, sameSite: 'none'}, app))
15
16  // sets up shopify auth
17  .use(
18    shopifyAuth({
19      apiKey: SHOPIFY_API_KEY,
20      secret: SHOPIFY_SECRET,
21      scopes: ['write_orders, write_products'],
22      afterAuth(ctx) {
23        const {shop, accessToken} = ctx.session;
24
25        console.log('We did it!', accessToken);
26
27        ctx.redirect('/');
28      },
29    }),
30  )
31
32  // everything after this point will require authentication
33  .use(verifyRequest())
34
35  // application code
36  .use(ctx => {
37    ctx.body = '🎉';
38  });

Gotchas

Fetch

This app uses fetch to make requests against shopify, and expects you to have it polyfilled. The example app code above includes a call to import it.

Session

Though you can use shopifyAuth without a session middleware configured, verifyRequest expects you to have one. If you don't want to use one and have some other solution to persist your credentials, you'll need to build your own verifiction function.

Testing locally

By default this app requires that you use a myshopify.com host in the shop parameter. You can modify this to test against a local/staging environment via the myShopifyDomain option to shopifyAuth (e.g. myshopify.io).