Next.js中NextAuth signIn()时access_denied错误的自定义页面配置

1. 修正redirect回调逻辑 #

你的redirect回调当前错误拦截了正常的登录/登出路径，导致逻辑混乱。需要移除对/api/auth/signin和/api/auth/signout的强制重定向，改为仅在错误场景下处理：

// pages/api/auth/[...nextauth].ts
callbacks: {
  async redirect({ url, baseUrl }) {
    // 仅当url包含错误参数时，重定向到自定义错误页
    if (url.includes('error=')) {
      return `${baseUrl}/auth/error`;
    }
    // 其他情况保持默认逻辑
    return url.startsWith(baseUrl) ? url : baseUrl;
  },
  // ...其他回调
}

2. 在signIn调用中添加错误处理 #

在_app.tsx的onUnauthenticated里，调用signIn时传入回调函数，捕获登录错误并手动跳转：

// _app.tsx
function Auth({ children } : any) {
  const { status } = useSession({ 
    required: true,
    onUnauthenticated() {
      signIn('okta', undefined, { callbackUrl: '/' })
        .then((result) => {
          // 捕获登录错误
          if (!result?.ok) {
            window.location.href = '/auth/error';
          }
        });
    }, 
  })

  if (status === "loading") {
    return <div>Loading...</div>
  }
  return children
}

3. 确保pages.error配置生效 #

你的pages.error配置已经正确，但可以添加events回调主动处理错误场景，辅助排查和触发重定向：

// pages/api/auth/[...nextauth].ts
export default NextAuth({
  // ...其他配置
  events: {
    async signIn(message) {
      // 捕获登录错误日志
      if (message.error) {
        console.error('登录错误详情:', message.error);
      }
    },
    async error(message) {
      // 捕获全局OAuth回调错误
      if (message.error === 'OAuthCallbackError') {
        console.error('OAuth回调错误:', message.error);
      }
    }
  },
  // ...其他配置
})

4. 优化自定义错误页（可选） #

通过useRouter获取错误参数，显示更具体的错误信息：

// pages/auth/error.tsx
export default function ErrorPage() {
  const router = useRouter();
  const error = router.query.error || '未知错误';

  useEffect(() => {
    setTimeout(() => {
      router.push("/");
    }, 5000);
  }, []);

  return (
    <div>
      <h1>403 - 访问被拒绝</h1>
      <p>登录失败：{error}</p>
      <p>5秒后将自动跳转到首页...</p>
      <Link href="/">返回首页</Link>
    </div>
  );
}

关键说明 #

• 移除redirect回调中对正常登录路径的强制重定向，避免干扰NextAuth的默认流程。
• 通过signIn的返回值捕获错误，手动跳转到自定义错误页，确保所有登录错误场景被覆盖。
• pages.error是NextAuth的默认错误页入口，配合错误参数的判断逻辑即可生效。

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