如何用Next.js14与Auth.js v5实现登录页自动跳转至子服务商？

方法1：服务器组件自动触发登录流程 #

把自定义登录页做成服务器组件，直接在服务端执行signIn触发跳转，完全避开客户端操作限制：

import { signIn } from "auth";

export default async function LoginPage() {
  // 直接启动Duende Identity Server的登录流程，会自动重定向
  await signIn("duende-identity-server6");
  // 以下代码不会执行，因为signIn会触发重定向响应
  return <div>正在跳转至登录页面...</div>;
}

配合中间件配置，将未登录用户重定向到这个/login页面即可：

import { auth } from "auth";

export default auth((req) => {
  if (!req.auth && req.nextUrl.pathname !== "/login") {
    const redirectUrl = new URL("/login", req.nextUrl.origin);
    return Response.redirect(redirectUrl);
  }
});

export const config = {
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
};

方法2：客户端组件结合自动提交表单（需加载提示场景） #

如果需要在跳转前显示加载状态，用客户端组件通过自动提交隐藏表单的方式触发服务器动作：

"use client";

import { useEffect } from "react";
import { signIn } from "auth";

export default function AutoLoginPage() {
  useEffect(() => {
    // 页面加载完成后自动提交表单
    document.getElementById("auto-login-form").submit();
  }, []);

  return (
    <div>
      <form
        id="auto-login-form"
        action={async () => {
          "use server";
          await signIn("duende-identity-server6");
        }}
      />
      <p>正在跳转至Duende Identity Server登录页面...</p>
    </div>
  );
}

关键注意事项 #

• 必须通过服务器动作或服务器组件调用signIn，因为修改cookie的操作只能在服务端环境执行，客户端直接调用必然报错。
• 确认auth.config.js中duende-identity-server6的服务商配置正确，包括客户端ID、授权端点、回调地址等核心参数。

内容的提问来源于stack exchange，提问作者Dean O'Brien