如何修复NextAuth重定向至404错误的问题？

核心问题 #

点击登录按钮后跳转到http://localhost:3000/api/auth/signin?callbackUrl=http%3A%2F%2Flocalhost%3A3000%2Fauth%2Flogin，且[...nextauth].js未被调用，原因如下：

错误点与修正方案 #

1. signIn未传递用户凭证

调用signIn时只指定了redirect: false，但没有传入用户输入的email和password。NextAuth无法获取登录凭证，因此触发默认重定向逻辑，而非调用CredentialsProvider的authorize方法。

修正代码（登录页面onLogin函数）：

const onLogin = async (e) => {
    e.preventDefault();
    setLoader(true);
    // 传入用户输入的邮箱和密码
    const result = await signIn("credentials", {
        redirect: false,
        email: values.email,
        password: values.password
    });
    setLoader(false);
    
    // 处理登录结果
    if (result?.error) {
        console.error("登录失败：", result.error);
        // 可在此添加前端错误提示，比如弹窗或文字提示
    } else if (result?.ok) {
        // 登录成功后跳转到目标页面
        router.push("/dashboard");
    }
};

2. [...nextauth].js中的环境错误

authorize方法里使用了浏览器端的alert()，但NextAuth的API路由运行在Node.js环境，该方法不支持，会导致报错，需替换为console.log()。

同时确保路由文件名是**pages/api/auth/[...nextauth].js**（注意是三个点、全小写），若文件名是[..NextAuth].js会导致Next.js无法匹配路由，API文件不会被调用。

修正后的[...nextauth].js代码：

import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";

const authOptions = {
    session: {
        strategy: "jwt"
    },
    providers: [
        CredentialsProvider({
            // 定义凭证字段，可选，用于生成默认登录表单
            credentials: {
                email: { label: "邮箱", type: "email" },
                password: { label: "密码", type: "password" }
            },
            async authorize(credentials, req) {
                console.log("已进入authorize函数，接收的凭证：", credentials);
                const { email, password } = credentials;

                // 模拟验证逻辑
                if (email !== "john@gmail.com" || password !== "1234") {
                    // 抛出错误，会被signIn的返回结果捕获
                    throw new Error("邮箱或密码错误");
                }

                // 返回用户信息，会被存入JWT和session
                return { email: "john@gmail.com", id: "1234", name: "John Doe" };
            }
        })
    ],
    pages: {
        signIn: "/auth/login"
    },
    // 可选：配置JWT和Session的回调，自定义存储内容
    callbacks: {
        jwt: async ({ token, user }) => {
            if (user) {
                token.id = user.id;
                token.email = user.email;
            }
            return token;
        },
        session: async ({ session, token }) => {
            if (token) {
                session.user.id = token.id;
                session.user.email = token.email;
            }
            return session;
        }
    }
};

export default NextAuth(authOptions);

3. 额外优化

• 登录按钮的loader状态需在signIn调用前后正确切换，避免用户重复点击
• 处理signIn的返回结果，给用户明确的登录状态反馈

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