Issue while building the app from Build a Shopify App with Node and React tutorial

[DrJulik]

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!

[Alex-Miller]

I'm experiencing the same issue

[jaredingold]

Same issue for me as well

[jaredingold]

Okay I think I figured it out... the tutorial is definitely confusing because it seems like parts of it will be functional but it's not until you move ahead.

I decided to trudge forward and go through "Add Shopify App Bridge"

If you continue through this section will fix the errors that you're experiencing.

[leoortiz]

Just saw that the URL for the App Bridge docs had changed: https://shopify.dev/apps/tools/app-bridge/getting-started

[BlackHawk17]

I'm trying to deploy Shopify Node JS React App to Heroku and had many issues that are fixed now however I'm getting auth?shop=undefined now.

https://MY-HEROKU-APP/auth?shop=undefined

https://undefined/admin/oauth/authorize?client_id=a74dcbf902a8a495e6bb4c38fb3b9a78&scope=write_produ...

Does this mean I just need to setup the Shopify App Bridge?