35 |
40 | );
41 |
42 | const appMarkup = props.shopUrl
43 | ? withShopMarkup
44 | : withoutShopMarkup;
45 |
46 | return (
47 |
48 |
49 |
Shopify NextJS - Login
50 |
51 |
52 |
53 | {appMarkup}
54 |
55 |
56 |
57 | )
58 | }
59 |
60 | wrapper.getInitialProps = async (ctx) => {
61 | const cookies = parseCookies(ctx);
62 | const { shopUrl } = tryParse(cookies['user']);
63 | const apiKey = process.env.FOR_SERVER_CODE_SHOPIFY_API_KEY;
64 |
65 | const props = Component.getInitialProps &&
66 | (await Component.getInitialProps(ctx));
67 | return { ...props, apiKey, shopUrl };
68 | }
69 |
70 | return wrapper;
71 | }
--------------------------------------------------------------------------------
/server/db.js:
--------------------------------------------------------------------------------
1 | import easyDB from 'easydb-io'
2 | import uuidv4 from 'uuid/v4'
3 | import { log } from '../utils/error'
4 |
5 | const db = easyDB({
6 | database: '',
7 | token: ''
8 | })
9 |
10 | // TODO database states, review me
11 | // User has no shopUrl
12 | // User has shopUrl but has not been authorized (failed, otherwise)
13 | // User registers twice and orphans its secrets object when new user id generated
14 |
15 | export const addUser = async (query, auth) => {
16 | const previouslyRegisteredAs = await dbGet(query.shop);
17 | if (previouslyRegisteredAs) {
18 | await dbDelete(previouslyRegisteredAs.id);
19 | }
20 |
21 | try {
22 | const id = uuidv4();
23 | const user = {
24 | id,
25 | shopUrl: query.shop
26 | };
27 | await db.put(query.shop, user);
28 |
29 | const secrets = {
30 | id,
31 | shopifyToken: auth.access_token,
32 | shopifyScope: auth.scope
33 | };
34 |
35 | await db.put(id, secrets);
36 |
37 | await log('created user', { user, secrets });
38 | return user;
39 |
40 | } catch (error) {
41 | await log(`unable to create user: ${error.message}`, {
42 | error,
43 | id,
44 | user,
45 | secrets
46 | });
47 | return null;
48 | }
49 | }
50 |
51 | export const getUser = async (shopUrl) => {
52 | try {
53 | return await db.get(shopUrl);
54 | } catch (error) {
55 | await log(`unable to get user: ${error.message}`, { error, shopUrl });
56 | return null;
57 | }
58 | }
59 |
60 | export const getSecrets = async (userId) => {
61 | try {
62 | return await db.get(userId);
63 | } catch (error) {
64 | await log(`unable to get secrets: ${error.message}`, { error, userId });
65 | return null;
66 | }
67 | }
68 |
69 | const dbGet = async (key) => {
70 | try {
71 | return await db.get(key);
72 | } catch (error) {
73 | await log('dbGet', error);
74 | return null;
75 | }
76 | }
77 |
78 | const dbDelete = async (key) => {
79 | try {
80 | return await db.delete(key);
81 | } catch (error) {
82 | await log('dbDelete', error);
83 | return null;
84 | }
85 | }
--------------------------------------------------------------------------------
/utils/fetch-helpers.js:
--------------------------------------------------------------------------------
1 | import fetch from 'isomorphic-unfetch'
2 | import { log, tryOrLog, tryStringify } from './error'
3 | import queryString from 'query-string'
4 |
5 | export const setQuery = (query, obj = {}) => {
6 | query = tryOrLog(() => queryString.stringify(query)) || '';
7 | query = query
8 | ? `?${query}`
9 | : '';
10 | return { ...obj, query: `${query}` };
11 | }
12 |
13 | export const setHeaders = (headers, obj = {}) => {
14 | headers = !!obj && obj.headers
15 | ? { ...obj.headers, ...headers }
16 | : { ...headers };
17 | return { ...obj, headers };
18 | }
19 |
20 | export const setMethod = (method, obj = {}) => {
21 | return { ...obj, method };
22 | }
23 |
24 | export const setBody = (body, obj = {}) => {
25 | body = tryStringify(body);
26 | return { ...obj, body };
27 | }
28 |
29 | export const tryPost = async (url, init) => {
30 | init = setMethod('post',
31 | setHeaders({ 'Content-Type': 'application/json' }, init)
32 | );
33 |
34 | return await tryFetch(url, init);
35 | }
36 |
37 | export const tryPostApi = async (endpoint, payload) => {
38 | init = setMethod('post',
39 | setHeaders({ 'Content-Type': 'application/json' }, init)
40 | );
41 |
42 | return await tryFetch(`${process.env.BASE_URL}${endpoint}`, init);
43 | }
44 |
45 | export const tryGetApi = async (endpoint, init) => {
46 | init = setMethod('get',
47 | setHeaders({ credentials: 'same-origin' },
48 | init.query ? init : setQuery('', init)
49 | )
50 | );
51 |
52 | const url = `${process.env.BASE_URL}${endpoint}${init.query}`;
53 | return await tryFetch(url, init);
54 | }
55 |
56 | const tryFetch = async (url, init) => {
57 | try {
58 | await log('fetch', { url, init });
59 | const res = await fetch(url, init);
60 |
61 | if (res.ok) {
62 | await log('response', { url: res.url, status: res.status, text: res.statusText });
63 | return await res.json();
64 | } else {
65 | // https://github.com/developit/unfetch#caveats
66 | const error = new Error(res.statusText);
67 | error.response = res;
68 | throw error;
69 | }
70 | } catch (error) {
71 | const { response } = error;
72 | const code = response
73 | ? response.status
74 | : 400;
75 | const message = response
76 | ? response.statusText
77 | : error.message;
78 | await log('response', { message, code });
79 | return {};
80 | }
81 | }
--------------------------------------------------------------------------------
/server/shopify-server.js:
--------------------------------------------------------------------------------
1 | import crypto from 'crypto'
2 | import queryString from 'query-string'
3 | import { addUser } from './db'
4 | import { log } from '../utils/error'
5 | import { tryPost, setBody } from '../utils/fetch-helpers'
6 | import { generateJwt } from './auth'
7 |
8 | export const addShopifyUser = async (query) => {
9 | const isValid = await isShopifyInstallRequest(query);
10 | if (!isValid) {
11 | return null;
12 | }
13 |
14 | const body = {
15 | client_id: process.env.FOR_SERVER_CODE_SHOPIFY_API_KEY,
16 | client_secret: process.env.FOR_SERVER_CODE_SHOPIFY_API_SECRET,
17 | code: query.code
18 | };
19 |
20 | const auth = await tryPost(`https://${query.shop}/admin/oauth/access_token`, setBody(body));
21 | if (!auth) {
22 | return null;
23 | }
24 |
25 | const user = await addUser(query, auth);
26 | if (!user) {
27 | return null;
28 | }
29 |
30 | const token = await generateJwt({
31 | hmac: query.hmac,
32 | code: query.code,
33 | shopUrl: query.shop
34 | });
35 |
36 | if (!token) {
37 | return null;
38 | }
39 |
40 | return { token, user };
41 | }
42 |
43 | // Notice: Keep as API so cache isn't involved with scope? Uhh...logging?
44 | export const getAuthUrl = async (shopUrl) => {
45 | const apiKey = process.env.FOR_SERVER_CODE_SHOPIFY_API_KEY;
46 | const redirectUri = process.env.SHOPIFY_REDIRECT_URL;
47 | // TODO nonce
48 | const permissionUrl = `/oauth/authorize?client_id=${apiKey}&scope=read_products,read_content&redirect_uri=${redirectUri}`;
49 | const authUrl = `https://${shopUrl}/admin${permissionUrl}`;
50 | await log('created', { authUrl });
51 | return authUrl;
52 | }
53 |
54 | export const isShopifyInstallRequest = async (query) => {
55 | const result = (isValidShopifyRequest(query)
56 | && query.code);
57 |
58 | if (!result) {
59 | log(`query missing &code=XXX`, query);
60 | }
61 |
62 | return result;
63 | }
64 |
65 | const isValidShopifyRequest = async (query) => {
66 | query = { ...query };
67 |
68 | const hmac = query.hmac;
69 | delete query.hmac;
70 | query = queryString.stringify(query);
71 |
72 | const check = crypto
73 | .createHmac('sha256', process.env.FOR_SERVER_CODE_SHOPIFY_API_SECRET)
74 | .update(query)
75 | .digest('hex');
76 |
77 | const result = (hmac === check);
78 |
79 | if (!result) {
80 | await log('invalid hmac', { query, check, hmac });
81 | }
82 |
83 | return result;
84 | }
--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Head from 'next/head'
3 | import Nav from '../components/nav'
4 |
5 | const Home = () => {
6 | return (
7 |
8 |
9 |
Home
10 |
11 |
12 |
13 |
14 |
15 |
16 |
Shopify NextJS
17 |
18 | To get started, edit pages/index.js and save to reload.
19 |
20 |
21 |
38 |
39 |
40 |
86 |
87 | )
88 | }
89 |
90 | export default Home
--------------------------------------------------------------------------------