Next-Auth gives error on sign in: "API handler should not return a value, received object."

I'm using [email protected] with [email protected] and Typescript. Whenever I use the signIn() function, it goes through sign in as normal, but then print the following line to the server's console: API handler should not return a value, received object. I am not signed in after doing this.

I've checked my [...nextauth].ts file and can't find any errors. The code is below:

import clientPromise from "@/lib/mongodbadapter";
import { MongoDBAdapter } from "@next-auth/mongodb-adapter";
import NextAuth, { AuthOptions } from "next-auth"
import DiscordProvider from "next-auth/providers/discord";
import GitHubProvider from "next-auth/providers/github";

export const authOptions: AuthOptions = {
    adapter: MongoDBAdapter(clientPromise),
    providers: [
        DiscordProvider({
            clientId: process.env.DISCORD_CLIENT_ID!,
            clientSecret: process.env.DISCORD_CLIENT_SECRET!
        }),
        GitHubProvider({
            clientId: process.env.GITHUB_CLIENT_ID!,
            clientSecret: process.env.GITHUB_CLIENT_SECRET!
        })
    ]
}

export default NextAuth(authOptions)

I've wrapped all HTML elements in a SessionProvider, like so:

export default function App({ Component, pageProps: { session, ...pageProps } }: AppProps) {
  return <SessionProvider session={session}>
    <Navbar />
    <Component {...pageProps} />
  </SessionProvider>
}

In my index.ts, I log session, like so:

export async function getServerSideProps(ctx: any) {
  return {
    props: {
        session: await getServerSession(ctx.req, ctx.res, authOptions)
    }
  }
}

The server log is this:

undefined
- wait compiling /api/auth/[...nextauth] (client and server)...
- event compiled successfully in 265 ms (63 modules)
API handler should not return a value, received object.
API handler should not return a value, received object.
undefined

The undefined come from where I log the session. The compiling is from me returning to the index.ts page after signing in.

Even though session is undefined, my database (I'm using @next-auth/[email protected]) has the relevant user and account documents.

What do I need to change to avoid this error and make it actually sign me in, or is it an issue with Next-Auth that's out of my control?

Edit: I confirmed my IP is allowed in my MongoDB Atlas instance.

Solution

Had the same issue. Just changed [...nextauth].ts

from:

export default NextAuth(authOptions)

to:

const authHandler = NextAuth(authOptions);
export default async function handler(...params: any[]) {
  await authHandler(...params);
}

Hope it helps.

What we're doing here is initializing NextAuth on its "advanced" form instead of using its simpler form. You can read more about it in the link but it let's you access variables inside the request and response objects. For example, you could access req.cookies.