Not possible to add Next.js API routes due to shopify-auth setup

[Steven4294]

Issue summary

It is not possible to follow Next.js documentation for creating API routes in your pages/api directory. It's caused by the default setup and documentation how koa-shopify-auth is being used. As its documented right now, every single GET request to your server will be forced to authenticate, which forces any SSR request to fail, because the server is trying to verify its own API calls.

Additionally, the solution offered by @tolgap here doesn't work - it only works for fetching data during intial load when the context is exposed via getInitialProps.

E.g.

	static async getInitialProps(ctx) {
		const shop = ctx.query.shop;
		const res = await http.get(ctx, `/api/stores/${shop}`);
                // do something with res
		return {
			shop: shop,
			// ctx: ctx    // can't actually save the context due to circular reference
		}
	}

This works, however there's no way to make subsequent web calls since the context is ephemeral and can't be saved

[Steven4294]

ive moved my app into a prefix /app/… which solves the problem of redirecting my /pages/api calls to /auth (and requiring shopify cookies)

Complete hack but it works

[tolgap]

If you need API routes where it doesn't matter if you are authenticated with Shopify, you can just skip the verifyRequest middleware for those routes using this snippet:

// server.js

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

  // Any route starting with `/api` will not be checked for Shopify auth
  router.get("/api/(.*)", async (ctx) => {
    await handle(ctx.req, ctx.res);
    ctx.respond = false;
    ctx.res.statusCode = 200;
  });

  // All other requests will be handled with `verifyRequest()` and require Shopify auth
  router.get("(.*)", verifyRequest(), async (ctx) => {
    await handle(ctx.req, ctx.res);
    ctx.respond = false;
    ctx.res.statusCode = 200;
  });
});

Precendence is important in @koa/router: https://github.com/koajs/router/blob/master/API.md Make sure you're adding the /api route matching before the catchall.

[bluebeel]

Hello,

I created a package to remove the custom server and managed to deploy an app shopify with only nextjs on Vercel.

The package: https://github.com/bluebeel/nextjs-shopify-auth The demo app: https://github.com/bluebeel/nextjs-shopify

It only lacks the webhooks management if I have time or if someone wants to contribute.

Cheers :)

[keiraarts]

This is great @bluebeel ! I'll try to contribute here.

[harisvsulaiman]

You can use https://github.com/harisvsulaiman/koa-nextjs to use official koa middlewares to use Shopify with nextjs api routes.

[github-actions[bot]]

This issue is stale because it has been open for 60 days with no activity. It will be closed if no further action occurs in 14 days.

[github-actions[bot]]

We are closing this issue because it has been inactive for a few months. This probably means that it is not reproducible or it has been fixed in a newer version. If it’s an enhancement and hasn’t been taken on since it was submitted, then it seems other issues have taken priority.

If you still encounter this issue with the latest stable version, please reopen using the issue template. You can also contribute directly by submitting a pull request– see the CONTRIBUTING.md file for guidelines

Thank you!