Next.js中如何在next-auth社交登录中传递额外参数？

前端调用signIn时传递参数 #

别把自定义参数放到OAuth提供商的配置里，直接通过signIn的state字段传递（这是NextAuth推荐的安全方式）：

// 按钮点击事件中的调用
signIn("facebook", {
  state: JSON.stringify({ userType: "customer" })
});

后端在[...nextAuth].js中处理参数 #

1. 在authorize回调中解析参数并附加到用户对象
   从请求的query.state里拿到传递的参数，解析后加到返回的用户信息中，后续回调就能获取到：

import NextAuth from "next-auth";
import FacebookProvider from "next-auth/providers/facebook";

export default NextAuth({
  providers: [
    FacebookProvider({
      clientId: process.env.FACEBOOK_CLIENT_ID,
      clientSecret: process.env.FACEBOOK_CLIENT_SECRET,
      // 这里不需要设置authorization.params.userType，那是传给Facebook的参数，和NextAuth回调无关
    })
  ],
  callbacks: {
    async authorize(credentials, req) {
      // 解析state中的自定义参数
      const state = JSON.parse(req.query.state || "{}");
      const userType = state.userType;

      // 执行Facebook用户信息获取逻辑（示例）
      const res = await fetch(`https://graph.facebook.com/me?access_token=${credentials.accessToken}&fields=id,name,email`);
      const profile = await res.json();

      // 把自定义参数附加到用户对象，供后续回调使用
      return { ...profile, userType };
    },
    async jwt({ token, user }) {
      // 首次登录时，user对象包含我们附加的userType
      if (user) {
        token.userType = user.userType;
      }
      return token;
    },
    async session({ session, token }) {
      // 如果需要在前端session中获取userType，同步到session对象
      session.user.userType = token.userType;
      return session;
    }
  }
});

2. 验证参数是否生效
   现在在jwt回调中打印token，就能看到userType字段；如果要在前端通过useSession钩子获取，记得在session回调里把token的userType同步到session对象。

备选方案（URL查询参数方式） #

如果不介意参数暴露在URL中，也可以通过callbackUrl传递：

signIn("facebook", {
  callbackUrl: `${window.location.origin}/your-callback-path?userType=customer`
});

然后在authorize回调中通过req.query.userType直接获取，后续处理步骤和上面一致。

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