NextAuth.js：如何在signIn()中同时禁用重定向并使用callbackUrl

核心问题分析 #

你遇到的两个问题根源分别是：

1. 当设置redirect: false时，callbackUrl不会自动触发跳转，需要手动处理路由
2. 第二个代码中在then回调里调用useRouter()违反了React Hooks的调用规则（Hooks必须在组件顶层同步调用）

修正后的实现方案 #

首先在组件顶层声明路由实例（必须遵守Hooks规则），然后在登录成功时利用signIn返回的响应对象进行跳转：

import { useRouter } from 'next/router';
import { signIn } from 'next-auth/react';
import { useState } from 'react';
import z from 'zod';

// 假设你的表单Schema
const formSchema = z.object({
  username: z.string(),
  password: z.string()
});

export default function LoginPage() {
  const router = useRouter(); // 必须在组件顶层调用
  const [isLoading, setIsLoading] = useState(false);
  const [showAlert, setShowAlert] = useState(false);

  function onSubmit(values: z.infer<typeof formSchema>) {
    setIsLoading(true);

    signIn("credentials", {
      redirect: false,
      callbackUrl: "/dashboard", // 传递目标跳转路径
      username: values.username,
      password: values.password,
    }).then((response) => {
      if (response?.error) {
        // 登录失败，触发提示
        setShowAlert(true);
        setTimeout(() => {
          setShowAlert(false);
        }, 5000);
      } else if (response?.ok) {
        // 登录成功，跳转到callbackUrl（响应中的url字段会自动包含传入的callbackUrl）
        router.push(response.url || "/dashboard");
      }
    }).catch((error) => {
      console.error("登录过程中出现意外错误:", error);
    }).finally(() => {
      setIsLoading(false);
    });
  }

  // 渲染表单和提示组件...
}

关键细节说明 #

• Hooks调用规则：useRouter()必须在组件顶层同步执行，不能放在异步回调、条件判断等非顶层位置，否则会触发React Hooks报错。
• redirect: false的响应结构：当禁用自动重定向后，signIn会返回一个包含以下字段的对象：
  • ok: 布尔值，标识登录是否成功
  • error: 登录失败时的错误信息
  • url: 原本要跳转的callbackUrl路径（如果登录成功）
• 灵活使用callbackUrl：你也可以从路由参数中获取callbackUrl（比如用户从某个受保护页面跳转过来的场景），替换硬编码的路径：

  const callbackUrl = router.query.callbackUrl as string || "/dashboard";
  

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