在NextAuth中通过signIn传自定义值并在IdentityServer4 Provider中使用

1. 客户端传递自定义登录策略参数 #

在客户端组件的signIn调用中，通过第三个参数传入自定义的login_resolution_policy值：

// 客户端组件示例
<button onClick={() => signIn('identity-server4', undefined, { login_resolution_policy: 'email' })}>
  使用邮箱登录
</button>
<button onClick={() => signIn('identity-server4', undefined, { login_resolution_policy: 'username' })}>
  使用用户名登录
</button>

2. 在NextAuth配置中动态获取参数并修改Provider #

在options.ts里，将IdentityServer4 Provider的authorization配置改为函数形式，从上下文参数中提取客户端传入的策略值，动态拼接授权URL参数：

// options.ts
import NextAuth from "next-auth";
import IdentityServer4Provider from "next-auth/providers/identity-server4";

export const authOptions = {
  providers: [
    IdentityServer4Provider({
      clientId: process.env.IDENTITY_SERVER_CLIENT_ID!,
      clientSecret: process.env.IDENTITY_SERVER_CLIENT_SECRET!,
      issuer: process.env.IDENTITY_SERVER_ISSUER!,
      authorization: async ({ params }) => {
        // 获取客户端传入的策略，默认设为用户名登录
        const loginPolicy = params?.login_resolution_policy || "username";
        return {
          url: `${process.env.IDENTITY_SERVER_ISSUER}/connect/authorize`,
          params: {
            scope: "openid profile email",
            login_resolution_policy: loginPolicy, // 动态注入策略参数
          },
        };
      },
    }),
  ],
  // 可选：若需将策略信息存入session/jwt，可添加以下回调
  callbacks: {
    async jwt({ token, account }) {
      if (account?.params?.login_resolution_policy) {
        token.loginPolicy = account.params.login_resolution_policy;
      }
      return token;
    },
    async session({ session, token }) {
      session.loginPolicy = token.loginPolicy;
      return session;
    },
  },
};

export default NextAuth(authOptions);

3. 验证参数传递 #

启动项目后点击登录链接，查看IdentityServer4收到的授权请求，确认login_resolution_policy参数已正确携带。也可在NextAuth的authorization函数中添加日志打印，验证参数是否被正确获取。

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