next-auth get and post problem: Cannot read properties of undefined (reading 'GET')

Question

I am learning next.js and i am developing a project right now. I encountered a problem while learning next-auth and got stuck in the project :/

next.js version of my project is 14.1.4

src\auth.ts:

import NextAuth from "next-auth/next";
import GoogleProvider from "next-auth/providers/google";
export const {
  handlers: { GET, POST },
  auth,
  signIn,
  signOut,
} = NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID as string,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
    }),
  ],
});

src\app\api\auth\[...nextauth\]\route.ts:

export { GET, POST } from "@/auth";

then I tried going to the signin page: http://localhost:3000/api/auth/signin

and encounter this error:

Server Error TypeError: Cannot read properties of undefined (reading 'GET')

This error happened while generating the page. Any console logs will be displayed in the terminal window. Source src\auth.ts (4:14) @ GET

 2 | import GoogleProvider from "next-auth/providers/google";
  3 | export const {`your text`
> 4 | handlers: { GET, POST },
    |            ^
  5 | auth,
  6 | signIn,
  7 | signOut,

i tried everything what i known but as said before, i am really new this framework.

Answer 1

The real problem is that you're following a toturial explaining next-auth version 5 while you have [email protected] in your package.json.

If you'd like to follow along the same tutorial, run

npm install next-auth@beta

Answer 2

I just solved this problem (honestly by trying random codes based on next-auth versions in github issues)

solution:

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";

const authOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
  ],
};

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };