使用NextAuth表单动作实现登录时出现window未定义错误求助

问题原因 #

你在标记了'use server'的服务端表单动作里，使用了next-auth/react包的signIn方法——这个方法是客户端组件专用的，依赖浏览器环境的window对象。服务端执行时不存在window，因此抛出该错误。

解决方案 #

改用NextAuth提供的服务端专用signIn方法，从next-auth/server导入，而非next-auth/react。

修改后的登录动作页面代码 #

'use server'

import { signIn } from "next-auth/server";
import { redirect } from "next/navigation";

export type SignInActionResult = {
    status: "error";
    errorMessage: string;
} | undefined;

export async function signInAction(
    previousState: SignInActionResult | null,
    formData: FormData,
): Promise<SignInActionResult> {
    console.log(formData)

    try {
        const email = formData.get("email") as string;
        const password = formData.get("password") as string;

        // 服务端signIn：设置redirect为false，获取登录结果对象
        const result = await signIn('credentials', {
            redirect: false, 
            email,
            password,
            callbackUrl: '/protected'
        });

        // 登录成功则服务端跳转至目标页面
        if (result?.ok) {
            redirect('/protected');
        }

        // 登录失败返回错误信息
        return {
            status: "error",
            errorMessage: "Failed to signIn, invalid email or password.",
        } as const;

    } catch (error) {
        console.log(error)

        return {
            status: "error",
            errorMessage: "Failed to signIn, invalid email or password.",
        } as const;
    }
}

关键修改说明 #

1. 替换导入源：把next-auth/react换成next-auth/server，使用服务端适配的signIn方法。
2. 调整redirect参数：服务端signIn设redirect: false时，会返回包含ok字段的结果对象，而非直接跳转。
3. 服务端跳转：登录成功时用Next.js的redirect方法完成服务端跳转，避免客户端环境依赖。
4. 类型断言：给formData.get的结果添加as string类型断言，消除TypeScript类型警告。

登录页面代码无需修改 #

你的客户端登录页面代码逻辑正确，保持原样即可。

内容的提问来源于stack exchange，提问作者Naclin