Next.js 13.4 and NextAuth Type Error: 'AuthOptions' is not assignable to type 'never'

Question

I'm currently working on a Next.js 13.4 project and trying to set up NextAuth using the app/ router. However, I'm encountering a type error that I can't seem to resolve.

Here's my route.ts file:

import NextAuth, { AuthOptions } from "next-auth";
import DiscordProvider from "next-auth/providers/discord";

export const authOptions: AuthOptions = {
  providers: [
    DiscordProvider({
      clientId: process.env.CLIENT_ID as string,
      clientSecret: process.env.CLIENT_SECRET as string,
    }),
  ],
  session: {
    strategy: "jwt",
  },
  secret: process.env.NEXTAUTH_SECRET,
}

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST }

And here's the error message when running 'npm run build':

- info Linting and checking validity of types ...Failed to compile.

.next/types/app/api/auth/[...nextauth]/route.ts:8:13
Type error: Type 'OmitWithTag<typeof import("C:/Users/Luk/Documents/Workspace/zerotwo-dash/src/app/api/auth/[...nextauth]/route"), "GET" | "POST" | "HEAD" | "OPTIONS" | "PUT" | "DELETE" | "PATCH" | "config" | ... 6 more ... | "runtime", "">' does not satisfy the constraint '{ [x: string]: never; }'.
  Property 'authOptions' is incompatible with index signature.
    Type 'AuthOptions' is not assignable to type 'never'.

   6 |
   7 | // Check that the entry is a valid entry
>  8 | checkFields<Diff<{
     |             ^
   9 |   GET?: Function
  10 |   HEAD?: Function
  11 |   OPTIONS?: Function

I really have no idea whats happening here... when looking up the 'AuthOptions' on t he github page from nextauth i see nothing wrong with my code..

I would appreciate any insights or suggestions on how to resolve this issue. Thanks in advance!

Answer 1

Basically the issue is with exporting the authOptions with handlers in the route.ts file for nextJs 13.4+, just by removing the export from the authOptions you will be good to go. That was the reason seperating the authOptions worked :).

route.ts -->

import NextAuth, { AuthOptions } from "next-auth";
import DiscordProvider from "next-auth/providers/discord";

// Here we removed the export
const authOptions: AuthOptions = {
  providers: [
    DiscordProvider({
      clientId: process.env.CLIENT_ID as string,
      clientSecret: process.env.CLIENT_SECRET as string,
    }),
  ],
  session: {
    strategy: "jwt",
  },`enter code here`
  secret: process.env.NEXTAUTH_SECRET,
}

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST }

In case we want the authOptions somewhere else we can do that like --->

import NextAuth, { AuthOptions } from "next-auth";
import DiscordProvider from "next-auth/providers/discord";

// Here we removed the export
const authOptions: AuthOptions = {
  providers: [
    DiscordProvider({
      clientId: process.env.CLIENT_ID as string,
      clientSecret: process.env.CLIENT_SECRET as string,
    }),
  ],
  session: {
    strategy: "jwt",
  },`enter code here`
  secret: process.env.NEXTAUTH_SECRET,
}

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST, authOptions }