Next-Auth凭证登录出现401未授权错误，请求技术协助

核心排查方向及修复步骤 #

1. 必须配置JWT Secret #

Next-Auth使用Credentials Provider时，依赖JWT存储用户会话，未设置secret会直接导致认证失败返回401。

修复：
取消注释NextAuth配置中的secret行，并确保环境变量JWT_SECRET已正确设置：

secret: process.env.JWT_SECRET,

生成JWT Secret的终端命令：

openssl rand -hex 32

将生成的字符串添加到项目根目录的.env文件：

JWT_SECRET=你的生成字符串

2. 检查authorize函数执行逻辑 #

401错误大概率是authorize函数返回null或抛出错误导致的，按以下步骤排查：

• 查看控制台是否打印Next-Auth user ：
  • 未打印：说明后端登录接口调用失败（res.ok为false），此时会抛出user.message错误。需检查：
    • signInUrl是否正确（确认NEXT_PUBLIC_API_SERVICE_BASE_URL环境变量配置无误）
    • 用户名密码是否匹配后端接口要求
    • 后端接口返回的HTTP状态码是否为200（可在浏览器网络面板查看/api/v1/User/Login请求状态）
  • 已打印用户信息但仍返回401：大概率是未配置JWT Secret导致，回到第一步修复。

3. 修正Session回调字段错误 #

你的session回调存在笔误：jwt回调存储的是idToken，但session里却赋值不存在的token.accessToken，虽不是401直接原因，但会导致会话信息缺失。

修复：

async session({ session, token }) {
    session.user.idToken = token.idToken,
    session.user.refreshToken = token.refreshToken,
    session.user.roles = token.roles,
    session.user.username = token.username
    return Promise.resolve(session);
}

4. 捕获前端signIn错误信息 #

在handleLoginSubmit中打印res对象，获取Next-Auth返回的具体错误提示，辅助定位问题：

const handleLoginSubmit = async (e) => {
    e.preventDefault();
    const signInUrl = `${process.env.NEXT_PUBLIC_API_SERVICE_BASE_URL}/api/v1/User/Login`;
    const res = await signIn('credentials', {
        username: loginInput.username,
        password: loginInput.password,
        signInUrl,
        redirect: false,
    });
    console.log('登录结果:', res);
    if (res.error) {
        alert(`登录失败：${res.error}`);
    }
}

5. 补充Session Provider到_app.js #

你的_app.js未添加Next-Auth的Session Provider，会导致会话无法在页面间共享，虽不是401直接原因，但后续会出现权限验证问题。

修复：

import { SessionProvider } from "next-auth/react";

export default function MyApp({ Component, pageProps: { session, ...pageProps } }) {
    if (Component.getLayout) {
        return (
            <SessionProvider session={session}>
                <LayoutProvider>{Component.getLayout(<Component {...pageProps} />)}</LayoutProvider>
            </SessionProvider>
        );
    } else {
        return (
            <SessionProvider session={session}>
                <LayoutProvider>
                    <Layout>
                        <Component {...pageProps} />
                    </Layout>
                </LayoutProvider>
            </SessionProvider>
        );
   }
}

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