My app has stopped working suddenly for existing shopify stores . When a user clicks on my app in their dashboard my app loads, but some error occurred comes up and then white screen loads. On debugging I found that the call to my apps /graphql endpoint is giving 403 error. Here is my server.js code for reference . One strange thing I noticed is that the app works fine upon reinstalling and on fresh installs . Can someone help me as to why the 403 could be coming.
Also one thing I noticed is that my Shopify.Utils.loadCurrentSession is not calling loadCallback and directly giving undefined session. Something similar to this issue → https://github.com/Shopify/shopify-api-js/issues/162
import "@babel/polyfill";
import dotenv from "dotenv";
import "isomorphic-fetch";
import createShopifyAuth, { verifyRequest } from "@shopify/koa-shopify-auth";
import Shopify, { ApiVersion } from "@shopify/shopify-api";
import Koa from "koa";
import next from "next";
import Router from "koa-router";
const mongoose = require("mongoose");
import {
storeCallback,
loadCallback,
deleteCallback,
} from "../callbacks/sessionCallback";
const webhooksRegistrar = require("../webhooks/_webhooksRegistrar.js");
const webhookRouters = require("../webhooks/_webhookRouters.js");
const userRoutes = require("../routes/index.js");
const sequelize = require("./config.db");
import SessionModels from "../models/SessionModel.js";
const { Op } = require("sequelize");
sequelize.sync();
dotenv.config();
const port = parseInt(process.env.PORT, 10) || 8081;
const dev = process.env.NODE_ENV !== "production";
const app = next({
dev,
});
const handle = app.getRequestHandler();
const mongoUrl = process.env.MONGO_URL || "mongodb://127.0.0.1:27017/test";
mongoose.connect(
mongoUrl,
{
useNewUrlParser: true,
useUnifiedTopology: true,
},
(err) => {
if (err) {
console.log("--> There was an error connecting to MongoDB:", err.message);
} else {
console.log("--> Connected to MongoDB");
}
}
);
Shopify.Context.initialize({
API_KEY: process.env.SHOPIFY_API_KEY,
API_SECRET_KEY: process.env.SHOPIFY_API_SECRET,
SCOPES: process.env.SCOPES.split(","),
HOST_NAME: process.env.HOST.replace(/https:\/\/|\/$/g, ""),
API_VERSION: ApiVersion.October20,
IS_EMBEDDED_APP: true,
SESSION_STORAGE: new Shopify.Session.CustomSessionStorage(
storeCallback,
loadCallback,
deleteCallback
),
});
app.prepare().then(async () => {
const server = new Koa();
const router = new Router();
server.keys = [Shopify.Context.API_SECRET_KEY];
//offline token
server.use(
createShopifyAuth({
accessMode: "offline",
prefix: "/install",
async afterAuth(ctx) {
const { shop, accessToken, scope } = ctx.state.shopify;
const host = ctx.query.host;
webhooksRegistrar(shop, accessToken);
ctx.redirect(`/auth?shop=${shop}`);
},
})
);
//online token for embedded apps
server.use(
createShopifyAuth({
async afterAuth(ctx) {
const { shop, accessToken, scope } = ctx.state.shopify;
const host = ctx.query.host;
ctx.redirect(`/?shop=${shop}&host=${host}`);
},
})
);
const handleRequest = async (ctx) => {
await handle(ctx.req, ctx.res);
ctx.respond = false;
ctx.res.statusCode = 200;
};
router.post("/webhooks", async (ctx) => {
try {
await Shopify.Webhooks.Registry.process(ctx.req, ctx.res);
console.log(`Webhook processed, returned status code 200`);
} catch (error) {
console.log(`Failed to process webhook: ${error}`);
}
});
router.post(
"/graphql",
verifyRequest({ returnHeader: true }),
async (ctx, next) => {
await Shopify.Utils.graphqlProxy(ctx.req, ctx.res);
}
);
router.get("(/_next/static/.*)", handleRequest); // Static content is clear
router.get("/_next/webpack-hmr", handleRequest); // Webpack content is clear
router.get("(.*)", async (ctx) => {
const shop = ctx.query.shop;
ctx.res.setHeader(
"Content-Security-Policy",
`frame-ancestors https://${shop} https://admin.shopify.com;`
);
if (!shop) {
return await handleRequest(ctx);
}
const offlinesession = await SessionModels.count({
where: {
shop_url: shop,
isOnline: "false",
[Op.and]: [
{
access_token: {
[Op.ne]: null,
},
},
{
access_token: {
[Op.ne]: "undefined",
},
},
],
},
});
if (offlinesession == 0) {
return ctx.redirect(`/install/auth?shop=${shop}`);
} else {
const session = await Shopify.Utils.loadCurrentSession(
ctx.req,
ctx.res,
true
);
if (session && session.expires && session.expires <= new Date()) {
return ctx.redirect(`/auth?shop=${shop}`);
} else {
return await handleRequest(ctx);
}
}
});
server.use(webhookRouters());
server.use(userRoutes());
server.use(router.allowedMethods());
server.use(router.routes());
server.listen(port, () => {
console.log(`> Ready on http://localhost:${port}`);
});
});