I've gone through the first steps of the tutorial for embedding a public app into Shopify Admin but when I test the app in the Development store it won't open in the iframe. Instead, when I click to view the app, the browser renders the screen with the app name but then you can see the url updating through the auth flow. Once that completes the browser redirects to the domain URL for where the app lives instead of displaying the result in the iframe.
I've double checked many times and confirmed I have setup according to the tutorial. I've uninstalled the app and reinstalled, restarted the node server, and disabled/re-enabled embedded extension; none of this works. Is it possible I am missing a new config flag of some kind that has recently been updated for 2020 but not yet updated in the tutorials?? Server code is below based on that tutorial. Please help.
require("isomorphic-fetch");
require("dotenv").config();
const Koa = require("koa");
const next = require("next");
const { default: createShopifyAuth } = require("@shopify/koa-shopify-auth");
const { verifyRequest } = require("@shopify/koa-shopify-auth");
const session = require("koa-session");
const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();
const { SHOPIFY_API_SECRET_KEY, SHOPIFY_API_KEY } = process.env;
app.prepare().then(() => {
const server = new Koa();
server.use(session(server));
server.keys = [SHOPIFY_API_SECRET_KEY];
server.use(
createShopifyAuth({
apiKey: SHOPIFY_API_KEY,
secret: SHOPIFY_API_SECRET_KEY,
scopes: ["read_products"],
afterAuth: ctx => {
const { shop, accessToken } = ctx.session;
ctx.redirect("/");
}
})
);
server.use(verifyRequest());
server.use(async ctx => {
await handle(ctx.req, ctx.res);
ctx.respond = false;
ctx.res.statusCode = 200;
return;
});
server.listen(port, () => {
console.log(`> Ready and listening on http://localhost:${port}`);
});
});
