如何仅在NextAuth的signIn()时执行重定向？

问题背景 #

希望仅在调用signIn()时执行重定向，已尝试三种方法但均不符合需求：

• 在[...nextauth].tsx中使用redirect回调：登录和登出时均触发重定向，不符合需求。
  代码示例：

  callbacks: {
      async redirect({ url, baseUrl }) {
        return "/account/loadingregister";
      },
    },
  

• 在组件内联设置重定向：仅对signOut回调生效，signIn传入的callbackUrl未生效。
  代码示例：

  <button onClick={() => signIn({ callbackUrl: "http://localhost:3000/abc" })}>
       Sign In
  </button>
  
  <button onClick={() => signOut({ callbackUrl: "http://localhost:3000/foo" })}>
       Sign Out
  </button>
  

• 同时使用上述两种方式：[...nextauth].tsx中的配置优先级更高，内联设置被忽略。

解决方案 #

方法1：在redirect回调中区分登录/登出场景（NextAuth v4+） #

通过redirect回调的request参数判断当前请求是否来自登录操作，仅在登录时执行重定向逻辑：

import type { NextAuthOptions } from "next-auth";
import NextAuth from "next-auth";

export const authOptions: NextAuthOptions = {
  // 配置你的认证提供商等信息
  providers: [],
  callbacks: {
    async redirect({ url, baseUrl, request }) {
      // 判断是否为登录请求：signIn发起的请求会包含signin路径或action参数
      const isSignInRequest = request.url.includes("/api/auth/signin") || 
                              (request.method === "POST" && request.body?.includes("action=signin"));
      
      if (isSignInRequest) {
        // 优先使用signIn时传入的callbackUrl，无则使用默认重定向地址
        const callbackUrl = new URL(request.url).searchParams.get("callbackUrl") || "/account/loadingregister";
        // 确保重定向地址为同域合法地址
        return callbackUrl.startsWith(baseUrl) ? callbackUrl : `${baseUrl}${callbackUrl}`;
      }
      
      // 非登录场景（如登出），返回默认地址
      return url.startsWith(baseUrl) ? url : baseUrl;
    },
  },
};

export default NextAuth(authOptions);

方法2：结合signIn的callbackUrl做条件判断 #

如果不需要严格区分请求来源，可直接检查是否存在callbackUrl，仅当该参数存在时（即signIn时传入）执行重定向：

callbacks: {
  async redirect({ url, baseUrl, request }) {
    const callbackUrl = new URL(request.url).searchParams.get("callbackUrl");
    if (callbackUrl) {
      // 验证并返回传入的callbackUrl
      return callbackUrl.startsWith(baseUrl) ? callbackUrl : `${baseUrl}${callbackUrl}`;
    }
    // 其他场景返回默认地址
    return url.startsWith(baseUrl) ? url : baseUrl;
  },
},

之后在组件中调用signIn时传入目标地址即可：

<button onClick={() => signIn({ callbackUrl: "/account/loadingregister" })}>
  登录
</button>

以上两种方式都能实现仅在调用signIn()时触发指定重定向，登出时保持默认行为或自定义其他逻辑。

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