how to read additional parameters in [...nextauth] signIn() callback?

[benwhut]

According to Next Auth docs, I can pass additional parameters to the /authorize endpoint through the third argument of signIn().

There are two examples:

signIn("identity-server4", null, { prompt: "login" }) // always ask the user to re-authenticate
signIn("auth0", null, { login_hint: "[email protected]" }) // hints the e-mail address to the provider

However, there is no full working example and I'm unable to read any additional parameters that I've added in /api/auth/[...nextauth].js. Can anyone show me how to read these additional parameters in, for example, the signIn() callback?

Here's a simple example to illustrate what I mean:

/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"}) // <- MY ADDITIONAL 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
      }
    },
})

Output results from signIn() callback:

User: {
  user: { email: '[email protected]', id: '[email protected]' },
  account: {
    providerAccountId: '[email protected]',
    userId: '[email protected]',
    type: 'email',
    provider: 'email'
  },
  email: { verificationRequest: true }
}
Account undefined
Profile undefined
Email undefined
Credentials undefined

As you can see, my additional parameter {addedParam: "My added parameter"} doesn't show up in any of the objects. How do I read this added parameter in /api/auth/[...nextauth].js?

[benwhut]

Here's some sample code in case anyone wants to help me with this issue:
https://github.com/benwhut/nextauth-additionalparams

[grantspilsbury]

Did you ever get this working?

[dragonlipz]

I'm also experiencing this on the current versions. And as per the documentation here, it should work. I'm also not seeing this referenced in the v5 documentation at all.

    "next": "14.2.3",
    "next-auth": "^4.24.7",

I'm dynamically loading the providers as they are not shared between tenants.

And then for convenience I want to pass the "login_hint" so the user can easily go right in if authorized with multiple accounts currently.

But this never modifies the provider details as seen from [next-auth][debug][GET_AUTHORIZATION_URL] logging output.
It should add an appropriate extraQueryParams segment and then the login_hint value. Also I am doing this currently with a different auth library so I know how to plug in the extra values.

The below two ways of calling signIn have no difference for server side logging of the provider being called.
I've also tested client and server side, with the same results.

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

<button onClick={() => signIn(provider.id)}>Login</button>
<button onClick={() => signIn(provider.id, { login_hint: "[email protected]" })}>Login w/hint</button>

[dragonlipz]

After digging more I figured out what I was doing incorrectly. Which was a dumb mistake.

Any provider "extra" prams are the 3rd parameter not the 2nd. And valid parameters can be found in the openid-client package.
.\openid-client\types\index.d.ts

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

// minimum
<button onClick={() => signIn(provider.id)}>Login</button>

// incorrect
// <button onClick={() => signIn(provider.id, { login_hint: "some@email.com" })}>Login w/hint</button>
// correct with extras
<button onClick={() => signIn(provider.id, null, { login_hint: "[email protected]" })}>Login</button>

And in my case, I do also need the second param for passing the callbackUrl.

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

<button onClick={() => signIn(
    provider.id, 
    { callbackUrl: `${window.location.origin}/welcome` }, 
    { login_hint: "[email protected]" )}
>Login</button>