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

Viewed 36

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

They show two examples:

signIn("identity-server4", null, { prompt: "login" }) // always ask the user to re-authenticate
signIn("auth0", null, { login_hint: "info@example.com" }) // 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: '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

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?

1 Answers

I'm pretty sure the addedParam must go in the same object as email and callbackUrl:

const submitUser = async (e) => {
  e.preventDefault()
  signIn('email', { 
    email, 
    callbackUrl: '/dashboard', 
    redirect: false, 
    addedParam: "My added parameter" 
  })
}

Related