Merge pull request #3 from bc-chaz/step-3-integrate-api

feat(common): add step 3, integrate bc api

Author: bc-chaz

.env-sample

@@ -8,3 +8,8 @@ CLIENT_SECRET={app secret}
 # https://developer.bigcommerce.com/api-docs/apps/guide/development#testing-locally-with-ngrok
 
 AUTH_CALLBACK=https://{ngrok_id}.ngrok.io/api/auth
+
+# Set cookie variables, replace jwt key with a 32+ random character secret
+
+COOKIE_NAME=__{NAME}
+JWT_KEY={SECRET}

README.md

@@ -19,6 +19,9 @@ To get the app running locally, follow these instructions:
 5. Copy .env-sample to `.env`.
 6. [Replace client_id and client_secret in .env](https://devtools.bigcommerce.com/my/apps) (from `View Client ID` in the dev portal).
 7. Update AUTH_CALLBACK in `.env` with the `ngrok_id` from step 5.
-8. Start your dev environment in a **separate** terminal from `ngrok`. If `ngrok` restarts, update callbacks in steps 4 and 7 with the new ngrok_id.
+8. Enter a cookie name, as well as a jwt secret in `.env`.
+    - The cookie name should be unique
+    - JWT key should be at least 32 random characters (256 bits) for HS256
+9. Start your dev environment in a **separate** terminal from `ngrok`. If `ngrok` restarts, update callbacks in steps 4 and 7 with the new ngrok_id.
     - `npm run dev`
-9. [Install the app and launch.](https://developer.bigcommerce.com/api-docs/apps/quick-start#install-the-app)
+10. [Install the app and launch.](https://developer.bigcommerce.com/api-docs/apps/quick-start#install-the-app)

components/header.tsx

@@ -0,0 +1,20 @@
+import { H2, Link } from '@bigcommerce/big-design';
+import { useStore } from '../lib/hooks';
+
+interface HeaderProps {
+    title: string;
+}
+
+const Header = ({ title }: HeaderProps) => {
+    const { storeId } = useStore();
+    const storeLink = `https://store-${storeId}.mybigcommerce.com/manage/marketplace/apps/my-apps`;
+
+    return (
+        <>
+            <Link href={storeLink}>My Apps</Link>
+            <H2 marginTop="medium">{title}</H2>
+        </>
+    );
+};
+
+export default Header;

lib/auth.ts

@@ -1,24 +1,33 @@
 import * as BigCommerce from 'node-bigcommerce';
+import { QueryParams } from '../types';
+
+const { AUTH_CALLBACK, CLIENT_ID, CLIENT_SECRET } = process.env;
 
 // Create BigCommerce instance
 // https://github.com/getconversio/node-bigcommerce
 const bigcommerce = new BigCommerce({
     logLevel: 'info',
-    clientId: process.env.CLIENT_ID,
-    secret: process.env.CLIENT_SECRET,
-    callback: process.env.AUTH_CALLBACK,
+    clientId: CLIENT_ID,
+    secret: CLIENT_SECRET,
+    callback: AUTH_CALLBACK,
     responseType: 'json',
     headers: { 'Accept-Encoding': '*' },
     apiVersion: 'v3'
 });
 
 const bigcommerceSigned = new BigCommerce({
-    secret: process.env.CLIENT_SECRET,
+    secret: CLIENT_SECRET,
     responseType: 'json'
 });
 
-interface QueryParams {
-    [key: string]: string;
+export function bigcommerceClient(accessToken: string, storeId: string) {
+    return new BigCommerce({
+        clientId: CLIENT_ID,
+        accessToken,
+        storeHash: storeId,
+        responseType: 'json',
+        apiVersion: 'v3'
+    });
 }
 
 export function getBCAuth(query: QueryParams) {

lib/cookie.ts

@@ -0,0 +1,40 @@
+import { parse, serialize } from 'cookie';
+import * as jwt from 'jsonwebtoken';
+import { NextApiRequest, NextApiResponse } from 'next';
+import { SessionProps } from '../types';
+
+const { COOKIE_NAME, JWT_KEY } = process.env;
+const MAX_AGE = 60 * 60 * 24; // 24 hours
+
+export function setCookie(res: NextApiResponse, session: SessionProps) {
+    const { access_token: token, context } = session;
+    const storeId = context?.split('/')[1] || '';
+    const cookie = serialize(COOKIE_NAME, encode(token, storeId), {
+        expires: new Date(Date.now() + MAX_AGE * 1000),
+        httpOnly: true,
+        path: '/',
+        sameSite: 'none',
+        secure: true,
+    });
+
+    res.setHeader('Set-Cookie', cookie);
+}
+
+export function parseCookies(req: NextApiRequest) {
+    if (req.cookies) return req.cookies; // API routes don't parse cookies
+
+    const cookie = req.headers?.cookie;
+    return parse(cookie || '');
+}
+
+export function getCookie(req: NextApiRequest) {
+    return parseCookies(req)[COOKIE_NAME];
+}
+
+export function encode(token: string, storeId: string) {
+    return jwt.sign({ accessToken: token, storeId }, JWT_KEY);
+}
+
+export function decode(encodedCookie: string) {
+    return jwt.verify(encodedCookie, JWT_KEY);
+}

lib/hooks.ts

@@ -0,0 +1,23 @@
+import useSWR from 'swr';
+
+function fetcher(url: string) {
+    return fetch(url).then(res => res.json());
+}
+
+export function useStore() {
+    const { data, error } = useSWR('/api/store', fetcher);
+
+    return {
+        storeId: data?.storeId,
+        isError: error,
+    };
+}
+
+export function useProducts() {
+    const { data, error } = useSWR('/api/products', fetcher);
+
+    return {
+        summary: data,
+        isError: error,
+    };
+}

package-lock.json

@@ -14,11 +14,14 @@
   "license": "ISC",
   "dependencies": {
     "@bigcommerce/big-design": "^0.27.0",
+    "cookie": "^0.4.1",
+    "jsonwebtoken": "^8.5.1",
     "next": "^10.0.5",
     "node-bigcommerce": "^4.1.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "styled-components": "^4.4.1"
+    "styled-components": "^4.4.1",
+    "swr": "^0.4.1"
   },
   "devDependencies": {
     "@types/node": "^14.14.22",

package.json

@@ -1,13 +1,16 @@
 import { NextApiRequest, NextApiResponse } from 'next';
 import { getBCAuth } from '../../lib/auth';
+import { setCookie } from '../../lib/cookie';
 
 export default async function auth(req: NextApiRequest, res: NextApiResponse) {
     try {
-        await getBCAuth(req.query);
+        // Authenticate the app on install
+        const session = await getBCAuth(req.query);
 
+        setCookie(res, session);
         res.redirect(302, '/');
     } catch (error) {
-        const { data, response } = error;
-        res.status(response?.status || 500).json(data);
+        const { message, response } = error;
+        res.status(response?.status || 500).json(message);
     }
 }

pages/api/auth.ts

@@ -7,7 +7,7 @@ export default async function load(req: NextApiRequest, res: NextApiResponse) {
 
         res.redirect(302, '/');
     } catch (error) {
-        const { data, response } = error;
-        res.status(response?.status || 500).json(data);
+        const { message, response } = error;
+        res.status(response?.status || 500).json(message);
     }
 }