now-shopify-auth
v1.0.6
Published
Authenticate your Next.js app and ZEIT Now serverless functions with Shopify.
Downloads
6
Readme
now-shopify-auth
Authenticate your Next.js app and ZEIT Now serverless functions with Shopify.
Installation
$ npm install -S now-shopify-auth
Usage
verifyRequest
in pages/_app.tsx
import App, { AppContext, AppProps } from "next/app";
import { parseCookies } from "nookies";
import { AppProvider } from "@shopify/polaris";
import { Loading, Provider } from "@shopify/app-bridge-react";
import { verifyRequest } from "now-shopify-auth";
const apiKey = "shopify api key";
class MyShopifyApp extends App<AppProps & { shopOrigin: string }> {
static async getInitialProps({ Component, ctx }: AppContext) {
const authRoute = "/api/shopify/auth";
const fallbackRoute = "/login";
const verifyTokenUrl = `https://myshopifyapp.com/api/shopify/verify-token`;
const cookies = parseCookies(ctx);
const shopOrigin = ctx.query.shop ?? cookies.shopOrigin;
if (ctx.pathname !== fallbackRoute) {
await verifyRequest({
query: ctx.query,
cookies,
res: ctx.res,
options: { authRoute, fallbackRoute, verifyTokenUrl },
});
}
return {
pageProps: {
// Call page-level getInitialProps
...(Component.getInitialProps ? await Component.getInitialProps(ctx) : {}),
},
shopOrigin,
};
}
render() {
const { Component, pageProps, shopOrigin } = this.props;
if (!shopOrigin) {
return (
<AppProvider>
<Component {...pageProps} />
</AppProvider>
);
}
const forceRedirect = true;
if (
forceRedirect &&
typeof window !== "undefined" &&
window === window.parent
) {
window.location.href = `https://${shopOrigin}/admin/apps/${apiKey}${location.pathname}${location.search || ""}`;
return <>Redirecting to Shopify</>;
}
const shopifyBridgeConfig: import("@shopify/app-bridge").AppConfig = {
apiKey,
shopOrigin,
forceRedirect,
};
return (
<AppProvider
{...shopifyBridgeConfig}
>
<Provider config={shopifyBridgeConfig}>
<Loading />
<Component {...pageProps} />
</Provider>
</AppProvider>
);
}
}
in pages/api/hello-word.ts
import { NowRequest, NowResponse } from "@now/node";
import { verifyRequest } from "now-shopify-auth";
export default async function sendTestNotification(req: NowRequest, res: NowResponse): Promise<void> {
const authRoute = "/api/shopify/auth";
const fallbackRoute = "/login";
const verifyTokenUrl = `https://myshopifyapp.com/api/shopify/verify-token`;
await verifyRequest({ query: req.query, cookies: req.cookies, res, options: { authRoute, fallbackRoute, verifyTokenUrl } });
}
createShopifyAuth
Returns a set of helpers that you will need to use in 4 different routes explained below.
import createShopifyAuth, { OAuthStartOptions } from "now-shopify-auth";
const shopifyAuthOptions: OAuthStartOptions = {
// your shopify app api key
apiKey: "SHOPIFY_API_KEY",
// your shopify app secret
secret: "SHOPIFY_API_SECRET_KEY",
// your app url
appUrl: "https://myshopifyapp.com",
// if specified, mounts the routes off of the given path
// eg. /api/shopify/auth, /api/shopify/auth/callback
// defaults to ""
prefix: "/api/shopify",
// scopes to request on the merchants store
scopes: ["read_products", "read_orders"],
// set access mode, default is "online"
accessMode: "offline",
// callback for when auth is completed
async afterAuth({ shopOrigin, shopifyToken, res }) {
console.log(`We're authenticated on shop ${shopOrigin}: ${shopifyToken}`);
res.writeHead(302, { Location: `https://${shopOrigin}/admin/apps/${apiKey}` });
res.end();
},
};
Required routes
In a Next.js app, you will need to create these 5 routes:
- /api/shopify/auth/callback
- /api/shopify/auth/enable-cookies
- /api/shopify/auth/index
- /api/shopify/auth/inline
- /api/shopify/verify-token
Theses files will need the following content for the authentication and verification processes to work as expected
/api/shopify/auth/callback
import { NowRequest, NowResponse } from "@now/node";
import createShopifyAuth from "now-shopify-auth";
import { shopifyAuthOptions } from "../../../config";
export default async function shopifyAuthCallback(req: NowRequest, res: NowResponse): Promise<void> {
const { oAuthCallback } = createShopifyAuth(shopifyAuthOptions);
await oAuthCallback(req, res);
}
/api/shopify/auth/enable-cookies
import { NowRequest, NowResponse } from "@now/node";
import createShopifyAuth from "now-shopify-auth";
import { shopifyAuthOptions } from "../../../config";
export default async function shopifyAuthEnableCookies(req: NowRequest, res: NowResponse): Promise<void> {
const { enableCookies } = createShopifyAuth(shopifyAuthOptions);
await enableCookies(req, res);
}
/api/shopify/auth/index
import { NowRequest, NowResponse } from "@now/node";
import createShopifyAuth, { hasCookieAccess, shouldPerformInlineOAuth } from "now-shopify-auth";
import { shopifyAuthOptions } from "../../../config";
export default async function shopifyAuthIndex(req: NowRequest, res: NowResponse): Promise<void> {
const {
enableCookiesRedirect,
oAuthStart,
topLevelOAuthRedirect,
} = createShopifyAuth(shopifyAuthOptions);
if (!hasCookieAccess(req.cookies)) {
await enableCookiesRedirect(req, res);
return;
}
if (shouldPerformInlineOAuth(req.cookies)) {
await oAuthStart(req, res);
return;
}
await topLevelOAuthRedirect(req, res);
}
/api/shopify/auth/inline
import { NowRequest, NowResponse } from "@now/node";
import createShopifyAuth from "now-shopify-auth";
import { shopifyAuthOptions } from "../../../config";
export default async function shopifyAuthInline(req: NowRequest, res: NowResponse): Promise<void> {
const { oAuthStart } = createShopifyAuth(shopifyAuthOptions);
await oAuthStart(req, res);
}
/api/shopify/verify-token
This is a simple proxy route to avoid CORS issues we would face by hitting Shopify API from a different domain
import { NowRequest, NowResponse } from "@now/node";
import fetch from "isomorphic-fetch";
export default async function verifyToken(req: NowRequest, res: NowResponse): Promise<void> {
const { shopOrigin, shopifyToken } = req.cookies;
const response = await fetch(
`https://${shopOrigin}/admin/metafields.json`,
{
method: "GET",
headers: {
"Content-Type": "application/json",
"X-Shopify-Access-Token": shopifyToken,
},
},
);
res.status(response.status).end();
}
Gotchas
Make sure to install a fetch polyfill, since internally we use it to make HTTP requests.
In your terminal
$ npm install -S isomorphic-fetch
In your app
import "isomorphic-fetch"
OR
require("isomorphic-fetch")