Signup Customisation [RFC] (#1395)

Author: infomiho

waspc/ChangeLog.md

@@ -2,6 +2,72 @@
 
 ## 0.11.4
 
+### 🎉 [New Feature] Signup Fields Customization
+
+We added an API for extending the default signup form with custom fields. This allows you to add fields like `age`, `address`, etc. to your signup form.
+
+You first need to define the `auth.signup.additionalFields` property in your `.wasp` file:
+```wasp
+app crudTesting {
+  // ...
+  auth: {
+    userEntity: User,
+    methods: {
+      usernameAndPassword: {},
+    },
+    onAuthFailedRedirectTo: "/login",
+    signup: {
+      additionalFields: import { fields } from "@server/auth.js",
+    },
+  },
+}
+```
+
+Then, you need to define the `fields` object in your `auth.js` file:
+```js
+import { defineAdditionalSignupFields } from '@wasp/auth/index.js'
+
+export const fields = defineAdditionalSignupFields({
+  address: (data) => {
+    // Validate the address field
+    if (typeof data.address !== 'string') {
+      throw new Error('Address is required.')
+    }
+    if (data.address.length < 10) {
+      throw new Error('Address must be at least 10 characters long.')
+    }
+    // Return the address field
+    return data.address
+  },
+})
+```
+
+Finally, you can extend the `SignupForm` component on the client:
+```jsx
+import { SignupForm } from "@wasp/auth/forms/Signup";
+
+export const SignupPage = () => {
+  return (
+    <div className="container">
+      <main>
+        <h1>Signup</h1>
+        <SignupForm
+          additionalFields={[
+            {
+              name: "address",
+              label: "Address",
+              type: "input",
+              validations: {
+                required: "Address is required",
+              },
+            },
+          ]}
+        />
+      </main>
+    </div>
+  );
+};
+```
 ### 🎉 [New Feature] Support for PostgreSQL Extensions
 
 Wasp now supports PostgreSQL extensions! You can enable them in your `main.wasp` file:

waspc/data/Generator/templates/react-app/src/auth/forms/Auth.tsx

@@ -7,6 +7,7 @@ import {
   type State,
   type CustomizationOptions,
   type ErrorMessage,
+  type AdditionalSignupFields,
 } from './types'
 import { LoginSignupForm } from './internal/common/LoginSignupForm'
 import { MessageError, MessageSuccess } from './internal/Message'
@@ -39,9 +40,11 @@ export const AuthContext = createContext({
   setSuccessMessage: (successMessage: string | null) => {},
 })
 
-function Auth ({ state, appearance, logo, socialLayout = 'horizontal' }: {
+function Auth ({ state, appearance, logo, socialLayout = 'horizontal', additionalSignupFields }: {
     state: State;
-} & CustomizationOptions) {
+} & CustomizationOptions & {
+  additionalSignupFields?: AdditionalSignupFields;
+}) {
   const [errorMessage, setErrorMessage] = useState<ErrorMessage | null>(null);
   const [successMessage, setSuccessMessage] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(false);
@@ -82,6 +85,7 @@ function Auth ({ state, appearance, logo, socialLayout = 'horizontal' }: {
           <LoginSignupForm
             state={state}
             socialButtonsDirection={socialButtonsDirection}
+            additionalSignupFields={additionalSignupFields}
           />
         )}
         {=# isEmailAuthEnabled =}

waspc/data/Generator/templates/react-app/src/auth/forms/Signup.tsx

@@ -1,17 +1,23 @@
 import Auth from './Auth'
-import { type CustomizationOptions, State } from './types'
+import {
+  type CustomizationOptions,
+  type AdditionalSignupFields,
+  State,
+} from './types'
 
 export function SignupForm({
   appearance,
   logo,
   socialLayout,
-}: CustomizationOptions) {
+  additionalFields,
+}: CustomizationOptions & { additionalFields?: AdditionalSignupFields; }) {
   return (
     <Auth
       appearance={appearance}
       logo={logo}
       socialLayout={socialLayout}
       state={State.Signup}
+      additionalSignupFields={additionalFields}
     />
   )
 }

waspc/data/Generator/templates/react-app/src/auth/forms/internal/Form.tsx

@@ -14,9 +14,10 @@ export const FormLabel = styled('label', {
   display: 'block',
   fontSize: '$sm',
   fontWeight: '500',
+  marginBottom: '0.5rem',
 })
 
-export const FormInput = styled('input', {
+const commonInputStyles = {
   display: 'block',
   lineHeight: '1.5rem',
   fontSize: '$sm',
@@ -44,7 +45,18 @@ export const FormInput = styled('input', {
   paddingBottom: '0.375rem',
   paddingLeft: '0.75rem',
   paddingRight: '0.75rem',
+  margin: 0,
+}
 
+export const FormInput = styled('input', commonInputStyles)
+
+export const FormTextarea = styled('textarea', commonInputStyles)
+
+export const FormError = styled('div', {
+  display: 'block',
+  fontSize: '$sm',
+  fontWeight: '500',
+  color: '$formErrorText',
   marginTop: '0.5rem',
 })