如何在NextAuth的[...nextauth] signIn()回调中读取额外参数？

问题背景 #

根据NextAuth文档，signIn()的第三个参数可向/authorize端点传递额外参数，但缺少完整可运行示例，导致无法在/api/auth/[...nextauth].js的signIn回调中读取这些参数。

示例代码 #

/index.jsx

import { useState } from "react"
import { signIn } from "next-auth/react"

export default function EmailLink() {
    const [email, setEmail] = useState('')

    const submitUser = (e) => {
        e.preventDefault()
        signIn('email', 
            {email, callbackUrl: '/dashboard', redirect: false}, 
            {addedParam: "My added parameter"}) // 传递的额外参数
        }

    return (
        <form onSubmit={submitUser}>
            Email: <input type='email' placeholder="Enter email" value={email} onChange={(e) => setEmail(e.target.value)} />
            <button type="submit">Email Link</button>
        </form>
    )
}

/api/auth/[...nextauth].js（原代码）

import NextAuth from "next-auth"
import EmailProvider from "next-auth/providers/email"

export default NextAuth({
  providers: [
    EmailProvider({
      server: {
        host: process.env.EMAIL_SERVER_HOST,
        port: process.env.EMAIL_SERVER_PORT,
        auth: {
          user: process.env.EMAIL_SERVER_USER,
          pass: process.env.EMAIL_SERVER_PASSWORD,
        }
      },
      from: process.env.EMAIL_FROM,
    }),
  ],
  callbacks: {
    async signIn(user, account, profile, email, credentials) {
      const loginProvider = user.account.provider
      if (loginProvider === "email") { 
        console.log("User:", user)
        console.log("Account:", account)
        console.log("Profile:", profile)
        console.log("Email:", email)
        console.log("Credentials:", credentials)
        return user
      }
    },
})

原输出结果 #

User: {
  user: { email: 'user@domain.com', id: 'user@domain.com' },
  account: {
    providerAccountId: 'user@domain.com',
    userId: 'user@domain.com',
    type: 'email',
    provider: 'email'
  },
  email: { verificationRequest: true }
}
Account undefined
Profile undefined
Email undefined
Credentials undefined

可见额外参数addedParam未出现在任何输出对象中。

解决方案 #

1. 修正signIn回调的参数结构 #

NextAuth v4版本中，signIn回调接收单个对象参数，而非分散的参数列表。你需要解构该对象以获取req（请求对象），这是读取额外参数的关键。

2. 通过req.query获取额外参数 #

调用signIn()时传递的第三个参数会被转换为URL查询参数，附加到授权请求中。因此可以直接通过req.query读取这些参数。

修改后的完整代码 #

/api/auth/[...nextauth].js

import NextAuth from "next-auth"
import EmailProvider from "next-auth/providers/email"

export default NextAuth({
  providers: [
    EmailProvider({
      server: {
        host: process.env.EMAIL_SERVER_HOST,
        port: process.env.EMAIL_SERVER_PORT,
        auth: {
          user: process.env.EMAIL_SERVER_USER,
          pass: process.env.EMAIL_SERVER_PASSWORD,
        }
      },
      from: process.env.EMAIL_FROM,
      // 可选：也可在EmailProvider的authorize函数中获取参数
      async authorize(credentials, req) {
        console.log("authorize中的额外参数:", req.query.addedParam);
        return { email: credentials.email };
      }
    }),
  ],
  callbacks: {
    async signIn({ user, account, profile, email, credentials, req }) {
      const loginProvider = account.provider;
      if (loginProvider === "email") { 
        console.log("signIn回调中的额外参数:", req.query.addedParam); // 成功获取参数
        console.log("User:", user);
        return true;
      }
      return true;
    },
  }
})

关键说明 #

• 额外参数会以URL查询参数的形式发送（例如请求地址为/api/auth/signin/email?addedParam=My+added+parameter），因此req.query.addedParam可直接获取对应值。
• 确保使用NextAuth v4版本，v3版本的参数结构和获取方式存在差异。
• 若需传递敏感信息，不建议通过URL查询参数传递，可考虑将参数放入signIn()的第二个参数（credentials对象）中，并在后续处理中做好安全验证。

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