NextAuth.js服务端signIn函数实现问题：重定向失效会话未保存

问题排查与修复步骤 #

1. 表单字段与登录参数不匹配 #

你的表单手机号输入框name为phone，但signIn调用时传递的是username，同时CredentialsProvider配置的字段也是username，这会导致验证逻辑无法正确拿到手机号参数，登录失败后触发重定向。

修复：
统一字段名，将表单输入框的name改为username：

<TextField
    margin="normal"
    required
    fullWidth
    id="phone"
    label="Phone Number"
    name="username" // 修改为username
    onChange={(e) => setPhone(e.target.value)}
    autoComplete="phone"
    autoFocus
/>

2. 错误的登录触发方式 #

用useEffect监听submit状态调用signIn属于冗余写法，且未处理异步结果、未重置状态，容易引发重复调用或错误无法捕获。

修复：直接在提交函数中调用signIn并手动处理结果：

const handleSubmit = async (e) => {
    e.preventDefault();
    const result = await signIn("credentials", {
        callbackUrl: '/',
        username: phone, 
        password: password,
        redirect: false // 关闭自动重定向，手动处理结果
    });

    if (result?.error) {
        // 处理登录错误，比如提示用户账号密码错误
        console.error(result.error);
    } else {
        // 登录成功后手动跳转
        window.location.href = '/';
    }
}

同时删除冗余的submit状态和useEffect：

// 移除以下代码
const [submit, setSubmit] = useState(false);

useEffect(() => {
    if(submit){
        signIn("credentials", {
            callbackUrl: '/',
            username: phone, 
            password: password,
        })
    }
}, [submit])

3. 重定向回调逻辑不合法 #

你的redirect回调直接返回传入的url，未验证是否为合法子路径，触发NextAuth的安全限制导致重定向异常。

修复：修改回调确保只返回合法路径：

async redirect({ url, baseUrl }) {
    // 仅允许baseUrl的子路径或相对路径
    const isAllowed = url.startsWith(baseUrl) || url.startsWith('/');
    return isAllowed ? url : baseUrl;
}

4. 确保用户结构符合要求 #

authorize函数返回的用户对象必须包含id字段（JWT策略需要唯一标识），检查checkCredentials返回的user是否包含该字段，若没有则补充：

async authorize(credentials, req){
    const user_data = await checkCredentials(credentials.username, credentials.password);
    if(user_data.success){
        // 补充id字段，可用手机号或数据库主键
        return { ...user_data.user, id: user_data.user.phone };
    } else{
        return null;
    }
}

5. 移除无效回调配置 #

你的callbacks中存在无效的credentials回调，NextAuth无此配置项，直接删除：

// 移除以下代码
async credentials({ user, account, profile }){
    return Promise.resolve(true);
}

6. 开启调试模式（可选） #

暂时将debug: true开启，查看服务器端日志，可定位登录过程中的具体错误（如参数传递、验证逻辑执行情况），调试完成后改回false。

内容的提问来源于stack exchange，提问作者Jasper van Gent