0

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

1 Answer 1

0

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

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.