,
136 | path?: string,
137 | exact?: boolean,
138 | strict?: boolean
139 | }> {}
140 |
141 | declare export class Switch extends React$Component<{
142 | children?: React$Node
143 | }> {}
144 |
145 | declare export function withRouter(
146 | Component: React$ComponentType
147 | ): React$ComponentType;
148 |
149 | declare type MatchPathOptions = {
150 | path?: string,
151 | exact?: boolean,
152 | sensitive?: boolean,
153 | strict?: boolean
154 | };
155 |
156 | declare export function matchPath(
157 | pathname: string,
158 | options?: MatchPathOptions | string
159 | ): null | Match;
160 | }
161 |
--------------------------------------------------------------------------------
/flow-typed/npm/morgan_v1.x.x.js:
--------------------------------------------------------------------------------
1 | // flow-typed signature: f3639eb89945dc27e7a7ab35964fa591
2 | // flow-typed version: b43dff3e0e/morgan_v1.x.x/flow_>=v0.20.x
3 |
4 | /* @flow */
5 | import type { Middleware, $Request, $Response } from 'express';
6 |
7 | declare module "morgan" {
8 |
9 | declare type FormatFn = (tokens: TokenIndexer, req: $Request, res: $Response) => string;
10 |
11 | declare type TokenCallbackFn = (req: $Request, res: $Response, arg?: string | number | boolean) => string;
12 |
13 | declare interface TokenIndexer {
14 | [tokenName: string]: TokenCallbackFn;
15 | }
16 |
17 | /**
18 | * Public interface of morgan logger
19 | */
20 | declare interface Morgan {
21 | /***
22 | * Create a new morgan logger middleware function using the given format and options. The format argument may be a string of a predefined name (see below for the names),
23 | * or a string of a format string containing defined tokens.
24 | * @param format
25 | * @param options
26 | */
27 | (format: string, options?: Options): Middleware;
28 | /***
29 | * Standard Apache combined log output.
30 | * :remote-addr - :remote-user [:date] ":method :url HTTP/:http-version" :status :res[content-length] ":referrer" ":user-agent"
31 | * @param format
32 | * @param options
33 | */
34 | (format: 'combined', options?: Options): Middleware;
35 | /***
36 | * Standard Apache common log output.
37 | * :remote-addr - :remote-user [:date] ":method :url HTTP/:http-version" :status :res[content-length]
38 | * @param format
39 | * @param options
40 | */
41 | (format: 'common', options?: Options): Middleware;
42 | /**
43 | * Concise output colored by response status for development use. The :status token will be colored red for server error codes, yellow for client error codes, cyan for redirection codes, and uncolored for all other codes.
44 | * :method :url :status :response-time ms - :res[content-length]
45 | * @param format
46 | * @param options
47 | */
48 | (format: 'dev', options?: Options): Middleware;
49 |
50 | /***
51 | * Shorter than default, also including response time.
52 | * :remote-addr :remote-user :method :url HTTP/:http-version :status :res[content-length] - :response-time ms
53 | * @param format
54 | * @param options
55 | */
56 | (format: 'short', options?: Options): Middleware;
57 |
58 | /***
59 | * The minimal output.
60 | * :method :url :status :res[content-length] - :response-time ms
61 | * @param format
62 | * @param options
63 | */
64 | (format: 'tiny', options?: Options): Middleware;
65 |
66 | /***
67 | * Create a new morgan logger middleware function using the given format and options. The format argument may be a
68 | * custom format function which adheres to the signature.
69 | * @param format
70 | * @param options
71 | */
72 | (format: FormatFn, options?: Options): Middleware;
73 |
74 | /**
75 | * Define a custom token which can be used in custom morgan logging formats.
76 | */
77 | token(name: string, callback: TokenCallbackFn): Morgan;
78 | /**
79 | * Define a named custom format by specifying a format string in token notation
80 | */
81 | format(name: string, fmt: string): Morgan;
82 |
83 | /**
84 | * Define a named custom format by specifying a format function
85 | */
86 | format(name: string, fmt: FormatFn): Morgan;
87 |
88 | /**
89 | * Compile a format string in token notation into a format function
90 | */
91 | compile(format: string): FormatFn;
92 | }
93 |
94 | /**
95 | * Define a custom token which can be used in custom morgan logging formats.
96 | */
97 | declare function token(name: string, callback: TokenCallbackFn): Morgan;
98 |
99 | /**
100 | * Define a named custom format by specifying a format string in token notation
101 | */
102 | declare function format(name: string, fmt: string): Morgan;
103 |
104 | /**
105 | * Define a named custom format by specifying a format function
106 | */
107 | declare function format(name: string, fmt: FormatFn): Morgan;
108 |
109 | /**
110 | * Compile a format string in token notation into a format function
111 | */
112 | declare function compile(format: string): FormatFn;
113 |
114 | declare interface StreamOptions {
115 | /**
116 | * Output stream for writing log lines
117 | */
118 | write: (str: string) => void;
119 | }
120 |
121 | /***
122 | * Morgan accepts these properties in the options object.
123 | */
124 | declare interface Options {
125 |
126 | /***
127 | * Buffer duration before writing logs to the stream, defaults to false. When set to true, defaults to 1000 ms.
128 | */
129 | buffer?: boolean;
130 |
131 | /***
132 | * Write log line on request instead of response. This means that a requests will be logged even if the server crashes, but data from the response cannot be logged (like the response code).
133 | */
134 | immediate?: boolean;
135 |
136 | /***
137 | * Function to determine if logging is skipped, defaults to false. This function will be called as skip(req, res).
138 | */
139 | skip?: (req: $Request, res: $Response) => boolean;
140 |
141 | /***
142 | * Output stream for writing log lines, defaults to process.stdout.
143 | * @param str
144 | */
145 | stream?: StreamOptions;
146 | }
147 |
148 | declare var exports: Morgan
149 | }
150 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | # Create Shopify App with Node and React
3 |
4 | Shopify Application starter with React, Polaris, Express, and Postgres.
5 |
6 | ## Description
7 |
8 | Use this project as a starter for applications using the Shopify API. It gives you all the required code for authenticating with a shop via Oauth. It even includes billing. It also demonstrates the usage of the Embedded App SDK.
9 |
10 | The project has a create-react-app client application backed by an Express server. It fetches a list of products from the shop. You can then add more with the ResourcePicker from the Embedded App SDK.
11 |
12 | ### Why use this?
13 |
14 | If you're a Javascript developer, use create-shopify-app to kickstart your development. It saves you a lot of time you'd use on setting up the project. You get everything you need to build a modern Shopify app with your favorite tools:
15 |
16 | * React, JSX, ES6, and Flow syntax support.
17 | * A Webpack Dev server with live reloading
18 | * State management with Redux
19 | * React Router v4
20 | * Embedded App SDK and Polaris
21 | * Unit testing with Jest
22 | * All the code for authenticating with a shop via oAuth using Express middleware
23 | * Middleware for setting up billing and recurring charges
24 | * Best practices from the community
25 |
26 | ## Prerequisites
27 |
28 | This project uses Postgres for data persistence and Redis for session management. You'll need to install and run both. You'll also need Node and npm.
29 |
30 | Download the project from this Github repository and install dependencies:
31 |
32 | 1. Run **npm install** from the root to install main dependencies
33 | 2. Run **cd react-ui && npm install** for client-side dependencies
34 | 3. Expose your application to the Internet using ngrok. See [Shopify's documentation](https://help.shopify.com/api/tutorials/building-public-app) . (replace port 4567 with 3000)
35 |
36 | ## Getting started
37 |
38 | The following list of steps will get you ready for development.
39 |
40 | ### Step 1: Becoming a Shopify App Developer
41 |
42 | If you don't have a Shopify Partner account yet head over to http://shopify.com/partners to create one. You'll need it before you can start developing apps.
43 |
44 | Once you have a Partner account create a new application to get an API key and other API credentials.
45 |
46 | ### Step 2: Configuring your application
47 |
48 | When you start ngrok, it'll give you a random subdomain (*.ngrok.io).
49 |
50 | In the project root directory, open `server/config/index.js`. Set `APP_URL` to the subdomain ngrok assigned to you. In production, this value should match your deployment URL (for example, **.herokuapp.com). Also, set your `APP_NAME`.
51 |
52 | In the project root directory, create a new file named `.env` and open it in a text editor. Login to your Shopify partner account and find your App credentials. Set your API key and App secret in the `.env` file.
53 |
54 | ```sh
55 | SHOPIFY_API_KEY=your API key
56 | SHOPIFY_API_SECRET=app secret
57 | ```
58 |
59 | In the `react-ui` directory, create a new file named `.env` and open it in a text editor. Set your API key and development store URL.
60 |
61 | ```sh
62 | REACT_APP_SHOPIFY_API_KEY=your API key
63 | REACT_APP_SHOP_ORIGIN=your-development-store.myshopify.com
64 | ```
65 |
66 | You'll only use these values in development. The Embedded app SDK uses them to initialize itself. In production, they are injected by the Express server in the built client app.
67 |
68 | **Your api credentials should not be in source control**. In production, keep your keys in environment variables.
69 |
70 | In your partner dashboard, go to App info. For the App URL, set
71 |
72 | ```
73 | https://#{app_url}/home
74 | ```
75 |
76 | Here `app_url` is the root path of your application (the same value as APP_URL in your config file).
77 |
78 | For Whistlisted redirection URL, set
79 |
80 | ```
81 | https://#{app_url}/auth/callback
82 | ```
83 |
84 | Also, remember to check `enabled` for the embedded settings.
85 |
86 | You can set these URLs in the config file. But, the values in config should match the ones in the partner dashboard.
87 |
88 | ### Step 3: Set-up your database
89 |
90 | This project uses Postgres for its persistence layer, with Sequelize ORM. Create local databases for development and testing. Then run the Sequelize migration script to create a shop table:
91 |
92 | ```sh
93 | createdb shopify-app-development # or test/production
94 | npm run sequelize db:migrate
95 | ```
96 |
97 | In production, you connect to the database through an environment variable DATABASE_URL.
98 |
99 | ### Step 4: Run the app on your local machine
100 |
101 | ```sh
102 | npm run start:dev
103 | ```
104 | This will start `nodemon` on the server side and `create-react-app` on the client. The Node server will restart when you make changes in that part of the code.
105 |
106 | The page will reload if you make edits in the `react-ui` folder. You'll see the build errors and lint warnings in the console.
107 |
108 | ### Step 5: Install your app on a test store
109 |
110 | If you don't have one already, create a development store. Open [Shopify's documentation](https://help.shopify.com/api/tutorials/building-public-app). Scroll down to the **Install your app on a test store** section. Follow those steps. Once you start the installation process, the following will happen:
111 |
112 | 1. You'll see a screen to confirm the installation, with the scopes you requested.
113 | 2. Once you confirm, you'll have to accept a recurring application charge. It's only a test charge so don't worry.
114 | 3. You'll see the app inside the Shopify admin. You can play with it or start building.
115 |
116 | ## Deploying to Heroku
117 |
118 | ```sh
119 | heroku create your-app-name
120 |
121 | # Add Redis
122 | heroku addons:create heroku-redis:hobby-dev -a your-app
123 |
124 | # Add Postgres
125 | heroku addons:create heroku-postgresql:hobby-dev -a your-app
126 |
127 | # Deploy to Heroku server
128 | git push heroku master
129 |
130 | # Set environment variables
131 | heroku config:set APP_URL=your-app.herokuapp.com
132 | heroku config:set SHOPIFY_API_KEY=your API key
133 | heroku config:set SHOPIFY_API_SECRET=app secret
134 | heroku config:set SESSION_SECRET=session secret
135 |
136 | # Run the migration
137 | heroku run sequelize db:migrate
138 |
139 | # Open Link in browser
140 | heroku open
141 | ```
142 |
143 | ## Testing
144 |
145 | We use Jest for both client and server tests. The `create-react-app` project comes with Jest by default. For the server side, we use a custom configuration. Jest has spy and mock capabilities so there's no need for additional libraries.
146 |
147 | ```sh
148 |
149 | # Run client tests in watch mode
150 | npm run test:client
151 |
152 | # Run server tests in watch mode
153 | npm run test:server
154 |
155 | # Run all tests for Continuous integration
156 | npm run test
157 | ```
158 |
159 | ## License
160 |
161 | [MIT](LICENSE)
162 |
--------------------------------------------------------------------------------
/flow-typed/npm/express_v4.x.x.js:
--------------------------------------------------------------------------------
1 | // flow-typed signature: d375d667aaa59b8207e6a167cc9a06fe
2 | // flow-typed version: ef2fdb0770/express_v4.x.x/flow_>=v0.32.x
3 |
4 | import type { Server } from 'http';
5 | import type { Socket } from 'net';
6 |
7 | declare type express$RouterOptions = {
8 | caseSensitive?: boolean,
9 | mergeParams?: boolean,
10 | strict?: boolean
11 | };
12 |
13 | declare class express$RequestResponseBase {
14 | app: express$Application;
15 | get(field: string): string | void;
16 | }
17 |
18 | declare type express$RequestParams = {
19 | [param: string]: string
20 | }
21 |
22 | declare class express$Request extends http$IncomingMessage mixins express$RequestResponseBase {
23 | baseUrl: string;
24 | body: any;
25 | cookies: {[cookie: string]: string};
26 | connection: Socket;
27 | fresh: boolean;
28 | hostname: string;
29 | ip: string;
30 | ips: Array;
31 | method: string;
32 | originalUrl: string;
33 | params: express$RequestParams;
34 | path: string;
35 | protocol: 'https' | 'http';
36 | query: {[name: string]: string};
37 | route: string;
38 | secure: boolean;
39 | signedCookies: {[signedCookie: string]: string};
40 | stale: boolean;
41 | subdomains: Array;
42 | xhr: boolean;
43 | accepts(types: string): string | false;
44 | accepts(types: Array): string | false;
45 | acceptsCharsets(...charsets: Array): string | false;
46 | acceptsEncodings(...encoding: Array): string | false;
47 | acceptsLanguages(...lang: Array): string | false;
48 | header(field: string): string | void;
49 | is(type: string): boolean;
50 | param(name: string, defaultValue?: string): string | void;
51 | }
52 |
53 | declare type express$CookieOptions = {
54 | domain?: string,
55 | encode?: (value: string) => string,
56 | expires?: Date,
57 | httpOnly?: boolean,
58 | maxAge?: number,
59 | path?: string,
60 | secure?: boolean,
61 | signed?: boolean
62 | };
63 |
64 | declare type express$RenderCallback = (err: Error | null, html?: string) => mixed;
65 |
66 | declare type express$SendFileOptions = {
67 | maxAge?: number,
68 | root?: string,
69 | lastModified?: boolean,
70 | headers?: {[name: string]: string},
71 | dotfiles?: 'allow' | 'deny' | 'ignore'
72 | };
73 |
74 | declare class express$Response extends http$ServerResponse mixins express$RequestResponseBase {
75 | headersSent: boolean;
76 | locals: {[name: string]: mixed};
77 | append(field: string, value?: string): this;
78 | attachment(filename?: string): this;
79 | cookie(name: string, value: string, options?: express$CookieOptions): this;
80 | clearCookie(name: string, options?: express$CookieOptions): this;
81 | download(path: string, filename?: string, callback?: (err?: ?Error) => void): this;
82 | format(typesObject: {[type: string]: Function}): this;
83 | json(body?: mixed): this;
84 | jsonp(body?: mixed): this;
85 | links(links: {[name: string]: string}): this;
86 | location(path: string): this;
87 | redirect(url: string, ...args: Array): this;
88 | redirect(status: number, url: string, ...args: Array): this;
89 | render(view: string, locals?: {[name: string]: mixed}, callback?: express$RenderCallback): this;
90 | send(body?: mixed): this;
91 | sendFile(path: string, options?: express$SendFileOptions, callback?: (err?: ?Error) => mixed): this;
92 | sendStatus(statusCode: number): this;
93 | header(field: string, value?: string): this;
94 | header(headers: {[name: string]: string}): this;
95 | set(field: string, value?: string|string[]): this;
96 | set(headers: {[name: string]: string}): this;
97 | status(statusCode: number): this;
98 | type(type: string): this;
99 | vary(field: string): this;
100 | req: express$Request;
101 | }
102 |
103 | declare type express$NextFunction = (err?: ?Error | 'route') => mixed;
104 | declare type express$Middleware =
105 | ((req: express$Request, res: express$Response, next: express$NextFunction) => mixed) |
106 | ((error: ?Error, req: express$Request, res: express$Response, next: express$NextFunction) => mixed);
107 | declare interface express$RouteMethodType {
108 | (middleware: express$Middleware): T;
109 | (...middleware: Array): T;
110 | (path: string|RegExp|string[], ...middleware: Array): T;
111 | }
112 | declare class express$Route {
113 | all: express$RouteMethodType;
114 | get: express$RouteMethodType;
115 | post: express$RouteMethodType;
116 | put: express$RouteMethodType;
117 | head: express$RouteMethodType;
118 | delete: express$RouteMethodType;
119 | options: express$RouteMethodType;
120 | trace: express$RouteMethodType;
121 | copy: express$RouteMethodType;
122 | lock: express$RouteMethodType;
123 | mkcol: express$RouteMethodType;
124 | move: express$RouteMethodType;
125 | purge: express$RouteMethodType;
126 | propfind: express$RouteMethodType;
127 | proppatch: express$RouteMethodType;
128 | unlock: express$RouteMethodType;
129 | report: express$RouteMethodType;
130 | mkactivity: express$RouteMethodType;
131 | checkout: express$RouteMethodType;
132 | merge: express$RouteMethodType;
133 |
134 | // @TODO Missing 'm-search' but get flow illegal name error.
135 |
136 | notify: express$RouteMethodType;
137 | subscribe: express$RouteMethodType;
138 | unsubscribe: express$RouteMethodType;
139 | patch: express$RouteMethodType;
140 | search: express$RouteMethodType;
141 | connect: express$RouteMethodType;
142 | }
143 |
144 | declare class express$Router extends express$Route {
145 | constructor(options?: express$RouterOptions): void;
146 | route(path: string): express$Route;
147 | static (options?: express$RouterOptions): express$Router;
148 | use(middleware: express$Middleware): this;
149 | use(...middleware: Array): this;
150 | use(path: string|RegExp|string[], ...middleware: Array): this;
151 | use(path: string, router: express$Router): this;
152 | handle(req: http$IncomingMessage, res: http$ServerResponse, next: express$NextFunction): void;
153 |
154 | // Can't use regular callable signature syntax due to https://github.com/facebook/flow/issues/3084
155 | $call: (req: http$IncomingMessage, res: http$ServerResponse, next?: ?express$NextFunction) => void;
156 | }
157 |
158 | declare class express$Application extends express$Router mixins events$EventEmitter {
159 | constructor(): void;
160 | locals: {[name: string]: mixed};
161 | mountpath: string;
162 | listen(port: number, hostname?: string, backlog?: number, callback?: (err?: ?Error) => mixed): Server;
163 | listen(port: number, hostname?: string, callback?: (err?: ?Error) => mixed): Server;
164 | listen(port: number, callback?: (err?: ?Error) => mixed): Server;
165 | listen(path: string, callback?: (err?: ?Error) => mixed): Server;
166 | listen(handle: Object, callback?: (err?: ?Error) => mixed): Server;
167 | disable(name: string): void;
168 | disabled(name: string): boolean;
169 | enable(name: string): express$Application;
170 | enabled(name: string): boolean;
171 | engine(name: string, callback: Function): void;
172 | /**
173 | * Mixed will not be taken as a value option. Issue around using the GET http method name and the get for settings.
174 | */
175 | // get(name: string): mixed;
176 | set(name: string, value: mixed): mixed;
177 | render(name: string, optionsOrFunction: {[name: string]: mixed}, callback: express$RenderCallback): void;
178 | handle(req: http$IncomingMessage, res: http$ServerResponse, next?: ?express$NextFunction): void;
179 | }
180 |
181 | declare module 'express' {
182 | declare export type RouterOptions = express$RouterOptions;
183 | declare export type CookieOptions = express$CookieOptions;
184 | declare export type Middleware = express$Middleware;
185 | declare export type NextFunction = express$NextFunction;
186 | declare export type RequestParams = express$RequestParams;
187 | declare export type $Response = express$Response;
188 | declare export type $Request = express$Request;
189 | declare export type $Application = express$Application;
190 |
191 | declare module.exports: {
192 | (): express$Application, // If you try to call like a function, it will use this signature
193 | static: (root: string, options?: Object) => express$Middleware, // `static` property on the function
194 | Router: typeof express$Router, // `Router` property on the function
195 | };
196 | }
197 |
--------------------------------------------------------------------------------
/server/routes/shopify.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Routes for express app
3 | */
4 | import _ from 'lodash';
5 | import crypto from 'crypto';
6 | import express from 'express';
7 | import ShopifyToken from 'shopify-token';
8 | import ShopifyApi from 'shopify-api-node';
9 | import logger from 'winston';
10 |
11 | import {
12 | ACTIVATE_CHARGE_ROUTE,
13 | APP_HOME_ROUTE,
14 | APP_NAME,
15 | APP_URL,
16 | AUTH_CALLBACK_ROUTE,
17 | INSTALL_PAGE,
18 | SCOPES,
19 | UNINSTALL_ROUTE
20 | } from '../config';
21 |
22 | import { Models } from '../db';
23 |
24 | const { Shop } = Models;
25 |
26 | const router = express.Router();
27 |
28 | export default () => {
29 | const { SHOPIFY_API_KEY, SHOPIFY_API_SECRET } = process.env;
30 |
31 | const getShopifyToken = () =>
32 | new ShopifyToken({
33 | sharedSecret: SHOPIFY_API_SECRET,
34 | redirectUri: `${APP_URL}${AUTH_CALLBACK_ROUTE}`,
35 | scopes: SCOPES,
36 | apiKey: SHOPIFY_API_KEY
37 | });
38 |
39 | const getAppsHome = shop => `https://${shop}/admin/apps/`;
40 |
41 | // The home page of the app in Shopify Admin
42 | const getEmbeddedAppHome = shop => `${getAppsHome(shop)}${APP_NAME}`;
43 |
44 | /**
45 | * Authenticates the shop with Shopify when accessing protected routes.
46 | * Returns a template file that redirects to the Shopify authorization page.
47 | * This mechanism is used to authorize an embedded app.
48 | * We need custom Javascript to escape the iframe as described in the docs.
49 | * See the "shopify_redirect" template for details.
50 | */
51 | const authenticate = (req, res) => {
52 | const { query, session } = req;
53 |
54 | const shop = query.shop || req.body.shop;
55 |
56 | logger.info('Authenticating shop %s', shop);
57 |
58 | if (!shop) {
59 | res.redirect(INSTALL_PAGE);
60 | return;
61 | }
62 |
63 | const shopifyToken = getShopifyToken();
64 | const nonce = shopifyToken.generateNonce();
65 |
66 | // Save the nonce to state to verify it in the callback route later on
67 | session.state = nonce;
68 |
69 | const shopName = shop.split('.')[0];
70 |
71 | const url = decodeURI(
72 | shopifyToken.generateAuthUrl(shopName, undefined, nonce)
73 | );
74 |
75 | res.render('shopify_redirect', { url, shop });
76 | };
77 |
78 | /**
79 | * Creates an interface for accessing the Shopify API.
80 | * @param session A Shopify session with shop domain and access token
81 | */
82 | const getShopifyApi = session => {
83 | const { shopify: { shop: shopUrl, token } } = session;
84 |
85 | return new ShopifyApi({
86 | shopName: shopUrl.split('.')[0],
87 | accessToken: token
88 | });
89 | };
90 |
91 | /**
92 | * This method gets called when the app is installed.
93 | * Setup any webhooks or services you need on Shopify inside here.
94 | *
95 | * @param session New session
96 | */
97 | const afterShopifyAuth = session => {
98 | const shopify = getShopifyApi(session);
99 |
100 | const webhook = {
101 | topic: 'app/uninstalled',
102 | address: `${APP_URL}${UNINSTALL_ROUTE}`,
103 | format: 'json'
104 | };
105 |
106 | shopify.webhook.create(webhook);
107 | };
108 |
109 | /**
110 | * Creates a new recurring application charge and redirects the mercant to
111 | * the confirmation screen.
112 | */
113 | const createRecurringApplicationCharge = (req, res, next) => {
114 | const { shopify, session: { shopify: { shop } } } = req;
115 |
116 | const newCharge = {
117 | name: APP_NAME,
118 | price: 9.99,
119 | return_url: `${APP_URL}${ACTIVATE_CHARGE_ROUTE}`,
120 | test: true,
121 | trial_days: 7
122 | };
123 |
124 | shopify.recurringApplicationCharge
125 | .create(newCharge)
126 | .then(charge => {
127 | res.render('shopify_redirect', {
128 | url: charge.confirmation_url,
129 | shop
130 | });
131 | })
132 | .catch(next);
133 | };
134 |
135 | const hasActiveRecurringApplicationCharge = shopify =>
136 | shopify.recurringApplicationCharge
137 | .list()
138 | .then(charges => _.find(charges, { status: 'active' }));
139 |
140 | /**
141 | * Shopify calls this route after the merchant authorizes the app.
142 | * It needs to match the callback route that you set in app settings.
143 | */
144 | router.get(AUTH_CALLBACK_ROUTE, (req, res, next) => {
145 | const { query, session } = req;
146 |
147 | const { code, shop, state } = query;
148 |
149 | const shopifyToken = getShopifyToken();
150 |
151 | if (
152 | typeof state !== 'string' ||
153 | state !== session.state || // Validate the state.
154 | !shopifyToken.verifyHmac(query) // Validate the hmac.
155 | ) {
156 | return res.status(400).send('Security checks failed');
157 | }
158 |
159 | // Exchange the authorization code for a permanent access token.
160 | return shopifyToken
161 | .getAccessToken(shop, code)
162 | .then(token => {
163 | session.shopify = { shop, token };
164 |
165 | return Shop.findOrCreate({
166 | where: {
167 | domain: shop
168 | }
169 | }).spread(() => {
170 | afterShopifyAuth(session);
171 |
172 | req.shopify = getShopifyApi(session);
173 |
174 | hasActiveRecurringApplicationCharge(req.shopify).then(isActive => {
175 | if (isActive) {
176 | return res.redirect(getEmbeddedAppHome(shop));
177 | }
178 | return createRecurringApplicationCharge(req, res, next);
179 | });
180 | });
181 | })
182 | .catch(next);
183 | });
184 |
185 | const verifyWebhookHMAC = req => {
186 | const hmac = req.headers['x-shopify-hmac-sha256'];
187 |
188 | const digest = crypto
189 | .createHmac('SHA256', SHOPIFY_API_SECRET)
190 | .update(req.rawBody)
191 | .digest('base64');
192 |
193 | return digest === hmac;
194 | };
195 |
196 | /**
197 | * This endpoint recieves the uninstall webhook and cleans up data.
198 | * Add to this endpoint as your app stores more data. If you need to do a lot of work, return 200
199 | * right away and queue it as a worker job.
200 | */
201 | router.post(UNINSTALL_ROUTE, (req, res) => {
202 | if (!verifyWebhookHMAC(req)) {
203 | res.status(401).send('Webhook HMAC Failed');
204 | return;
205 | }
206 |
207 | Shop.destroy({
208 | where: {
209 | domain: req.headers['x-shopify-shop-domain']
210 | }
211 | }).then(() => {
212 | res.status(200).send('Uninstalled');
213 | });
214 | });
215 |
216 | /**
217 | * This middleware checks if we have a session.
218 | * If so, it attaches the Shopify API to the request object.
219 | * If there is no session or we have a different shop,
220 | * we start the authentication process.
221 | */
222 | const authMiddleware = (req, res, next) => {
223 | logger.info(`Checking for valid session: ${req.query.shop}`);
224 | const { session, query: { shop } } = req;
225 |
226 | if (!session.shopify || (shop && session.shopify.shop !== shop)) {
227 | delete session.shopify;
228 | authenticate(req, res);
229 | return;
230 | }
231 |
232 | req.shopify = getShopifyApi(session);
233 | next();
234 | };
235 |
236 | router.use(authMiddleware);
237 |
238 | /*
239 | * Shopify calls this route when the merchant accepts or declines the charge.
240 | */
241 | router.get('/activate_charge', (req, res, next) => {
242 | const {
243 | shopify: { recurringApplicationCharge },
244 | query: { charge_id: chargeId },
245 | session: { shopify: { shop } }
246 | } = req;
247 |
248 | recurringApplicationCharge
249 | .get(chargeId)
250 | .then(charge => {
251 | if (charge.status === 'accepted') {
252 | return recurringApplicationCharge.activate(chargeId).then(() =>
253 | // We redirect to the home page of the app in Shopify admin
254 | res.redirect(getEmbeddedAppHome(shop))
255 | );
256 | }
257 | res.status(401);
258 | return res.render('charge_declined', { APP_URL });
259 | })
260 | .catch(next);
261 | });
262 |
263 | router.get('/logout', (req, res) => {
264 | const { shop } = req.session.shopify;
265 |
266 | delete req.session.shopify;
267 |
268 | res.redirect(getAppsHome(shop));
269 | });
270 |
271 | router.get('/api/orders', (req, res) => {
272 | const { shopify } = req;
273 |
274 | shopify.order.list({ limit: 5 }).then(orders => {
275 | res.status(200).json(orders);
276 | });
277 | });
278 |
279 | /**
280 | * Checks if we have an active application charge.
281 | * This middleware is active when the app is initially loaded.
282 | */
283 | const checkActiveRecurringApplicationCharge = (req, res, next) => {
284 | logger.info(`Checking for active application charge: ${req.query.shop}`);
285 | const { shopify } = req;
286 |
287 | hasActiveRecurringApplicationCharge(shopify).then(isActive => {
288 | if (!isActive) {
289 | logger.info(`No active charge found: ${req.query.shop}`);
290 | createRecurringApplicationCharge(req, res);
291 | return;
292 | }
293 | next();
294 | });
295 | };
296 |
297 | /*
298 | * Checks if the session is still valid by making a basic API call, as described in:
299 | * https://stackoverflow.com/questions/14418415/shopify-how-can-i-handle-an-uninstall-followed-by-an-instant-re-install
300 | */
301 | const checkForValidSession = (req, res, next) => {
302 | logger.info(`Checking if the session is still valid: ${req.query.shop}`);
303 | const { session, shopify } = req;
304 |
305 | return shopify.shop
306 | .get()
307 | .then(() => next())
308 | .catch(() => {
309 | // Destroy the Shopify reference
310 | delete session.shopify;
311 | authenticate(req, res);
312 | });
313 | };
314 |
315 | router.get(
316 | APP_HOME_ROUTE,
317 | checkForValidSession,
318 | checkActiveRecurringApplicationCharge,
319 | (req, res) => {
320 | res.redirect('/');
321 | }
322 | );
323 |
324 | return router;
325 | };
326 |
--------------------------------------------------------------------------------
/flow-typed/npm/bluebird_v3.x.x.js:
--------------------------------------------------------------------------------
1 | // flow-typed signature: ce48a8f3b5f26602d21681e3ab5c2dbc
2 | // flow-typed version: ae20041ead/bluebird_v3.x.x/flow_>=v0.47.x
3 |
4 | type Bluebird$RangeError = Error;
5 | type Bluebird$CancellationErrors = Error;
6 | type Bluebird$TimeoutError = Error;
7 | type Bluebird$RejectionError = Error;
8 | type Bluebird$OperationalError = Error;
9 |
10 | type Bluebird$ConcurrencyOption = {
11 | concurrency: number,
12 | };
13 | type Bluebird$SpreadOption = {
14 | spread: boolean;
15 | };
16 | type Bluebird$MultiArgsOption = {
17 | multiArgs: boolean;
18 | };
19 | type Bluebird$BluebirdConfig = {
20 | warnings?: boolean,
21 | longStackTraces?: boolean,
22 | cancellation?: boolean,
23 | monitoring?: boolean
24 | };
25 |
26 | declare class Bluebird$PromiseInspection {
27 | isCancelled(): boolean;
28 | isFulfilled(): boolean;
29 | isRejected(): boolean;
30 | pending(): boolean;
31 | reason(): any;
32 | value(): T;
33 | }
34 |
35 | type Bluebird$PromisifyOptions = {|
36 | multiArgs?: boolean,
37 | context: any
38 | |};
39 |
40 | declare type Bluebird$PromisifyAllOptions = {
41 | suffix?: string;
42 | filter?: (name: string, func: Function, target?: any, passesDefaultFilter?: boolean) => boolean;
43 | // The promisifier gets a reference to the original method and should return a function which returns a promise
44 | promisifier?: (originalMethod: Function) => () => Bluebird$Promise ;
45 | };
46 |
47 | declare type $Promisable = Promise | T;
48 |
49 | declare class Bluebird$Disposable {
50 |
51 | }
52 |
53 | declare class Bluebird$Promise<+R> extends Promise{
54 | static Defer: Class;
55 | static PromiseInspection: Class>;
56 |
57 | static all>(
58 | Promises: Iterable | $Promisable>
59 | ): Bluebird$Promise>;
60 | static props(
61 | input: Object | Map<*,*> | $Promisable