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

[tolgap]

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.

Expected behavior

The app template should support usage of Next.js API routes feature.

Actual behavior

requests to /api are being redirected to /auth.

Reduced test case

https://nextjs.org/docs#api-routes
Add the simplest of pages to pages/api/index.js that just returns 200.
Add an API call in pages/index.js using getInitialProps to that newly added /api route.

[junaid33]

@tolgap Were you able to figure out how to convert the server.js middleware into the new API routes? You can't host using now.sh if we are using a custom server.js file so I'm working on migrating auth and graphQLproxy to api routes, but I'm having some problems.

[tolgap]

@junaid33

Yes I did fix it. The problem was that cookies (Shopify's and your own app's) were not being passed into the fetch API calls. So I created a small wrapper around fetch that just does that:

// lib/http.js

import qs from "qs";
import _ from "lodash";
import fetch from "isomorphic-fetch";
import { getCookies } from "cookies-next";

const joinCookies = ctx => {
  return _(getCookies(ctx))
    .map((value, key) => {
      return [key, value].join("=");
    })
    .join(";");
};

export const get = async (ctx, path, params) => {
  const res = await fetch(
    [
      process.env.HOST,
      path,
      qs.stringify(params, { addQueryPrefix: true })
    ].join(""),
    {
      method: "GET",
      headers: {
        Cookie: joinCookies(ctx)
      }
    }
  );

  return await res.json();
};

export const post = async (ctx, path, params) => {
  return await fetch([process.env.HOST, path].join(""), {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Cookie: joinCookies(ctx)
    },
    body: JSON.stringify(params)
  });
};

export const patch = async (ctx, path, params) => {
  return await fetch([process.env.HOST, path].join(""), {
    method: "PATCH",
    headers: {
      "Content-Type": "application/json",
      Cookie: joinCookies(ctx)
    },
    body: JSON.stringify(params)
  });
}

export default {
  get,
  post,
  patch,
  put: patch
};

This small http lib accepts the current Next.js context as the first parameter, and figures out the cookies from that context.

Usage:

// pages/post/[id].js

class Post extends React.Component {
  static async getInitialProps(ctx) {
    const { id } = ctx.query;
    const { data: { post } } = await http.get(ctx, `/api/posts/${id}`);

    return { post };
  }
}

disclaimer: I am 100% sure this can be done in a better way "Next"-style way, but I am still figuring out Next.js. So if you do find a better way to automatically pass cookies into these calls, please let me know in this issue 👍 .

[junaid33]

@tolgap Oh maybe I misunderstood. API routes worked fine for me with the current set-up. I think Next.js provides res.cookie to the api routes as well. My issue is converting the functions in server.js into API routes so the app can be hosted on now V2.

For example:

// server/server.js

  server.use(
    graphQLProxy({
      version: ApiVersion.October19
    })
  );

If I try to convert it into a API route, it does not work:

// pages/api/gqlproxy.js

import Koa from 'koa';
import { graphQLProxy } from '@shopify/koa-shopify-graphql-proxy';

const server = new Koa();
const handler = (req, res) => {
     graphQLProxy({shop: "testshop", password:'testpass',});
};

export default server.use(handler);

Any idea on how to migrate with middleware into a serverless api route?

[tolgap]

Seeing as I figured this out (by making sure I'm using cookies when performing the API calls in getInitialProps), I'm closing this issue.

[Steven4294]

Having the same issue

[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 :)

cc: @Steven4294