Next-Auth：如何将用户头像从Profile传递到Session中

要把头像、角色这类自定义字段传到Session里，你需要先修正代码中的语法错误，再通过配置JWT和Session回调来完成字段传递，具体步骤如下：

1. 修正Provider的Profile函数语法错误 #

你提供的FacebookProvider代码里，role: 'client'后面缺少逗号，导致thumbnail字段无法被正确解析返回。先补上逗号，同时建议统一字段命名（比如用image代替thumbnail，方便多Provider统一处理）：

FacebookProvider({
  profile(profile) {
    console.log('Profile Facebook: ', profile)

    return {
      ...profile,
      id: profile.id, // 确保返回用户唯一标识，部分Provider需手动指定
      role: 'client',
      image: profile?.picture?.url // 统一用image字段存储头像地址
    }
  },
  clientId: process.env.FACEBOOK_ID,
  clientSecret: process.env.FACEBOOK_SECRET
}),

对于其他Provider（Google、GitHub、Twitter），也要在各自的profile函数里统一返回自定义字段：

// Google示例
GoogleProvider({
  profile(profile) {
    return {
      ...profile,
      id: profile.sub,
      role: 'client',
      image: profile.picture
    }
  },
  clientId: process.env.GOOGLE_ID,
  clientSecret: process.env.GOOGLE_SECRET
}),

// GitHub示例
GitHubProvider({
  profile(profile) {
    return {
      ...profile,
      id: profile.id,
      role: 'client',
      image: profile.avatar_url
    }
  },
  clientId: process.env.GITHUB_ID,
  clientSecret: process.env.GITHUB_SECRET
})

2. 配置JWT和Session回调 #

Next Auth默认用JWT存储用户信息，Session是从JWT中读取的。需要通过callbacks配置，把自定义字段从User对象传到JWT，再从JWT传到Session：

export default NextAuth({
  providers: [
    // 你的所有Provider配置
    FacebookProvider(...),
    GoogleProvider(...),
    GitHubProvider(...),
    TwitterProvider(...)
  ],
  callbacks: {
    // 将自定义字段存入JWT Token
    async jwt({ token, user }) {
      // user仅在首次登录时存在，后续请求依赖token
      if (user) {
        token.id = user.id
        token.role = user.role
        token.image = user.image
      }
      return token
    },
    // 从JWT中提取字段，注入到Session对象
    async session({ session, token }) {
      if (session.user) {
        session.user.id = token.id
        session.user.role = token.role
        session.user.image = token.image // 头像字段传入Session
      }
      return session
    }
  },
  // 可选：明确Session策略为JWT（默认即为JWT，若使用数据库存储则需调整）
  session: {
    strategy: 'jwt'
  }
})

原理说明 #

• jwt回调：在用户首次登录时，把从Provider获取的自定义字段（头像、角色等）存入JWT；后续请求时，直接从JWT读取信息，无需重复调用Provider的API。
• session回调：将JWT中的自定义字段提取出来，添加到返回给前端的Session对象中，这样前端通过useSession()就能获取到头像、角色等信息。

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