Error: `headers` was called outside a request scope

Question

I have just installed Authjs v5 on my nextjs14 project; the setup is as the documentation says and it's in bare-bones condition I haven't added any thing to the config files. the proble is when I try to signIn, I get this error saying: Error: headers was called outside a request scope. Read more: https://nextjs.org/docs/messages/next-dynamic-api-wrong-context. how to solve this problem? I checked the documentation but couldn't find anything helpful.

//my handler in a clinet component
  function handleLogin(e) {
    e.preventDefault();
    signIn("credentials", { email, password });


// auth.js setup
import NextAuth from "next-auth";
import Credentials from "next-auth/providers/credentials";

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [
    Credentials({
      credentials: {
        email: {},
        password: {},
      },
      authorize: async (credentials) => {
     let user = {email: credentials.email}
console.log(user)
return user;
      },
    }),
  ],
});

and i have the route.js file in app/api/[...nextauth]/route.js

import { handlers } from "@/auth"; // Referring to the auth.ts we just created
export const { GET, POST } = handlers;

what seems to be the problem?

tried to test the signin functionality, I was expecting to see my user credentials in authorize function.

Answer 1

Faced this problem, using next-authV5

I forgot to add 'use server' in my lib/action.ts file, where i actually call "signIn" method. See link