I am customizing the SignUp form fields. How do I add a "Select" dropdown?

funk101

05/07/2022, 4:33 AM

I am customizing the SignUp form fields. How do I add a "Select" dropdown?

nkshah2

05/07/2022, 5:03 AM

Hi, What recipe are you using?

nkshah2

05/07/2022, 5:06 AM

You can refer to this to add custom ui elements to the form: https://supertokens.com/docs/emailpassword/advanced-customizations/react-component-override/usage

funk101

05/07/2022, 5:07 AM

Yes, seen that. But doesn't show any Select examples, or in docs

funk101

05/07/2022, 5:07 AM

using EmailPasswordAuth: NextJS

funk101

05/07/2022, 5:08 AM

I see how to add formFields, but all examples show just text input

rp_st

05/07/2022, 5:08 AM

@funk101 we don't allow you to add non text inputs at the moment to the sign up form, and you can't use the react override to insert a component in the middle of the form UI. What I suggest is that you keep the sign up form to just have email / password, and then post sign up, you can show a UI to the user to ask for more info.

rp_st

05/07/2022, 5:09 AM

However, if you really need to, you can always just use plain JS to insert an element in the sign up form.

funk101

05/07/2022, 5:09 AM

I see, thanks

rp_st

05/07/2022, 5:10 AM

An example of how you can use JS to select / manipulate DOM elements is here: https://github.com/supertokens/supertokens-auth-react/blob/master/test/helpers.js#L114

3 Views

Previous Next

SuperTokens.com

SuperTokens is an open source authentication solution offering features like: Different types of login: Email / password, Passwordless (OTP or Magic link based).