Next14中Auth.js登出失效、登录成功后卡顿问题求助

一、登出功能失效问题 #

排查与解决步骤 #

1. 修正服务器端Action写法
   当前Navbar内联的signOut逻辑可能存在上下文丢失问题，建议抽离为独立的服务器端Action：

• 创建src/actions/logout.ts：

"use server";
import { signOut } from "@/auth";

export async function logout() {
  await signOut({ redirectTo: "/" });
}

• 修改Navbar中的表单：

import { logout } from "@/actions/logout";
// ...
<form action={logout}>
  <button type="submit">Logout</button>
</form>

2. 校验Session策略与适配器兼容性
   你同时使用了jwt Session策略和Prisma Adapter，需确保登出时JWT Cookie被正确清除：

• 在auth.ts中显式指定登出跳转地址，确保Cookie随跳转同步清除：

export const { handlers, auth, signIn, signOut } = NextAuth({
  debug: true,
  adapter: PrismaAdapter(db),
  session: { strategy: "jwt" },
  callbacks: {
    async signOut() {
      return { redirectTo: "/" };
    }
  },
  ...authConfig,
});

3. 检查中间件路由拦截规则
   确认登出后的跳转路径（如/）属于公共路由，避免被middleware重定向回登录页：

• 核对publicRoutes数组，确保包含登出跳转目标路径。

二、登录后卡顿（需刷新才显示登录状态）问题 #

排查与解决步骤 #

1. 添加登录成功后的自动跳转
   当前login.ts中调用signIn未指定跳转，导致客户端Session状态未更新：

• 修改src/actions/login.ts，让signIn自动跳转：

try {
  await signIn("credentials", {
    email,
    password,
    redirectTo: DEFAULT_LOGIN_REDIRECT,
  });
  // 若使用redirectTo，下方返回语句不会执行，可移除
  // return { error: false, msg: "Logged in successfully!" }
} catch (error) {
  // ...错误处理逻辑
}

或手动控制跳转（需禁用自动跳转）：

import { redirect } from "next/navigation";

try {
  await signIn("credentials", {
    email,
    password,
    redirect: false, // 禁用自动跳转
  });
  redirect(DEFAULT_LOGIN_REDIRECT);
} catch (error) {
  // ...错误处理逻辑
}

2. 移除不必要的useTransition包裹
   useTransition主要用于客户端状态更新过渡，对服务器端Action跳转无帮助，反而可能阻塞UI更新：

• 修改LoginForm.tsx的onSubmit逻辑，直接调用login：

const onSubmit = async (data: z.infer<typeof LoginSchema>) => {
  setFeedback({ error: undefined, msg: undefined });
  const result = await login(data);
  if (result) setFeedback(result);
};

3. 客户端监听Session状态变化
   在客户端组件中使用useSession钩子，自动感知登录状态变化并更新UI：

"use client";
import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation";

export default function LoginForm({ isPending }) {
  const { data: session } = useSession();
  const router = useRouter();

  // 登录成功后自动跳转
  useEffect(() => {
    if (session) router.push(DEFAULT_LOGIN_REDIRECT);
  }, [session, router]);

  // ...其余代码
}

注意：需在根layout或app组件中配置SessionProvider

4. 校验中间件重定向逻辑
   确保DEFAULT_LOGIN_REDIRECT路径不属于authRoutes，避免已登录用户被重定向回登录页。

通用排查手段 #

• 打开浏览器开发者工具，查看Network标签：检查登录/登出请求的响应状态、Set-Cookie头是否正常。
• 查看终端中的Auth.js debug日志（已开启debug: true），定位登录/登出过程中的异常信息。
• 验证Prisma数据：确认用户密码哈希正确、用户数据正常存储在MongoDB中。

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