CODEWITHSUNDEEP
typescriptvercelnext.js13next-auth
Fakhrul Islam Fuad
Fakhrul Islam Fuad

Reputation: 911

authOptions is not a valid Route export field

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: enter image description here

Upvotes: 12

Views: 7789

Answers (6)

Fakhrul Islam Fuad
Fakhrul Islam Fuad

Reputation: 911

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

Upvotes: 11

Andre Goulart
Andre Goulart

Reputation: 596

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.

Upvotes: 2

syntax-punk
syntax-punk

Reputation: 4570

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 }

Upvotes: 4

Rowlet
Rowlet

Reputation: 29

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 }

Upvotes: 1

Fadhilah Dwi Ananda
Fadhilah Dwi Ananda

Reputation: 49

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 }

Upvotes: 4

Dinesh Duraisamy
Dinesh Duraisamy

Reputation: 176

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 }

Upvotes: 15

Related Questions