App prefix doesn't work

[Steven4294]

Is there an example of a project using next.js and an app-prefix (which is required to use next.js api routes)? As is, can't seem to get the app prefix stuff to work.

server.use(
    createShopifyAuth({
      apiKey: SHOPIFY_API_KEY,
      prefix: "/shopifyapp/",
      secret: SHOPIFY_API_SECRET,
      scopes: [SCOPES],
      accessMode: "offline",

      async afterAuth(ctx) {
        // set cookies and stuff
      },
    })
  );

  server.use(
    mount(
      "/shopifyapp",
      graphQLProxy({
        version: ApiVersion.October19,
      })
    )
  );

  server.use(verifyRequest({
    // default would be '/auth'
    authRoute: '/shopifyapp/auth',
    fallbackRoute: '/shopifyapp/install',
  }));

  router.get("(.*)", async (ctx) => {
    await handle(ctx.req, ctx.res);
    ctx.respond = false;
    ctx.res.statusCode = 200;
  });

Then for my app url I do https://853e7.ngrok.io/shopifyapp within the partners dashboard

Here are my logs:

[ardeearam]

Happens to me as well. Tracing the code now.

[ardeearam]

I have discovered a bug :

https://github.com/Shopify/koa-shopify-auth/blob/6a3b4144fc4511c634d5d031dc9e30b120186ca3/src/verify-request/verify-token.ts

(!session.expires || session.expires >= new Date())

Must be

(!session.expires || +(new Date(session.expires)) >= +(new Date()))

Especially if our session storage is Redis (as it serializes to string).

I'll try to issue a pull request for this.

[paulomarg]

Hey @Steven4294, it seems like you're mounting the GraphQL proxy as your root at/shopifyapp, which is what the Admin page will try to load (as per your settings). You'll need a different root endpoint, that redirects the user to /shopifyapp/auth?shop=XYZ if they haven't performed OAuth yet, or loads the app 'skeleton' to build your App Bridge client.

Unfortunately we don't have an example specifically for next.js, but our Koa tutorial might help here - step 7 in the linked section may be helpful for your case.

Hope this helps!

[github-actions[bot]]

Note that this repo is no longer maintained and this issue will not be reviewed. Prefer the official JavaScript API library. If you still want to use Koa, see simple-koa-shopify-auth for a potential community solution.