Stuck on tutorial with 404

DoggoThings_com
Tourist
3 0 7

Hi,

 

I am going through the tutorial here

https://developers.shopify.com/tutorials/build-a-shopify-app-with-node-and-react/embed-your-app-in-s...

 

I am stuck on Authenticating your app

https://developers.shopify.com/tutorials/build-a-shopify-app-with-node-and-react/embed-your-app-in-s...

 

I keep getting an ngrok 404 page when I go to the url https://xxxxxx.ngrok.io/auth?shop=myshop.myshopify.com

 

image.png

 

require("isomorphic-fetch");
const Koa = require("koa");
const next = require("next");
const { default: createShopifyAuth } = require("@shopify/koa-shopify-auth");
const dotenv = require("dotenv");
const { verifyRequest } = require("@shopify/koa-shopify-auth");
const session = require("koa-session");

dotenv.config();

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(async ctx => {
    await handle(ctx.req, ctx.res);
    ctx.respond = false;
    ctx.res.statusCode = 200;
    return;
  });

  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 on http://localhost:${port}`);
  });
});
{
  "name": "acmeincapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@shopify/koa-shopify-auth": "^3.1.30",
    "@shopify/polaris": "^3.21.0",
    "dotenv": "^8.0.0",
    "isomorphic-fetch": "^2.2.1",
    "koa": "^2.7.0",
    "koa-session": "^5.12.2",
    "next": "^9.0.3",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "devDependencies": {
    "eslint-plugin-shopify": "^30.0.1"
  }
}

image.png

0 Likes
katiedavis
Shopify Staff (Retired)
Shopify Staff (Retired)
39 7 12

Hi @DoggoThings_com ,

 

Your code looks fine to me. Did you list the callback url in the partners dash? What does the browser and console display when you try to hit the URL? Can you make sure you're also entering the https version of the address? 

0 Likes
DoggoThings_com
Tourist
3 0 7

Using HTTPS: Check

Added callback url: Check

Console displays same 404 error.

0 Likes
clueleast
Shopify Partner
1 0 0

Hi, I am struggling with the same issue, did you find a solution?

0 Likes
julienvw
New Member
1 0 1

I have the same problem

mwarner
Shopify Partner
1 0 0

Remove the return statement when using the server. This should fix the 404 error

 

app.prepare().then(() => {

const server = new Koa();
server.use(session(server));
server.keys = [SHOPIFY_API_SECRET_KEY];
server.use(async ctx => {
await handle(ctx.req, ctx.res);
ctx.respond = false;
ctx.res.statusCode = 200;
});
0 Likes