Danil Diachenko
Danil Diachenko

Reputation: 11

Unexpected error in new version of NextJS

Getting error by using Next-Auth and new version of Next.JS (ver. 15).

Files:

import { authOptions } from "@/lib/auth";
import styles from "./styles.module.scss";
import Link from "next/link";
import { AiOutlineUser } from "react-icons/ai";
import { getServerSession } from "next-auth";

export const LoginOrHello = async () => {
    const session = await getServerSession(authOptions);

    return (
        <Link href={session ? "#" : "/login"} className={styles.iconLink}>
            <AiOutlineUser />
            <span>{session ? `Hello, ${session.user.email}` : "LOGIN"}</span>
        </Link>
    );
};

import { setCookie } from "@/helpers/setCookie";
import { NextAuthOptions } from "next-auth";
import NextAuth from "next-auth/next";
import CredentialsProvider from "next-auth/providers/credentials";
import GoogleProvider from "next-auth/providers/google";
import { cookies } from "next/headers";

export const authOptions: NextAuthOptions = {
    providers: [
        CredentialsProvider({
            name: "Credentials",
            credentials: {
                email: { label: "Email", type: "email", placeholder: "Email" },
                password: {
                    label: "Password",
                    type: "password",
                    placeholder: "Password",
                },
                rememberMe: {
                    label: "Remember Me",
                    type: "checkbox",
                    placeholder: "Remember Me",
                },
            },
            async authorize(credentials) {
                if (!credentials?.email || !credentials?.password) {
                    return null;
                }

                try {
                    const res = await fetch(
                        `${process.env.NEXT_PUBLIC_API_URL}/auth/login`,
                        {
                            method: "POST",
                            headers: {
                                "Content-Type": "application/json",
                            },
                            body: JSON.stringify({
                                ...credentials,
                                rememberMe:
                                    credentials.rememberMe === "true"
                                        ? true
                                        : false,
                            }),
                        }
                    );

                    const data = await res.json();

                    (await cookies()).set("token", data.token);

                    if (data.error) {
                        return { status: data?.status, error: data?.message };
                    }

                    return data;
                } catch (error) {
                    return error;
                }
            },
        }),
        GoogleProvider({
            clientId: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID as string,
            clientSecret: process.env
                .NEXT_PUBLIC_GOOGLE_CLIENT_SECRET as string,
        }),
    ],
    callbacks: {
        async jwt({ token, user, account, profile }) {
            if (account?.provider === "google" && account.access_token) {
                try {
                    const res = await fetch(
                        `${process.env.NEXT_PUBLIC_API_URL}/auth/google-login`,
                        {
                            method: "POST",
                            headers: {
                                "Content-Type": "application/json",
                            },
                            body: JSON.stringify({
                                token: account.access_token,
                            }),
                        }
                    );

                    const data = await res.json();
                    (await cookies()).set("token", data.token);

                    if (res.ok && data?.token) {
                        token.id = data.id;
                        token.email = data.email;
                        token.token = data.token;
                    } else {
                        throw new Error(
                            "Failed to exchange Google token for backend JWT"
                        );
                    }
                } catch (error) {
                    console.error("Error exchanging Google token:", error);
                }
            }

            if (user) {
                token.id = user.id;
                token.email = user.email || "";
                token.token = user.token;
            }

            return token;
        },
        async signIn({ user }: any) {
            if (user?.error) {
                throw new Error(user?.error);
            }
            return true;
        },
        async session({ session, token }) {
            if (token) {
                session.user.id = token.id!;
                session.user.email = token.email!;
                session.user.token = token.token;
            }
            return session;
        },
    },
    secret: process.env.NEXT_PUBLIC_NEXTAUTH_SECRET,
    jwt: {
        secret: process.env.NEXT_PUBLIC_NEXTAUTH_SECRET,
    },
    session: {
        strategy: "jwt",
    },
    pages: {
        signIn: "/login",
    },
};

import NextAuth, { DefaultSession, DefaultUser } from "next-auth";
import { JWT as NextAuthJWT } from "next-auth/jwt";

declare module "next-auth" {
    interface User extends DefaultUser {
        id: string;
        token?: string;
    }

    interface Session {
        user: {
            id: string;
            email: string;
            token?: string;
        } & DefaultSession["user"];
    }
}

declare module "next-auth/jwt" {
    interface JWT extends NextAuthJWT {
        id: string;
        email: string;
        token?: string;
    }
}

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

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

enter image description here enter image description here

Unexpected error, I have no ideas how to fix it. Pretty sure this problem is related to new version of Next.JS, because using previous version (14.x.x) there were no problems

Upvotes: 0

Views: 52

Answers (1)

Danil Diachenko
Danil Diachenko

Reputation: 11

Solved it by updating Next-Auth npm-package to the last version)

Upvotes: 0

Related Questions