Collect user's name on sign up form using NextAuth.js Email Provider?

Hi all πŸ‘‹ How do I collect a user's name at the outset of a sign up flow when using the Email Provider?

E.g. from a typical sign up form like the attached?

As far as I can tell, this can't be accomplished by using the configuration options (https://next-auth.js.org/configuration/options), Email Provider options (https://next-auth.js.org/providers/email) or Callbacks (https://next-auth.js.org/configuration/callbacks) detailed in the documentation & requires a deeper level of customisation.

I appreciate the hurdle to overcome is that the User isn't created immediately but, instead, a Verification Token is generated and the User is only created when the user navigates to the verification URL included in the verification email.

It seems like there's a few options to overcoming this problem:

β€’ Store the name in the VerificationToken table.
β€’ Include the name parameters in the verification URL sent via email.
β€’ Store the name in a cookie.

The first seems like the most obvious/robust to me. I guess this would include:

β€’ Customising the endpoint that receives the form to include the name data in a call to generate the Verification Token.
β€’ Customising the Verification Token generation procedure to store the name data.
β€’ Customising the verification endpoint to retrieve the name data when creating the User.

Could someone point me in the direction of how one would go about achieving this? πŸ™

(Note: Copy of question posted to NextAuth.js GitHub discussions that received no reply - https://github.com/nextauthjs/next-auth/discussions/7159)
form.png
Callbacks are asynchronous functions you can use to control what happens when an action is performed.
GitHub
Hi all πŸ‘‹ How do I collect a user's name at the outset of a sign up flow when using the Email Provider? E.g. from a typical sign up form like the following...? As far as I can tell, this can'...
Was this page helpful?