Octokit Express Middleware with Next.js

Question

I am just practicing creating a GitHub app. Part of the Octokit it says that I can use the createNodeMiddleware. Now that might not necessarily be as simple with next.js; however, the problem that I am having is actually a compiler error (it seems) where it says that it cannot read properties of undefined (reading 'substr') when I am trying to just create a new instance of the App object.

Here is my code

    import { Octokit, App } from "octokit";
    
    // middleware.ts
    import { NextResponse } from 'next/server'
    import type { NextRequest } from 'next/server'
    
    // This function can be marked `async` if using `await` inside
    export function middleware(request: NextRequest) {
        const myApp = new App({
            appId: 123,
            privateKey: "",        
        });
    
        return NextResponse.redirect(new URL('/about-2', request.url))
    }
    
    // See "Matching Paths" below to learn more
    export const config = {
        matcher: '/about/:path*',
    }

When it executes the line for const myApp = new App({... it throws this error. Any ideas on where to start with this? I realize that I may need to manually make the routes that it creates with the middleware in the end. But I was hoping to at least be able to create an instance of the App with Octokit as it seems like that will be necessary no matter what functionality that I want from octokit. This is a nextjs app bootstraped with create-next-app and the typescript template.

    Server Error
    TypeError: Cannot read properties of undefined (reading 'substr')
    
    This error happened while generating the page. Any console logs will be displayed in the terminal window.
    Call Stack
    <unknown>
    node_modules\universal-user-agent\dist-web\index.js (6:0)
    getUserAgent
    node_modules\universal-user-agent\dist-web\index.js (6:26)
    eval
    node_modules\@octokit\endpoint\dist-web\index.js (359:64)
    (middleware)/./node_modules/@octokit/endpoint/dist-web/index.js
    evalmachine.<anonymous> (138:1)
    __webpack_require__
    evalmachine.<anonymous> (37:33)
    fn
    evalmachine.<anonymous> (269:21)
    eval
    webpack-internal:///(middleware)/./node_modules/@octokit/request/dist-web/index.js (5:75)
    (middleware)/./node_modules/@octokit/request/dist-web/index.js
    evalmachine.<anonymous> (248:1)
    __webpack_require__
    evalmachine.<anonymous> (37:33)
    fn
    evalmachine.<anonymous> (269:21)
    eval
    webpack-internal:///(middleware)/./node_modules/@octokit/core/dist-web/index.js (8:74)

Answer 1

Following their documentation documentation, you can implement the endpoints you need.

1. Write a function to parse the HTTP request into an OctokitRequest object.
   You don't need to. NextRequest matches the specs in node/parse-request.ts.
2. Write a function to render an OctokitResponse object.
   Looking at node/send-response.js, you will need to return a NextResponse.

Your function can look like this:

// app/src/app/api/github/oauth/login/route.js
import { handleRequest } from '@octokit/oauth-app'
import oAuthApp from '@/lib/oauth-app'

export async function GET(request) {
  const octokitRequest = request
  const octokitReponse = await handleRequest(oAuthApp, {}, octokitRequest)
  
  return new Response(octokitReponse.text, {
    status: octokitReponse.status,
    headers: octokitReponse.headers,
  })
}

Better yet, extract it to a helper that you can reuse:

// app/src/lib/handle-github-request.js
import { handleRequest } from '@octokit/oauth-app'
import oAuthApp from '@/lib/oauth-app'

export default async function handleGithubRequest(request) {
  return handleRequest(oAuthApp, {}, request)
}

And implement your paths

// app/src/app/api/github/oauth/login/route.js
import handleGithubRequest from '@/lib/handle-github-request'
export const GET = handleGithubRequest

// app/src/app/api/github/oauth/callback/route.js
import handleGithubRequest from '@/lib/handle-github-request'
export const GET = handleGithubRequest