Control order of fields through SignupForm/ additionalFields before email and password
Need to ask for firstName and lastName during the sign up. To make it pretty I want it to be
FirstName LastName
Username
Password
Byt additionalFields
<SignupForm
additionalFields={[
{
name: 'firstName',
label: 'First Name',
type: 'input',
validations: {
required: 'First name is required',
},
},
{
name: 'lastName',
label: 'Last Name',
type: 'input',
validations: {
required: 'Last name is required',
},
},
]}
/>
I see that in Signup.tsx & { additionalFields?: AdditionalSignupFields; }) will always come last. If I modify Signup.tsx it will be overrwritten when I do wasp clean or?
4 Replies
Hi @Adam. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Currently, the
additionalFields prop in the SignupForm component of Wasp adds the fields after the default fields (like email and password). Therefore, using additionalFields to add 'firstName' and 'lastName' will place these fields after the default fields, not before them as you desire.
If you need more control over the order of the fields, you might have to create a custom signup form. You can use the signup function provided by Wasp to handle the signup process in your custom form. Here is an example of how you can import it:
Remember to also define a userSignupFields function as described in the Wasp documentation (https://wasp-lang.dev/docs/auth/overview#customizing-the-signup-process).
As for modifying Signup.tsx, you're correct that changes to this file would be overwritten when you run wasp clean. This command cleans the .wasp/out directory, which is where Wasp keeps the generated code, including Signup.tsx.
For more details, you can refer to these discussions:
- Wasp documentation on customizing the signup process (https://wasp-lang.dev/docs/auth/overview#2-customizing-the-signup-component)
- Discord support thread on reordering predefined fields in auth forms (https://discord.com/channels/686873244791210014/1220299304087060510)
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Adam, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?That's not possible right now, sorry 🙂 You'll need to create 100% custom UI to do that and use Wasp's backend actions. Tracking that here: https://github.com/wasp-lang/wasp/issues/2174
GitHub
Make Auth UI Signup / Login forms more customizable · Issue #2174 ·...
allow changing the order of the default fields allow customizing text allow adding additional text
Awesome, thanks no worries, one could theoretically just force a get details after sign up so that is easy as well. 🙂
That's a good workaround, yes! Two step sign up 🙂