Next.js 14 App Router下Next-Auth用户会话更新失败求助

核心问题分析 #

• JWT回调的trigger === "jwt"仅在JWT自动刷新周期触发（默认30天），不会在用户访问特定页面时主动执行，无法满足按需更新会话的需求。
• 服务器端fetch使用相对路径"api/user"可能导致请求失败，Next.js服务器环境下需使用绝对路径。
• 客户端会话不会自动同步服务器端更新后的JWT数据，需主动触发刷新操作。

修复步骤 #

1. 调整JWT回调逻辑，支持主动触发更新 #

修改jwt回调，增加对trigger === "update"的处理，允许客户端主动调用更新接口：

session: {
  strategy: "jwt",
},
callbacks: {
  async jwt({ token, user, trigger, session }) {
    if (user) {
      // 初始登录时赋值用户数据
      token.email = user.email;
      token.telNo = user.telNo;
      token.remaining_messages = user.remaining_messages;
      token.isCancelled = user.isCancelled;
      token.customerId = user.customerId;
      token.currentPlan = user.currentPlan;
      token.planExpiryDate = user.planExpiryDate;
      token.loginToken = user.loginToken;
    } 
    // 处理主动触发的会话更新请求
    else if (trigger === "update" && session?.refresh) {
      try {
        // 使用环境变量配置的绝对路径，避免服务器端请求错误
        const res = await fetch(`${process.env.NEXTAUTH_URL}/api/user`, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ token: token.loginToken }),
        });

        if (!res.ok) {
          throw new Error(`Failed to fetch user data: ${res.statusText}`);
        }

        const data = await res.json();

        // 更新token中的用户数据
        token.email = data.email;
        token.telNo = data.telNo;
        token.remaining_messages = data.remaining_messages;
        token.isCancelled = data.isCancelled;
        token.customerId = data.customerId;
        token.currentPlan = data.currentPlan;
        token.planExpiryDate = data.planExpiryDate;
      } catch (error) {
        console.error("Error updating the JWT:", error);
      }
    }
    return token;
  },
  async session({ session, token }) {
    // 将token数据同步到session
    session.user = {
      email: token.email,
      name: token.loginToken,
      telNo: token.telNo,
      remaining_messages: token.remaining_messages,
      isCancelled: token.isCancelled,
      customerId: token.customerId,
      currentPlan: token.currentPlan,
      planExpiryDate: token.planExpiryDate,
      loginToken: token.loginToken,
    };
    return session;
  },
},

2. 在特定页面主动触发会话更新 #

在需要更新会话的页面中，使用客户端组件调用updateSession触发刷新，确保渲染前拿到最新数据：

"use client";

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

export default function TargetPage() {
  const { data: session, updateSession } = useSession();

  // 页面加载时触发会话更新
  useEffect(() => {
    const refreshSession = async () => {
      if (session?.user?.loginToken) {
        await updateSession({ refresh: true });
      }
    };
    refreshSession();
  }, [session, updateSession]);

  // 等待会话更新完成后渲染内容
  if (!session) {
    return <div>加载中...</div>;
  }

  return (
    <div>
      <h1>欢迎回来，{session.user.email}</h1>
      <p>剩余消息数：{session.user.remaining_messages}</p>
      <p>当前套餐：{session.user.currentPlan}</p>
    </div>
  );
}

3. 配置环境变量确保路径正确 #

在.env.local中添加NEXTAUTH_URL，保证服务器端fetch路径有效：

NEXTAUTH_URL=http://localhost:3000 # 生产环境替换为实际域名

额外注意事项 #

• 测试api/user接口是否能正确接收loginToken并返回最新用户数据，排查接口本身的响应问题。
• 若使用服务器组件，可直接在组件内调用API获取最新数据，再结合getServerSession同步会话状态，或通过客户端组件处理会话更新逻辑。

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