Additional parameters to login/signup flow

[humont]

Question 💬

When Signing up a user, it would be great to be able to add extra parameters to the post request made the the [...nextauth] api endpoint.

How to reproduce ☕️

For example, if i'm using the email provider, and i provide a form like the one below:

 <form method='post' action='/api/auth/signin/email' >
          <input name='csrfToken' type='hidden' defaultValue={csrfToken} />
          <label>
            Email address
            <input type='email' id='email' name='email' />
          </label>
          <label>
            userName
            <input type='text' id='userName' name='userName' />
          </label>
          <label>
            some other field
            <input type='text' id='otherField' name='otherField' />
          </label>
          <button type='submit'>Sign Up</button>
        </form>

then it would be useful to be able to extract those extra fields on the signin callback. For example:

...
callbacks: {
    async signIn({ user, account, profile, email, credentials }) {
      const {email, userName, otherField} = credentials

      // do stuff with those credentials

      return true
    },
}
...

This would avoid having to split an onboarding flow into multiple steps as is currently the case:

1. signin/up
2. verify email
3. on verified, finish onboarding user.

but instead would condense it into:

1. onboard & signin/up
2. verify email

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

[humont]

This question has had a few up-votes but no responses, but if anyone is interested, here's how i'm routing around the problem:

// Wrap the NextAuth function in a NextApiHandler

export default async function auth(req: NextApiRequest, res: NextApiResponse) {
  // Make sure the req.url is a signin url, so that this only runs on what NextAuth perceives to be a signIn attempt.
  // Make sure the req.headers.referer is my custom signUp page
  const isSignUp  =
    req.headers.referer?.includes('/auth/signup') &&
    req.url === '/api/auth/signin/email'
     ? true : false

  if (isSignUp) {
    // handle sign up flow
    return res.status(200).json({message: 'signup successful' )}
  }

  return await NextAuth(req, res, {
     ...
  });
}

This means i can add as many parameters to the req.body object from my form page (which in this instance, lives at /auth/signup), and because i return early (before the NextAuth api is invoked) i avoid all the unnecessary calls from NextAuth on sign up.

This isn't ideal (it means i have to create my own pages, instead of leveraging the really handy NextAuth ones), but it works for my purposes - which include signing up different types of users, each with different form requirements.

[Billyzou0741326]

This works well for the email signup flow, but unfortunately for the oauth flow, user email is only known after the user completes the signup flow. It is also not possible (though I may be wrong) to associate custom data to the oauth flow.

[goforbg]

@Billyzou0741326 is there any workaround for this?