Hey community. I was planning on switching over our app from cookies to the new session tokens auth, and decided to start with the updated tutorial, but ran into some issues.
When I try to authenticate and test my app on a dev store I see the usual shopify Ouath screen, but when I press Install unlisted app this happens:
1) The page redirects to https://mystore.ngrok.io/auth?shop=testshop.myshopify.com
2) Then it immediately redirects to https://brickspacelab.ngrok.io/auth?shop=undefined
3) The page obviously errors out
Here's my server.js
require("isomorphic-fetch");
const dotenv = require("dotenv");
const Koa = require("koa");
const next = require("next");
const { default: shopifyAuth } = require("@shopify/koa-shopify-auth");
const { verifyRequest } = require("@shopify/koa-shopify-auth");
const { default: Shopify, ApiVersion } = require("@shopify/shopify-api");
const Router = require("koa-router");
dotenv.config();
Shopify.Context.initialize({
API_KEY: process.env.SHOPIFY_API_KEY,
API_SECRET_KEY: process.env.SHOPIFY_API_SECRET,
SCOPES: process.env.SHOPIFY_API_SCOPES.split(","),
HOST_NAME: process.env.SHOPIFY_APP_URL.replace(/https:\/\//, ""),
API_VERSION: ApiVersion.October20,
IS_EMBEDDED_APP: true,
SESSION_STORAGE: new Shopify.Session.MemorySessionStorage(),
});
const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();
const ACTIVE_SHOPIFY_SHOPS = {};
app.prepare().then(() => {
const server = new Koa();
const router = new Router();
server.keys = [Shopify.Context.API_SECRET_KEY];
server.use(
shopifyAuth({
afterAuth(ctx) {
// console.log(ctx.state.shopify.shop);
const { shop, scope } = ctx.state.shopify;
ACTIVE_SHOPIFY_SHOPS[shop] = scope;
ctx.redirect(`/`);
},
})
);
const handleRequest = async (ctx) => {
await handle(ctx.req, ctx.res);
ctx.respond = false;
ctx.res.statusCode = 200;
};
router.get("/", async (ctx) => {
const shop = ctx.query.shop;
console.log(ctx.query.shop);
if (ACTIVE_SHOPIFY_SHOPS[shop] === undefined) {
ctx.redirect(`/auth?shop=${shop}`);
} else {
await handleRequest(ctx);
}
});
router.get("(/_next/static/.*)", handleRequest);
router.get("/_next/webpack-hmr", handleRequest);
router.get("(.*)", verifyRequest(), handleRequest);
server.use(router.allowedMethods());
server.use(router.routes());
server.listen(port, () => {
console.log(`> Ready on http://localhost:${port}`);
});
});
And my index.js page
const Index = () => (
<div>
<p>Sample app using React and Next.js</p>
</div>
);
export default Index;
Same code as in the tutorial. Double checked all my values in the .env file, they are all good.
Based on the error I assume the error comes from this block:
router.get("/", async (ctx) => {
const shop = ctx.query.shop;
console.log(ctx.query.shop);
if (ACTIVE_SHOPIFY_SHOPS[shop] === undefined) {
ctx.redirect(`/auth?shop=${shop}`);
} else {
await handleRequest(ctx);
}
});
When I first press to install the app and get redirected to shopify auth it logs out the name of the test store in the console. However when I press Install the app it logs out undefined.
All help is greatly appreciated!
