authOptions is not a valid Route export field

Question

Here is my authOptions code which is running perfectly on localhost.

import NextAuth, { NextAuthOptions } from "next-auth";
import GoogleProvider from "next-auth/providers/google";

export const authOptions: NextAuthOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID as string,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
    }),
  ],
  pages: {
    signIn: "/signin",
  },
};

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

The problem that I'm facing while deploying my project on vercel is:

Electric

Solution: Simply remove export from authOptions: – Poltroonery

Answer 1

Please use it like below in app/api/auth/[...nextauth]/route.js

import NextAuth from 'next-auth'
import authOptions from '../../../../lib/configs/auth/authOptions'

const handler = NextAuth(authOptions)

export { handler as GET, handler as POST }

Balcony

It would be great if you could add the implementation of the "authOptions." Thank you so much for considering it! – Gummosis

I was having this error because I was exporting authOption in route.ts, removing this export fixed it. Probably route.ts allow just one export, so you either can define auth options in a separate file and import on route.ts or define the auth options inside but without export it – Titania

Answer 2

I've fixed the issue using a separate file auth.ts

app/lib/auth.ts
import { NextAuthOptions } from "next-auth";
import GoogleProvider from "next-auth/providers/google";

export const authOptions: NextAuthOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID as string,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
    }),
  ],
  pages: {
    signIn: "/signin",
  },
};

and then I imported it inside the route.ts

app/api/auth/[...nextauth]/route.ts
import { authOptions } from "@/app/lib/auth";
import NextAuth from "next-auth";

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

Electric

No need to use another file. You just need to remove the export from authOptions. – Poltroonery

Answer 3

the error message:

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.

// 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 }

Sloshy

Answer 4

The issue is that you cannot export authOptions from app/api/auth/[...nextauth]/route.ts because it's a reserved file used for configuring an authentication middleware in NextJS.

So placing authOptions config in an auth.ts file in a lib folder for example (app/lib/auth.ts) and then importing it into your route.ts file is probably the way to go.

See example below:

# app/lib/auth.ts

import { NextAuthOptions } from "next-auth";
import DuendeIdentityServer6 from "next-auth/providers/duende-identity-server6";

export const authOptions: NextAuthOptions = {
  session: {
    strategy: "jwt", 
  }, 
  providers: [
    DuendeIdentityServer6({
      id: 'id-server',
      clientId: 'clientApp',
      clientSecret: 'strongSecret',
      issuer: 'http://localhost:5055',
      authorization: {
        params: {
          scope: 'openid profile demoApp'
        }
      },
      idToken: true,
    })
  ],
  callbacks: {
    async jwt({token, profile, account}) {
        if (profile) {
          token.username = profile.username;
        }

        if (account) {
          token.access_token = account.access_token;
        }
        return token;
    },
    async session({ session, token }) {
      if (token) {
        session.user.username = token.username;
      }
      return session;
    }
  }
};

Import the config:

# app/api/auth/[...nextauth]/route.ts

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

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST }

Elicia

Answer 5

My solution:

import NextAuth, { NextAuthOptions } from "next-auth";
import GoogleProvider from "next-auth/providers/google";

const authOptions: NextAuthOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID as string,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
    }),
  ],
  pages: {
    signIn: "/signin",
  },
};

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST }

Voodooism

Please kindly provide explanation for the code. – Francophobe

Explanation: He removed the export from authOptions – Poltroonery

Answer 6

Simply remove the export from authOptions:

export const authOptions // ❌ Bug when trying to export authOption
       const authOptions // ✅ Works fine

You just need to export the handler.
Not the authOptions.

Poltroonery