Why does my NextAuthJS discord login work in the test environment but cannot be built to production? (NextJS 13)

[devvf]

Summary

I am trying to deploy a NextJS application to vercel. This is a test sign in model using AuthJS. When I run the program using npm run devit works fine and I am able to log in to my discord account which is connected to an application on the developer portal. However, when I deploy it to Vercel and try and build the application for production I receive this error.

Type error: Route "app/api/auth/[...nextauth]/route.ts" does not match the required types of a Next.js Route.
  "authOptions" is not a valid Route export field.

For context I am using NextJS 13 and it's app folder method of rendering pages along with the NextAuth.js.

import NextAuth from "next-auth";
import type { NextAuthOptions } from "next-auth";
import DiscordProvider from "next-auth/providers/discord";

export const authOptions: NextAuthOptions = {
  providers: [
    DiscordProvider({
      clientId: process.env.DISCORD_CLIENT_ID!,
      clientSecret: process.env.DISCORD_CLIENT_SECRET!,
    })
  ]
};

const handler = NextAuth(authOptions);
export { handler as GET, handler as POST }

This is my code found inside the route, and the relative path to this folder is app/api/auth/[...nextauth]/route.ts which doesn't seem to have any problems when I run the program, only when trying to build it. I am not sure what to do as I am new to web development and have not encountered such an issue before and am perplexed. Any help is vastly appreciated.

Additional information

No response

Example

No response

[devjiwonchoi]

When you are in the development stage of your Next.js project, Typescript is allowed and is recognized during the runtime.

In the development stage, Next.js optimizes for the developer and their experience building the application. It comes with features that aim to improve the Developer Experience such the TypeScript and ESLint integration, Fast Refresh, and more.

On the other hand, when you next build your project, Typescript is also compiled into Javascript in your project and is stored in the build directory (.next as default).

In your case, your route.ts has been compiled to route.js, but the path that is stated in NextAuth.js is route.ts.

Type error: Route "app/api/auth/[...nextauth]/route.ts" does not match the required types of a Next.js Route.

When you are working with Typescript, you do not need to write the filename extension such as .ts.

In order to resolve your issue, try to remove the file extension .ts of your route path into
app/api/auth/[...nextauth]/route.

[Coderamrin]

I had the same issue. So I reverted the file name to route.ts.
then I've added this code snippet.

`import { getServerSession } from "next-auth/next";
import { NextResponse } from "next/server";
import { authOptions } from "./auth/[...nextauth]/route";

export async function GET(request: Request) {
const session = await getServerSession(authOptions);

if (!session) {
return new NextResponse(JSON.stringify({ error: "unauthorized" }), {
status: 401,
});
}

return NextResponse.json({ authenticated: !!session });
}`

[Coderamrin]

it's on the route.ts file under the api folder

[vuongManabie]

It's work . Thank you very much !

[devvf]

Hello! I'd just liked to say what worked for me in the end is removing the export in front of export const authOptions: NextAuthOptions as that for some reason does not seem to work when building to production - this makes the solution viable for NextJS 13 using route handlers which requires route.ts to be the file for an endpoint. (This applies to my original code).

I'd just like to say if this doesn't work for you - please refer to @devjiwonchoi's code which can be found above and is also very helpful for a number of optimisations in my project and Next in general.

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

const authOptions:NextAuthOptions = {
  providers: [
    DiscordProvider({
      clientId: process.env.DISCORD_CLIENT_ID!,
      clientSecret: process.env.DISCORD_CLIENT_SECRET!,
    })
  ]
};

const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };

Good luck with your projects guys 👍 Happy Coding!

-Thomas

[Kofichamp]

Wow pal thanks a lot. Its worked for me

[AuthorOfTheSurf]

For my case, I still needed authOptions: NextAuthOptions to be exported.

NextJS is only be this strict if the file is named route.ts.

So I simply the declaration out of route.ts, and into a new file that I called options.ts that is in the same [...nextauth]/ directory

[HickAndrade]

route.ts to options.ts?

[volodymyrfilon]

// options.ts

import prisma from '@/lib/prismadb'
import { PrismaAdapter } from '@auth/prisma-adapter'
import { AuthOptions } from 'next-auth'
import GoogleProvider from 'next-auth/providers/google'

const authOptions: AuthOptions = {
  adapter: PrismaAdapter(prisma),
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID as string,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET,
}

export default authOptions;

// route.ts

import authOptions from './options'; // Update the path accordingly
import NextAuth from 'next-auth';

const handler = NextAuth(authOptions);
export { handler as GET, handler as POST }

[ghjunior]

Solution: #50870 (comment)

[denniztr]

This solution has been helpfull to me

"next": "14.1.0"

[nicitaacom]

this solution works for me

"next":14.0.4

[absolutegravitas]

existing documentation here is still not updated because of this -- how are newbies just implementing supposed to know

[ffan0811]

I'm getting this error after upgrading nextjs to 14

[burn-c]

@ffan0811
Provisionally I created a new file with the authOptions function and imported it into the file src/app/api/auth/[...nextauth]/route.ts and in other places I was using authOptions, in my case resolved the type error.

[Vancelott]

@burn-c Did you name the file auth.ts, and where did you exactly place it? Thank you in advance.

[burn-c]

@Vancelott, since it's a specific context of NextAuth, I placed it within the same folder ( src/app/api/auth/[...nextauth]/authOptions.ts ) . As Next.js validates only 'route.ts' files, I believe it's not an issue to leave it there."

[Vancelott]

@burn-c Thank you, but I've got it working already as well. I created a new file in the root of the project called auth.ts, where I placed my authOptions, but I think what solved it for me was the import of the correct type for the authOptions - NextAuthOptions, and not just AuthOptions. One more thing I was always forgetting is to import the new authOptoins to my getSession hook.

[mergd]

Combo of moving authOptions into it's own file and removing the .ts from route.ts did the trick.

With the route.ts, it kept having the error "handler" is not a valid Route export field.

[whitallee]

For some reason I had "export const handler = NextAuth(authOptions);". I did attempt first by moving the authOptions to a utils file, but it didnt fix it by itself, however removing the export before const handler is what fully fixed it for me.

[andreimacavei]

This was the problem for me as well, I had a leftover export in front of handler

export const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };

[nestorvave]

thank u

[nicitaacom]

this solution works for me

"next":14.0.4

[brytebee]

Thanks!

The solution worked! 👍

[stellaoliveirabertt]

✅ Definitive Solution for Next.js 15 with next-auth@5

If you're getting this build error:

Type error: Route "src/app/api/auth/[...nextauth]/route.js" does not match the required types of a Next.js Route.
"authOptions" is not a valid Route export field.

⚠️ It means that Next.js 15 no longer allows exporting helper objects (like authOptions) directly from route files such as app/api/**/route.js or .ts.

---

✅ How to fix it properly:

---

1. Create a separate file for your authOptions

Suggested path: src/app/lib/auth.js

// src/app/lib/auth.js
import AzureADProvider from "next-auth/providers/azure-ad";

const authOptions = {
  providers: [
    AzureADProvider({
      clientId: process.env.AZURE_AD_CLIENT_ID,
      clientSecret: process.env.AZURE_AD_CLIENT_SECRET,
      tenantId: process.env.AZURE_AD_TENANT_ID,
    }),
  ],
  pages: {
    signIn: "/dashboard/login",
  },
  callbacks: {
    async session({ session, token }) {
      session.user.id = token.sub;
      return session;
    },
  },
};

export default authOptions;

---

2. Then fix your [...nextauth]/route.js (or .ts) like this:

import NextAuth from "next-auth";
import authOptions from "@/app/lib/auth";

const handler = NextAuth(authOptions);

export const GET = handler;
export const POST = handler;

---

✅ Now run:

npm run build

Your app should now build successfully on Next.js 15 + next-auth v5.