NextJS13中Next-auth Credentials Provider无法保存用户名至会话问题

你的代码核心问题是JWT和Session回调没有处理用户名（username）的持久化，导致登录后会话中没有携带username字段，主组件自然无法获取。

具体问题点 #

1. jwt回调仅将role存入token，遗漏了username
2. session回调仅给会话用户添加role，没有同步username

修复步骤 #

修改callbacks中的jwt和session函数，补充username的处理逻辑：

import type { NextAuthOptions } from 'next-auth'
import CredentialsProvider from 'next-auth/providers/credentials'

export const options: NextAuthOptions = {
  providers: [
    CredentialsProvider({
      name: "Credentials",
      credentials: {
        username: {
          label: "Meno:",
          type: "text",
          placeholder: "TB0XX"
        },
        password: {
          label: "Heslo:",
          type: "password",
          placeholder: "Heslo"
        }
      },
                     
      async authorize(credentials) {
        if (!credentials) {
          throw new Error('Credentials are required');
        }
  
        console.log(credentials);
  
        const res = await fetch("http://127.0.0.1:5000/login", {
          method: 'POST',
          body: JSON.stringify(credentials),
          headers: { "Content-Type": "application/json" }
        })
  
        const user = await res.json()
        console.log(user);
        console.log(credentials.username)
        // If no error and we have user data, return it
        if (res.ok && user) {
          return { id: user.id, username: credentials.username, role: user.role }
        }
  
        // Return null if user data could not be retrieved
        return null
      }
    })
  ],
  callbacks: {
    async jwt({ token, user }) {
      // 登录时将user的id、username、role存入token
      if (user) {
        token.id = user.id
        token.username = user.username
        token.role = user.role
      }
      return token
    },
    async session({ session, token }) {
      // 将token中的数据同步到会话用户对象
      if (session?.user) {
        session.user.id = token.id as string
        session.user.username = token.username as string
        session.user.role = token.role as string
      }
      return session
    },
  }
}

验证方法 #

在主组件中使用useSession钩子获取会话，打印session.user即可看到包含username：

import { useSession } from "next-auth/react"

export default function Home() {
  const { data: session } = useSession()
  
  if (session) {
    console.log("当前用户：", session.user)
    // 这里可以直接使用session.user.username
  }

  return (
    <div>
      {session ? (
        <p>欢迎，{session.user.username}！</p>
      ) : (
        <p>请登录</p>
      )}
    </div>
  )
}

额外检查点 #

• 确保后端/login接口返回的user对象包含id和role字段
• 检查浏览器控制台的user和token日志，确认登录时数据正常传递

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