如何修改next-auth回调 让useSession渲染Parse返回的全量用户数据

我在通过next-auth完成登录后，希望在客户端使用useSession渲染从Parse获取的如下用户数据：

{
  objectId: 'nttMcKIOQJ',
  username: 'fiik346',
  email: 'fiik346@gmail.com',
  createdAt: '2022-06-26T07:56:41.888Z',
  updatedAt: '2022-06-26T07:56:41.888Z',
  ACL: { '*': { read: true }, nttMcKIOQJ: { read: true, write: true } },
  sessionToken: 'r:2f2c569be3b5120f3893834c2ace7b67'
}

但当前客户端仅渲染出了邮箱字段，实际返回的session数据如下：

{"user": {"email":"fiik346@gmail.com"},"expires":"2022-07-26T09:01:41.163Z"}
"authenticated"

当前的callbacks配置代码（路径：/pages/api/auth/[...nextauth].js）：

// /pages/api/auth/[...nextauth].js
...

callbacks: {
    async session({ session, token, user }) {
      // Send properties to the client, like an access_token from a provider.
      return session
    },
    async jwt({ token, user, account, profile, isNewUser }) {
      return token
    }
},

...

当前的客户端实现代码：

import { useSession } from 'next-auth/react'
import { getToken } from 'next-auth/jwt'
export default function accountIndex() {
  const {data: session, status} = useSession()
  return (
    <div>
      <h1>Account is {status}</h1>
      <pre className="overflow-auto">
        {JSON.stringify(session)}
        <br/>
        {JSON.stringify(status)}
      </pre>
    </div>
  )
}

需要修改callbacks相关配置，让客户端正常展示从数据库获取的完整用户数据。

next-auth默认使用JWT会话模式时，只有登录成功首次触发jwt回调时，参数里的user才会携带认证阶段返回的完整用户数据，后续所有请求的jwt回调不会再返回user对象，所有持久化数据都存在token中；而session回调负责把数据返回给客户端，默认只会返回邮箱等基础字段，需要手动把需要的字段从token透传到session中。

修改步骤：

1. 先确认你在next-auth的authorize回调（对接Parse登录的逻辑部分）中，已经把从Parse拿到的完整用户对象return出去，这是后续所有回调能拿到用户数据的前提。
2. 修改jwt回调，首次登录时把完整用户数据挂载到token上做持久化。
3. 修改session回调，把token中存储的用户数据赋值给session对象，客户端就能通过useSession拿到完整字段。

修改后的callbacks配置代码如下：

// /pages/api/auth/[...nextauth].js
...
callbacks: {
  async jwt({ token, user }) {
    // 仅首次登录时user存在，将完整用户数据存入token
    if (user) {
      token.user = user
    }
    return token
  },
  async session({ session, token }) {
    // 将token中存储的用户数据透传给session，供客户端读取
    session.user = token.user
    return session
  }
},
...

注意事项 #

• 按需传递字段即可，不需要把整个用户对象都透传给客户端，比如只需要sessionToken的话，可以直接写session.sessionToken = token.user.sessionToken，减少冗余数据。
• 禁止在token、session中存储密码、密钥等敏感信息，JWT仅做Base64编码，客户端可直接解码查看内容。
• 修改配置后需要清除浏览器中next-auth相关的cookie缓存，重新登录生效，旧的session缓存不会自动同步新增字段。
• 现有客户端代码不需要修改，重新登录后useSession()返回的session.user中就会包含objectId、username、createdAt等所有Parse返回的用户字段。

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