Reputation: 11
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 };
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
Reputation: 11
Solved it by updating Next-Auth npm-package to the last version)
Upvotes: 0