Next.js结合NextAuth配置JWT失败多类报错问题求助

报错修复方案 #

报错对应原因 #

• getCurves is not a function：NextAuth v3不兼容Node.js 18及以上版本，可选两种解决方案：降级Node.js到16.x版本，或升级NextAuth到v4版本
• Objects are not valid as a React child (found: [object Promise])：getToken是异步方法，未加await就直接使用返回的Promise对象作为DOM内容
• Cannot read properties of undefined (reading 'next-auth.session-token')：在客户端环境调用了仅支持服务端的getToken方法，或请求上下文未正确传入

代码修改 #

1. 升级NextAuth到v4后的[...nextauth].js修改

import NextAuth from "next-auth"
import TwitchProvider from "next-auth/providers/twitch"
import SpotifyProvider from "next-auth/providers/spotify"

export default NextAuth({
  providers: [
    TwitchProvider({
      clientId: process.env.TWITCH_CLIENT_ID,
      clientSecret: process.env.TWITCH_CLIENT_SECRET,
    }),
    SpotifyProvider({
      clientId: process.env.SPOTIFY_CLIENT_ID,
      clientSecret: process.env.SPOTIFY_CLIENT_SECRET
    }),
  ],
  secret: process.env.SECRET,
  callbacks: {
    async jwt(token, user, account, profile) { 
      if (account) {
        token.accessToken = account.access_token;
        token.twitchId = profile.id;
      }
      return token 
    },
    async session(session, token) { 
      session.accessToken = token.accessToken;
      session.twitchId = token.twitchId;
      session.user.sub = token.sub;
      return session 
    },
  },
  theme: 'light',
  debug: true,
})

2. test.js修改（两种可选写法）

服务端渲染写法

import { getToken } from 'next-auth/jwt'

export default function Test({ twitchUserId }) {
  return (
    <div>
      <span>{twitchUserId}</span>
    </div>
  )
}

export async function getServerSideProps(context) {
  const token = await getToken({ req: context.req, secret: process.env.SECRET })
  if (!token) {
    return {
      redirect: {
        destination: '/api/auth/signin',
        permanent: false,
      },
    }
  }
  return {
    props: {
      twitchUserId: token.sub
    },
  }
}

客户端组件写法

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

export default function Test() {
  const { data: session, status } = useSession()

  if (status === "loading") return <div>加载中</div>
  if (status === "unauthenticated") return <div>未登录</div>

  return (
    <div>
      <span>{session.user.sub}</span>
    </div>
  )
}

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