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

[jacekkolasa]

why is this downvoted? It's the only working solution I found so far

[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

[bsplosion]

@trungtin I'm running AuthJS/NextAuth v5 right now and leveraging this exact functionality for several parameters required during a sign in process. The parameters do need to be encodable to the URL, but otherwise it works exactly as described.

@arxkdev this ticket is specifically covering access to params provided in the signIn function during a callback, which the solution above does just fine. If you need params from/to somewhere else you might want to create a new ticket.

[Amir-Kermanshahani]

I'm not able to pass any parameters using the above solutions. any workarounds as of today?

[Amir-Kermanshahani]

I couldn't find an applicable answer for my case, but I could figure out the puzzle pieces and now it works as expected:

My current stack is:

• "next": "14.2.3",
• "next-auth": "^4.24.7",
• "react": "^18",
• "@auth/prisma-adapter": "^2.2.0",
• "@prisma/client": "^5.14.0",

1. when calling the signIn function, the additional parameters should be sent as the third parameter, as in the Docs, @bsplosion thanks for mentioning that!
   await signIn( "email", { email: values.email, }, { name: "Test Name" } );

2. I'm using App router, so I implemented the Advanced initialization mentioned in the Docs, passing NextApiRequest, NextApiResponse to NextAuth options for further use and exported the main auth function as GET and POST.

3. I was able to get the parameters in the signIn callback function by parsing the req.url and using url.searchParams.get()

here is my complete code for api/auth/[...nextauth]/route.ts

const prisma = new PrismaClient()

async function auth(req: NextApiRequest, res: NextApiResponse) {
  return await NextAuth(req, res, {
    adapter: PrismaAdapter(prisma) as Adapter,
    providers: [...],
    pages: {
      signIn: "/signup",
    },
    callbacks: {
      async signIn({ user, account, profile, email, credentials }) {
        try {
          const url = new URL(req.url || "/signIn");
          const name= url.searchParams.get("name");
        } catch (error) {
          console.log(error);
        }
        return true;
      },
    },
  });
}

export { auth as GET, auth as POST };

Hope it helps, cheers!

[Waylon-Firework]

@Amir-Kermanshahani

I can't get req and res in the signIn callbacks. Is our version different?
This is the official example. https://github.com/nextauthjs/next-auth-example/blob/main/auth.ts

I don't know how to config the project. Do you mean we need to move the config from auth.ts file to route.ts ?

[Amir-Kermanshahani]

No need to move the config, you can keep it in a seperate auth.ts file, but NextAuth docs does it in the route.ts file.

After configuring your auth.ts file and exporting it as in the link you send, you need to import your handlers from auth.ts in the route.ts file, then export the GET and POST methods to be used as API handlers for NextAuth application.

Make sure you have initialized NextAuth in Advanced mode. (NextAuth docs)

[Mohamed-Abdulla]

@Amir-Kermanshahani

await signIn(
"google",
{
callbackUrl: /${redirect},
},
{
role: "nutritionist",
}
);

async function auth(req: NextApiRequest, res: NextApiResponse) {
return await NextAuth(req, res, {
session: {
strategy: "jwt",
},

pages: {
  signIn: "/",
},
providers: [
  GoogleProvider({
    clientId: getGoogleCredentials().clientId,
    clientSecret: getGoogleCredentials().clientSecret,
  }),
],
callbacks: {
  async signIn({ user }) {
    const url = new URL(req.url || "/signIn");
    const role = url.searchParams.get("role");

    console.log("role", role);
    if (user.email) {
      const existingUser = await getUserByEmail(user.email);

      if (!existingUser) {
        await createUser({
          email: user.email,
          name: user.name!,
          role: role as UserRole,
          profile_picture: user.image!,
        });

        return true;
      }
    }

    return true;
  },
  
  
  the role is null for me , I couldn't able to get it. im using app router with same version as u (next, next-auth) . any help?

[scsskid]

for strava provider with nextauth5 beta, I can pass parameters like this (they will be sent as get params in url to strava when initation oauth), maybe it works similar with other providers

providers: [
Strava({
	clientId: process.env.STRAVA_CLIENT_ID,
	clientSecret: process.env.STRAVA_CLIENT_SECRET,
	authorization: {
		params: { scope: 'read,activity:read' }
	}
})
],

[dinu7172]

can you eleborate this like how can I use this?

[Ricka7x]

is this fixed already in V5?

[dyingg]

It doesn't work as a URL parameter but you can leverage cookies and pass it as a cookie then access it from req.

Example:

document.cookie = `test=121313; domain=${
      window.location.hostname
    }; path=/; samesite=Lax`;

spent an awful lot of time trying to do this in a cleaner matter this use case should be better handled

[robertkibet]

For those usingauth0, this is how to send user to respective login or signup screens with next-auth

const isSignUp = true; // some state value to handle signup or login

// toggle nextauth
signIn(
  "auth0",
  { callbackUrl },
  { screen_hint: isSignUp ? "signup" : "login" }
)

signIn<RedirectableProviderType | undefined>(provider?: LiteralUnion<BuiltInProviderType> | undefined, options?: SignInOptions, authorizationParams?: SignInAuthorizationParams): Promise<SignInResponse | undefined>

[gideondakore]

Is it solved? And if yes, how do you do it?