NextAuth登录失败后重复跳转403：需重定向至Google Auth页面

问题场景 #

• 通过NextAuth的sign-in callback实现登录失败时重定向至403页面，首次重定向功能正常
• 用户再次点击登录按钮时，会直接跳转至403页面，不再进入Google Auth验证流程
• 目前仅清除NextAuth Cookie可恢复正常验证流程
• 尝试过两种无效方案：
  • 在authOptions的pages字段指定signIn返回路径
  • 在sign-in callback中直接return "/403"

问题原因 #

NextAuth在登录失败后，会在会话中记录临时错误状态，后续登录请求会直接读取该状态跳转到错误页，跳过第三方验证步骤。

解决方案 #

方案1：在sign-in callback中主动清除错误会话 #

修改sign-in callback逻辑，当验证失败时，手动清除NextAuth的临时会话Cookie，然后重定向到对应provider的登录入口，强制触发验证流程。

import { cookies } from "next/headers";
import { NextAuthOptions } from "next-auth";
import GoogleProvider from "next-auth/providers/google";

export const authOptions: NextAuthOptions = {
  secret: process.env.NEXTAUTH_SECRET,
  providers: [
    GoogleProvider({
      profile(profile) {
        return {
          id: profile.sub,
          name: profile.name,
          firstname: profile.given_name,
          lastname: profile.family_name,
          email: profile.email,
          image: profile.picture,
        };
      },
      clientId: process.env.GOOGLE_CLIENT_ID as string,
      clientSecret: process.env.GOOGLE_SECRET as string,
    }),
  ],
  callbacks: {
    async signIn({ user, account, profile }) {
      const allowed = false; // 模拟验证失败场景
      if (allowed) {
        return true;
      }

      // 清除NextAuth临时会话相关Cookie
      const cookieStore = cookies();
      cookieStore.delete("next-auth.session-token");
      cookieStore.delete("next-auth.csrf-token");

      // 重定向至Google登录接口，强制触发验证流程
      return "/api/auth/signin/google";
    },
  },
  pages: { error: "/403" },
};

方案2：自定义登录页，跳过错误状态校验 #

使用自定义登录页，在登录按钮的点击事件中，直接跳转至对应provider的登录接口，避免使用NextAuth默认的signIn方法（该方法会读取会话中的错误状态）。

示例代码（自定义登录页）：

// 登录按钮点击事件
const handleGoogleLogin = () => {
  window.location.href = "/api/auth/signin/google";
};

效果说明 #

两种方案均可实现：用户在登录失败后，再次点击登录按钮时会重新进入Google Auth验证流程，而非直接跳转至403页面。

内容的提问来源于stack exchange，提问作者engineer-x