How can I pass additional parameters to signIn() function?

[leodrez]

Your question
How can I pass additional parameters to signIn with email function to use on callback?
Cant find passed values on the sign in callback

What are you trying to do
Im trying to add an additional "name" parameter to the signIn() function, along with the email and callback url.
Currently Im using the prisma adapter and would like to add a value to the native "name" property that the schema requires you to have.

Feedback
https://next-auth.js.org/schemas/adapters
https://next-auth.js.org/getting-started/client#signin

signIn("email", { email: email, callbackUrl: userCallbackUrl, name: 'Test Name', })

• Could not find relevant documentation

[balazsorban44]

Hi, would #823 solve this issue?

[ahallora]

Thank you, @martinatwainobicom for your input. 🙌 😄
I came to a very similar solution described here: #2143 🙈

[iandjx]

The solution doesnt seem to work with facebook login. the extra params i included are not inside req.query

signIn(
                  'facebook',
                  {
                    callbackUrl: `${courseURL}/?login=true`,
                    hello: 'asdas',
                  },
                  {
                    hello: '123',
                    // allowSignup,
                  }
                )```

[daniellin215]

@ahallora how were you able to get the locale into req.query? As far as I know, using EmailProvider I could specify /api/auth/email?locale=abc but this doesn't work for me, it does not trigger the default email provider next auth route handler or the callback logic

[ahallora]

I simply call the endpoint /api/auth/signin/email?locale=da&callbackUrl=https://...

Everything else is described in this thread: #2143 (comment)

Note that things might be a bit different from v3 and up: #2143 (comment)

[gorkemsevim]

For facebook,

i created a new variable as a global for test,
and inside FacebookProvider obj , add profile method based on https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/facebook.ts, and add my own props here like city, name whatever you want. you can get these new updated values in signIn method.

---GLOBAL OBJ------
const userAdditionInfo: {
phoneNumber: string | null;
city: string | null;
name: string | null;
surname: string | null;
} = {
phoneNumber: null,
city: null,
name: null,
surname: null,
};

----before NextAuth func----
export default async function auth(req: NextApiRequest, res: NextApiResponse) {
// update an object with req query params
if (
req.query.phoneNumber &&
req.query.city &&
req.query.name &&
req.query.surname
) {
userAdditionInfo.phoneNumber = req.query.phoneNumber as string;
userAdditionInfo.city = req.query.city as string;
userAdditionInfo.name = req.query.name as string;
userAdditionInfo.surname = req.query.surname as string;
}

return await NextAuth(req, res, {
...
FacebookProviders({
....,
profile(profile) {
return {
id: profile.id,
email: profile.email,
image: profile.picture.data.url,
phoneNumber: userAdditionInfo.phoneNumber,
name: userAdditionInfo.name ?? profile.name,
surname: userAdditionInfo.surname,
city: userAdditionInfo.city,
};
},
})
}
}

[krishna-sharma-dev]

There is a temporary workaround that can be used to achieve this!

Before this handler in your file:
signIn(provider.id, { callbackUrl: redirectUrl });

Add a method that sets a cookie:
setCookie( 'additionalAuthParams', JSON.stringify({ appPublicKey: appPublicKey, }) );
like this:

<Button  onClick={() => {
                    setCookie(
                      'additionalAuthParams',
                      JSON.stringify({
                        appPublicKey: appPublicKey,
                      })
                    );
                  signIn(provider.id, { callbackUrl: redirectUrl });
                }}
              >
                Sign in with {provider.name}
 </Button>

Now in [...nextauth].ts, we need to make change such that authOptions is just a function that returns next-auth callbacks and config like:

export default async function auth(req: NextApiRequest, res: NextApiResponse) {
    return await NextAuth(req, res, {
  providers: [
   ...
  ],
  callbacks: {
    ...
    async signIn({ user, account, profile, email, credentials }) {
      let additionalAuthParams = JSON.parse(req.cookies.additionalAuthParams)
          .appPublicKey,
    },
  },
});
}```

You should be able to read the cookie and get it working

[pbell23]

Any update on this ?
I also need to pass custom parameters to the signin/signup using the email provider.

Here is an example of use : Allow a new user to specify its username on signup. Currently, I believe I have to do this in a separate step.

EDIT:
I just noticed that we can retrieve the parameters passed as the 3rd argument of the signIn function inside the query object of the request.

So I can just do that :
await signIn( 'email', { email, redirect: false }, { username: 'example-username' } );

And inside the signIn callback :
async signIn({ user, account, profile, email, credentials }) { console.log(${req.query.username}) // example-username }

To access the request object, you need to use the nextAuth advanced initialization : https://next-auth.js.org/configuration/initialization

[bsplosion]

This is the answer to OP's question. Direct link to the documentation: https://next-auth.js.org/getting-started/client#additional-parameters

@leodrez want to mark this as the answer?

[trungtin]

This doesn't seem to work with Authjs (next-auth v5 beta).

[arxkdev]

This wont work with any old metadata, only works with things like the scope, prompt, state etc..
We need a way to safely access metadata sent from the signIn.

https://github.com/nextauthjs/next-auth/blob/3833baafdcabe0c439f020d96d79d3fe8dd1c98b/packages/core/src/lib/actions/signin/authorization-url.ts