Stuck on tutorial with 404

Highlighted
Tourist
3 0 5

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
Highlighted
Shopify Staff
Shopify Staff
39 7 9

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
Highlighted
Tourist
3 0 5

Using HTTPS: Check

Added callback url: Check

Console displays same 404 error.

0 Likes
Highlighted
New Member
1 0 0

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

0 Likes
Highlighted
New Member
1 0 1

I have the same problem

1 Like
Highlighted
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