Next.js Discord

Discord Forum

How to migrate passport.js API route from "pages" directory to "app" directory in Next.js 13?``

Unanswered
Spectacled bear posted this in #help-forum
Open in Discord
Spectacled bearOP
I am trying to use passport.js for discord oAuth in the new 'App Router' directory in Next.js 13 but cannot get it to work

passport.js requires you to make an api endpoints, like this:

app.get('/auth/discord', passport.authenticate('discord'));


In the old pages directory, implementing passport-discord was fairly straightforward. Using Next.js 12's API routes, I would create a file at /pages/api/auth/discord/index.js like so:

import passport from "passport";
import "@/lib/DiscordStrategy";

export default async function (req, res, next) { 
 passport.authenticate("discord", { session: false, }) 
 (req, res, next); 
}


Trying to do the same in Next.js 13's App Router's Route Handlers at /app/api/auth/discord/route.js gives me the error TypeError: next is not a function

import passport from "passport";
import "@/lib/DiscordStrategy";

export async function GET(request, response, next) { 
 passport.authenticate("discord", { session: false, }) 
 (request, response, next); 
}

2 Replies

Spectacled bearOP
What I've Tried:

I've tried searching around everywhere but cannot seem to find any examples or implementations of passport oauth strategies in the new App Router. What is the difference between API Routes in the Pages directory and Route Handlers in the App directory? Why does one have access to the next function and one doesn't?

I thought maybe having this code in my middleware.js file might solve the issue, as you can have access to NextResponse next() but it also does not work and I get the same error:

import passport from "passport";
import "@/lib/DiscordStrategy"; 
import { NextResponse } from 'next/server'

// This function can be marked async if using await inside export function middleware(request, response) { 
  passport.authenticate("discord", { session: false, })
  (request, response, NextResponse.next()); 
}

// See "Matching Paths" below to learn more 
export const config = { 
 matcher: "/api/:path*", 
};


Does anyone know what I could be doing wrong or a potential solution?