From ba6860cecfdd44911337afc63d3bf8a005a492a1 Mon Sep 17 00:00:00 2001
From: amitbadala <amitbadala07@gmail.com>
Date: Thu, 2 Nov 2023 13:05:37 +0530
Subject: [PATCH 1/7] Add nonOptionalErrorMsg property

---
 examples/for-tests/src/App.js        |  1 +
 lib/build/emailpassword-shared4.js   |  3 +++
 lib/build/types.d.ts                 |  2 ++
 lib/ts/recipe/emailpassword/utils.ts |  3 +++
 lib/ts/types.ts                      | 10 ++++++++++
 5 files changed, 19 insertions(+)

diff --git a/examples/for-tests/src/App.js b/examples/for-tests/src/App.js
index 505beeb61..c4a187964 100644
--- a/examples/for-tests/src/App.js
+++ b/examples/for-tests/src/App.js
@@ -301,6 +301,7 @@ const customFields = [
         id: "terms",
         label: "",
         optional: false,
+        nonOptionalErrorMsg: "Terms and conditions is required",
         inputComponent: ({ name, onChange }) => (
             <div
                 style={{
diff --git a/lib/build/emailpassword-shared4.js b/lib/build/emailpassword-shared4.js
index e3070936a..6e27da1e8 100644
--- a/lib/build/emailpassword-shared4.js
+++ b/lib/build/emailpassword-shared4.js
@@ -384,6 +384,9 @@ function getFormattedFormField(field) {
                         case 0:
                             // Absent or not optional empty field
                             if (value === "" && field.optional === false) {
+                                if (field.nonOptionalErrorMsg !== undefined && field.nonOptionalErrorMsg !== "") {
+                                    return [2 /*return*/, field.nonOptionalErrorMsg];
+                                }
                                 return [2 /*return*/, "ERROR_NON_OPTIONAL"];
                             }
                             return [4 /*yield*/, field.validate(value)];
diff --git a/lib/build/types.d.ts b/lib/build/types.d.ts
index 93605a26e..ece94faef 100644
--- a/lib/build/types.d.ts
+++ b/lib/build/types.d.ts
@@ -94,6 +94,7 @@ export declare type FormFieldBaseConfig = {
 export declare type FormField = FormFieldBaseConfig & {
     validate?: (value: any) => Promise<string | undefined>;
     optional?: boolean;
+    nonOptionalErrorMsg?: string;
 };
 export declare type APIFormField = {
     id: string;
@@ -105,6 +106,7 @@ export declare type NormalisedFormField = {
     placeholder: string;
     validate: (value: any) => Promise<string | undefined> | string | undefined;
     optional: boolean;
+    nonOptionalErrorMsg?: string;
     autoComplete?: string;
     autofocus?: boolean;
     getDefaultValue?: () => string;
diff --git a/lib/ts/recipe/emailpassword/utils.ts b/lib/ts/recipe/emailpassword/utils.ts
index 6220af0c5..8edc3b0e5 100644
--- a/lib/ts/recipe/emailpassword/utils.ts
+++ b/lib/ts/recipe/emailpassword/utils.ts
@@ -343,6 +343,9 @@ export function getFormattedFormField(field: NormalisedFormField): NormalisedFor
         validate: async (value: any): Promise<string | undefined> => {
             // Absent or not optional empty field
             if (value === "" && field.optional === false) {
+                if (field.nonOptionalErrorMsg !== undefined && field.nonOptionalErrorMsg !== "") {
+                    return field.nonOptionalErrorMsg;
+                }
                 return "ERROR_NON_OPTIONAL";
             }
 
diff --git a/lib/ts/types.ts b/lib/ts/types.ts
index 16beba60b..3ac8ddcc8 100644
--- a/lib/ts/types.ts
+++ b/lib/ts/types.ts
@@ -239,6 +239,11 @@ export type FormField = FormFieldBaseConfig & {
      * Whether the field is optional or not.
      */
     optional?: boolean;
+
+    /*
+     * Error message for non optional field.
+     */
+    nonOptionalErrorMsg?: string;
 };
 
 export type APIFormField = {
@@ -279,6 +284,11 @@ export type NormalisedFormField = {
      */
     optional: boolean;
 
+    /*
+     * Error message for non optional field.
+     */
+    nonOptionalErrorMsg?: string;
+
     /*
      * Autocomplete input.
      */

From f0e5affb825a464ab24f8d92aa03365fb79bdd46 Mon Sep 17 00:00:00 2001
From: amitbadala <amitbadala07@gmail.com>
Date: Fri, 3 Nov 2023 11:17:14 +0530
Subject: [PATCH 2/7] Overwrite be error message for non-optional field if
 nonOptionalErrorMsg is provided

---
 lib/build/emailpassword-shared7.js            | 50 +++++++++++++++----
 .../components/library/formBase.tsx           | 19 +++++--
 2 files changed, 55 insertions(+), 14 deletions(-)

diff --git a/lib/build/emailpassword-shared7.js b/lib/build/emailpassword-shared7.js
index 0abdcd070..dc582c008 100644
--- a/lib/build/emailpassword-shared7.js
+++ b/lib/build/emailpassword-shared7.js
@@ -616,7 +616,17 @@ var FormBase = function (props) {
     var onFormSubmit = React.useCallback(
         function (e) {
             return genericComponentOverrideContext.__awaiter(void 0, void 0, void 0, function () {
-                var apiFields, fieldUpdates, result, generalError, e_1, _loop_1, _i, formFields_1, field, errorFields_1;
+                var apiFields,
+                    fieldUpdates,
+                    result,
+                    generalError,
+                    e_1,
+                    _loop_1,
+                    _i,
+                    formFields_1,
+                    field,
+                    errorFields_1,
+                    getErrorMessage_1;
                 return genericComponentOverrideContext.__generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
@@ -706,19 +716,39 @@ var FormBase = function (props) {
                                 // If field error.
                                 if (result.status === "FIELD_ERROR") {
                                     errorFields_1 = result.formFields;
+                                    getErrorMessage_1 = function (fs) {
+                                        var _a;
+                                        var errorMessage =
+                                            (_a = errorFields_1.find(function (ef) {
+                                                return ef.id === fs.id;
+                                            })) === null || _a === void 0
+                                                ? void 0
+                                                : _a.error;
+                                        if (errorMessage === "Field is not optional") {
+                                            var fieldConfigData = props.formFields.find(function (f) {
+                                                return f.id === fs.id;
+                                            });
+                                            // set non-optional error message from nonOptionalErrorMsg
+                                            if (
+                                                (fieldConfigData === null || fieldConfigData === void 0
+                                                    ? void 0
+                                                    : fieldConfigData.nonOptionalErrorMsg) !== undefined &&
+                                                (fieldConfigData === null || fieldConfigData === void 0
+                                                    ? void 0
+                                                    : fieldConfigData.nonOptionalErrorMsg) !== ""
+                                            ) {
+                                                return fieldConfigData === null || fieldConfigData === void 0
+                                                    ? void 0
+                                                    : fieldConfigData.nonOptionalErrorMsg;
+                                            }
+                                        }
+                                        return errorMessage;
+                                    };
                                     setFieldStates(function (os) {
                                         return os.map(function (fs) {
-                                            var _a;
                                             return genericComponentOverrideContext.__assign(
                                                 genericComponentOverrideContext.__assign({}, fs),
-                                                {
-                                                    error:
-                                                        (_a = errorFields_1.find(function (ef) {
-                                                            return ef.id === fs.id;
-                                                        })) === null || _a === void 0
-                                                            ? void 0
-                                                            : _a.error,
-                                                }
+                                                { error: getErrorMessage_1(fs) }
                                             );
                                         });
                                     });
diff --git a/lib/ts/recipe/emailpassword/components/library/formBase.tsx b/lib/ts/recipe/emailpassword/components/library/formBase.tsx
index f9d5e201b..b811c1bb2 100644
--- a/lib/ts/recipe/emailpassword/components/library/formBase.tsx
+++ b/lib/ts/recipe/emailpassword/components/library/formBase.tsx
@@ -251,10 +251,21 @@ export const FormBase: React.FC<FormBaseProps<any>> = (props) => {
                     // If field error.
                     if (result.status === "FIELD_ERROR") {
                         const errorFields = result.formFields;
-
-                        setFieldStates((os) =>
-                            os.map((fs) => ({ ...fs, error: errorFields.find((ef: any) => ef.id === fs.id)?.error }))
-                        );
+                        const getErrorMessage = (fs: FieldState) => {
+                            const errorMessage = errorFields.find((ef: any) => ef.id === fs.id)?.error;
+                            if (errorMessage === "Field is not optional") {
+                                const fieldConfigData = props.formFields.find((f) => f.id === fs.id);
+                                // set non-optional error message from nonOptionalErrorMsg
+                                if (
+                                    fieldConfigData?.nonOptionalErrorMsg !== undefined &&
+                                    fieldConfigData?.nonOptionalErrorMsg !== ""
+                                ) {
+                                    return fieldConfigData?.nonOptionalErrorMsg;
+                                }
+                            }
+                            return errorMessage;
+                        };
+                        setFieldStates((os) => os.map((fs) => ({ ...fs, error: getErrorMessage(fs) })));
                     }
                 }
             } catch (e) {

From 3434cddcfd898a939b90b2ef3933bf2da83c7f40 Mon Sep 17 00:00:00 2001
From: amitbadala <amitbadala07@gmail.com>
Date: Fri, 3 Nov 2023 12:20:22 +0530
Subject: [PATCH 3/7] Add nonOptionalErrorMsg for signup form

---
 examples/for-tests/src/App.js                 |  3 +-
 lib/build/emailpassword-shared7.js            |  2 +-
 .../components/library/formBase.tsx           |  2 +-
 test/end-to-end/signup.test.js                | 75 +++++++++++++++++++
 4 files changed, 79 insertions(+), 3 deletions(-)

diff --git a/examples/for-tests/src/App.js b/examples/for-tests/src/App.js
index c4a187964..8c940e174 100644
--- a/examples/for-tests/src/App.js
+++ b/examples/for-tests/src/App.js
@@ -285,6 +285,7 @@ const customFields = [
     {
         id: "select-dropdown",
         label: "Select Dropdown",
+        nonOptionalErrorMsg: "Select dropdown is not an optional",
         inputComponent: ({ value, name, onChange }) => (
             <select value={value} name={name} onChange={(e) => onChange(e.target.value)}>
                 <option value="" disabled hidden>
@@ -301,7 +302,7 @@ const customFields = [
         id: "terms",
         label: "",
         optional: false,
-        nonOptionalErrorMsg: "Terms and conditions is required",
+        nonOptionalErrorMsg: "You must accept the terms and conditions",
         inputComponent: ({ name, onChange }) => (
             <div
                 style={{
diff --git a/lib/build/emailpassword-shared7.js b/lib/build/emailpassword-shared7.js
index dc582c008..f83b71b44 100644
--- a/lib/build/emailpassword-shared7.js
+++ b/lib/build/emailpassword-shared7.js
@@ -728,7 +728,7 @@ var FormBase = function (props) {
                                             var fieldConfigData = props.formFields.find(function (f) {
                                                 return f.id === fs.id;
                                             });
-                                            // set non-optional error message from nonOptionalErrorMsg
+                                            // replace non-optional server error message from nonOptionalErrorMsg
                                             if (
                                                 (fieldConfigData === null || fieldConfigData === void 0
                                                     ? void 0
diff --git a/lib/ts/recipe/emailpassword/components/library/formBase.tsx b/lib/ts/recipe/emailpassword/components/library/formBase.tsx
index b811c1bb2..3332c9541 100644
--- a/lib/ts/recipe/emailpassword/components/library/formBase.tsx
+++ b/lib/ts/recipe/emailpassword/components/library/formBase.tsx
@@ -255,7 +255,7 @@ export const FormBase: React.FC<FormBaseProps<any>> = (props) => {
                             const errorMessage = errorFields.find((ef: any) => ef.id === fs.id)?.error;
                             if (errorMessage === "Field is not optional") {
                                 const fieldConfigData = props.formFields.find((f) => f.id === fs.id);
-                                // set non-optional error message from nonOptionalErrorMsg
+                                // replace non-optional server error message from nonOptionalErrorMsg
                                 if (
                                     fieldConfigData?.nonOptionalErrorMsg !== undefined &&
                                     fieldConfigData?.nonOptionalErrorMsg !== ""
diff --git a/test/end-to-end/signup.test.js b/test/end-to-end/signup.test.js
index 829ad2c4f..d228c01e4 100644
--- a/test/end-to-end/signup.test.js
+++ b/test/end-to-end/signup.test.js
@@ -652,6 +652,81 @@ describe("SuperTokens SignUp", function () {
             );
         });
     });
+
+    describe("Check if nonOptionalErrorMsg works as expected", function () {
+        beforeEach(async function () {
+            // set cookie and reload which loads the form with custom field
+            await page.evaluate(() => window.localStorage.setItem("SHOW_CUSTOM_FIELDS", "YES"));
+
+            await page.reload({
+                waitUntil: "domcontentloaded",
+            });
+            await toggleSignInSignUp(page);
+        });
+
+        it("Check on blank form submit nonOptionalErrorMsg gets displayed as expected", async function () {
+            await submitForm(page);
+            let formFieldErrors = await getFieldErrors(page);
+            // Also standard non-optional-error is displayed if nonOptionalErrorMsg is not provided
+            assert.deepStrictEqual(formFieldErrors, [
+                "Field is not optional",
+                "Field is not optional",
+                "You must accept the terms and conditions",
+            ]);
+        });
+
+        it("Check if nonOptionalErrorMsg overwrites server error message for non-optional fields", async function () {
+            const requestHandler = (request) => {
+                if (request.method() === "POST" && request.url() === SIGN_UP_API) {
+                    request.respond({
+                        status: 200,
+                        contentType: "application/json",
+                        headers: {
+                            "access-control-allow-origin": TEST_CLIENT_BASE_URL,
+                            "access-control-allow-credentials": "true",
+                        },
+                        body: JSON.stringify({
+                            status: "FIELD_ERROR",
+                            formFields: [
+                                {
+                                    id: "select-dropdown",
+                                    error: "Field is not optional",
+                                },
+                                {
+                                    id: "email",
+                                    error: "Field is not optional",
+                                },
+                            ],
+                        }),
+                    });
+                    page.off("request", requestHandler);
+                    page.setRequestInterception(false);
+                } else {
+                    request.continue();
+                }
+            };
+
+            await page.setRequestInterception(true);
+            page.on("request", requestHandler);
+
+            // Fill and submit the form with custom fields
+            await setInputValues(page, [
+                { name: "email", value: "john.doe@supertokens.io" },
+                { name: "password", value: "Str0ngP@assw0rd" },
+            ]);
+            // Check terms and condition checkbox
+            let termsCheckbox = await waitForSTElement(page, '[name="terms"]');
+            await page.evaluate((e) => e.click(), termsCheckbox);
+
+            // Perform the button click and wait for all network activity to finish
+            await Promise.all([page.waitForNetworkIdle(), submitForm(page)]);
+
+            await waitForSTElement(page, "[data-supertokens~='inputErrorMessage']");
+            // should also show the server error message if nonOptionalErrorMsg is not provided
+            let formFieldsErrors = await getFieldErrors(page);
+            assert.deepStrictEqual(formFieldsErrors, ["Field is not optional", "Select dropdown is not an optional"]);
+        });
+    });
 });
 
 describe("SuperTokens SignUp => Server Error", function () {

From 174f6d4f75a3a866cdddfa76a814edcb4443a42f Mon Sep 17 00:00:00 2001
From: amitbadala <amitbadala07@gmail.com>
Date: Fri, 3 Nov 2023 14:28:20 +0530
Subject: [PATCH 4/7] Reorder signup tests for nonOptional fields

---
 test/end-to-end/signup.test.js | 229 ++++++++++++++++++++++-----------
 1 file changed, 152 insertions(+), 77 deletions(-)

diff --git a/test/end-to-end/signup.test.js b/test/end-to-end/signup.test.js
index d228c01e4..beefdd384 100644
--- a/test/end-to-end/signup.test.js
+++ b/test/end-to-end/signup.test.js
@@ -374,11 +374,11 @@ describe("SuperTokens SignUp", function () {
             let formFieldErrors = await getFieldErrors(page);
 
             // 2 regular form field errors +
-            // 1 required custom field => terms checkbox
+            // 1 required custom field => terms checkbox with nonOptionalErrorMsg
             assert.deepStrictEqual(formFieldErrors, [
                 "Field is not optional",
                 "Field is not optional",
-                "Field is not optional",
+                "You must accept the terms and conditions",
             ]);
 
             // supply values for regular-required fields only
@@ -389,7 +389,7 @@ describe("SuperTokens SignUp", function () {
 
             await submitForm(page);
             formFieldErrors = await getFieldErrors(page);
-            assert.deepStrictEqual(formFieldErrors, ["Field is not optional"]);
+            assert.deepStrictEqual(formFieldErrors, ["You must accept the terms and conditions"]);
 
             // check terms and condition checkbox
             let termsCheckbox = await waitForSTElement(page, '[name="terms"]');
@@ -476,6 +476,75 @@ describe("SuperTokens SignUp", function () {
                 throw new Error("test failed");
             }
         });
+
+        it("Check on blank form submit nonOptionalErrorMsg gets displayed as expected", async function () {
+            await submitForm(page);
+            let formFieldErrors = await getFieldErrors(page);
+            // Also standard non-optional-error is displayed if nonOptionalErrorMsg is not provided
+            assert.deepStrictEqual(formFieldErrors, [
+                "Field is not optional",
+                "Field is not optional",
+                "You must accept the terms and conditions",
+            ]);
+        });
+
+        it("Check if nonOptionalErrorMsg overwrites server error message for non-optional fields", async function () {
+            const requestHandler = (request) => {
+                if (request.method() === "POST" && request.url() === SIGN_UP_API) {
+                    request.respond({
+                        status: 200,
+                        contentType: "application/json",
+                        headers: {
+                            "access-control-allow-origin": TEST_CLIENT_BASE_URL,
+                            "access-control-allow-credentials": "true",
+                        },
+                        body: JSON.stringify({
+                            status: "FIELD_ERROR",
+                            formFields: [
+                                {
+                                    id: "select-dropdown",
+                                    error: "Field is not optional",
+                                },
+                                {
+                                    id: "email",
+                                    error: "Field is not optional",
+                                },
+                            ],
+                        }),
+                    });
+                } else {
+                    request.continue();
+                }
+            };
+
+            try {
+                await page.setRequestInterception(true);
+                page.on("request", requestHandler);
+
+                // Fill and submit the form with custom fields
+                await setInputValues(page, [
+                    { name: "email", value: "john.doe@supertokens.io" },
+                    { name: "password", value: "Str0ngP@assw0rd" },
+                ]);
+                // Check terms and condition checkbox
+                let termsCheckbox = await waitForSTElement(page, '[name="terms"]');
+                await page.evaluate((e) => e.click(), termsCheckbox);
+
+                // Perform the button click and wait for all network activity to finish
+                await Promise.all([page.waitForNetworkIdle(), submitForm(page)]);
+
+                await waitForSTElement(page, "[data-supertokens~='inputErrorMessage']");
+                // should also show the server error message if nonOptionalErrorMsg is not provided
+                let formFieldsErrors = await getFieldErrors(page);
+                assert.deepStrictEqual(formFieldsErrors, [
+                    "Field is not optional",
+                    "Select dropdown is not an optional",
+                ]);
+            } finally {
+                page.off("request", requestHandler);
+                await page.setRequestInterception(false);
+            }
+        });
     });
 
     // Default values test
@@ -653,80 +722,86 @@ describe("SuperTokens SignUp", function () {
         });
     });
 
-    describe("Check if nonOptionalErrorMsg works as expected", function () {
-        beforeEach(async function () {
-            // set cookie and reload which loads the form with custom field
-            await page.evaluate(() => window.localStorage.setItem("SHOW_CUSTOM_FIELDS", "YES"));
-
-            await page.reload({
-                waitUntil: "domcontentloaded",
-            });
-            await toggleSignInSignUp(page);
-        });
-
-        it("Check on blank form submit nonOptionalErrorMsg gets displayed as expected", async function () {
-            await submitForm(page);
-            let formFieldErrors = await getFieldErrors(page);
-            // Also standard non-optional-error is displayed if nonOptionalErrorMsg is not provided
-            assert.deepStrictEqual(formFieldErrors, [
-                "Field is not optional",
-                "Field is not optional",
-                "You must accept the terms and conditions",
-            ]);
-        });
-
-        it("Check if nonOptionalErrorMsg overwrites server error message for non-optional fields", async function () {
-            const requestHandler = (request) => {
-                if (request.method() === "POST" && request.url() === SIGN_UP_API) {
-                    request.respond({
-                        status: 200,
-                        contentType: "application/json",
-                        headers: {
-                            "access-control-allow-origin": TEST_CLIENT_BASE_URL,
-                            "access-control-allow-credentials": "true",
-                        },
-                        body: JSON.stringify({
-                            status: "FIELD_ERROR",
-                            formFields: [
-                                {
-                                    id: "select-dropdown",
-                                    error: "Field is not optional",
-                                },
-                                {
-                                    id: "email",
-                                    error: "Field is not optional",
-                                },
-                            ],
-                        }),
-                    });
-                    page.off("request", requestHandler);
-                    page.setRequestInterception(false);
-                } else {
-                    request.continue();
-                }
-            };
-
-            await page.setRequestInterception(true);
-            page.on("request", requestHandler);
-
-            // Fill and submit the form with custom fields
-            await setInputValues(page, [
-                { name: "email", value: "john.doe@supertokens.io" },
-                { name: "password", value: "Str0ngP@assw0rd" },
-            ]);
-            // Check terms and condition checkbox
-            let termsCheckbox = await waitForSTElement(page, '[name="terms"]');
-            await page.evaluate((e) => e.click(), termsCheckbox);
-
-            // Perform the button click and wait for all network activity to finish
-            await Promise.all([page.waitForNetworkIdle(), submitForm(page)]);
-
-            await waitForSTElement(page, "[data-supertokens~='inputErrorMessage']");
-            // should also show the server error message if nonOptionalErrorMsg is not provided
-            let formFieldsErrors = await getFieldErrors(page);
-            assert.deepStrictEqual(formFieldsErrors, ["Field is not optional", "Select dropdown is not an optional"]);
-        });
-    });
+    // describe("Check if nonOptionalErrorMsg works as expected", function () {
+    //     beforeEach(async function () {
+    //         // set cookie and reload which loads the form with custom field
+    //         await page.evaluate(() => window.localStorage.setItem("SHOW_CUSTOM_FIELDS", "YES"));
+
+    //         await page.reload({
+    //             waitUntil: "domcontentloaded",
+    //         });
+    //         await toggleSignInSignUp(page);
+    //     });
+
+    //     it("Check on blank form submit nonOptionalErrorMsg gets displayed as expected", async function () {
+    //         await submitForm(page);
+    //         let formFieldErrors = await getFieldErrors(page);
+    //         // Also standard non-optional-error is displayed if nonOptionalErrorMsg is not provided
+    //         assert.deepStrictEqual(formFieldErrors, [
+    //             "Field is not optional",
+    //             "Field is not optional",
+    //             "You must accept the terms and conditions",
+    //         ]);
+    //     });
+
+    //     it("Check if nonOptionalErrorMsg overwrites server error message for non-optional fields", async function () {
+    //         const requestHandler = (request) => {
+    //             if (request.method() === "POST" && request.url() === SIGN_UP_API) {
+    //                 request.respond({
+    //                     status: 200,
+    //                     contentType: "application/json",
+    //                     headers: {
+    //                         "access-control-allow-origin": TEST_CLIENT_BASE_URL,
+    //                         "access-control-allow-credentials": "true",
+    //                     },
+    //                     body: JSON.stringify({
+    //                         status: "FIELD_ERROR",
+    //                         formFields: [
+    //                             {
+    //                                 id: "select-dropdown",
+    //                                 error: "Field is not optional",
+    //                             },
+    //                             {
+    //                                 id: "email",
+    //                                 error: "Field is not optional",
+    //                             },
+    //                         ],
+    //                     }),
+    //                 });
+    //             } else {
+    //                 request.continue();
+    //             }
+    //         };
+
+    //         try {
+    //             await page.setRequestInterception(true);
+    //             page.on("request", requestHandler);
+
+    //             // Fill and submit the form with custom fields
+    //             await setInputValues(page, [
+    //                 { name: "email", value: "john.doe@supertokens.io" },
+    //                 { name: "password", value: "Str0ngP@assw0rd" },
+    //             ]);
+    //             // Check terms and condition checkbox
+    //             let termsCheckbox = await waitForSTElement(page, '[name="terms"]');
+    //             await page.evaluate((e) => e.click(), termsCheckbox);
+
+    //             // Perform the button click and wait for all network activity to finish
+    //             await Promise.all([page.waitForNetworkIdle(), submitForm(page)]);
+
+    //             await waitForSTElement(page, "[data-supertokens~='inputErrorMessage']");
+    //             // should also show the server error message if nonOptionalErrorMsg is not provided
+    //             let formFieldsErrors = await getFieldErrors(page);
+    //             assert.deepStrictEqual(formFieldsErrors, [
+    //                 "Field is not optional",
+    //                 "Select dropdown is not an optional",
+    //             ]);
+    //         } finally {
+    //             page.off("request", requestHandler);
+    //             await page.setRequestInterception(false);
+    //         }
+    //     });
+    // });
 });
 
 describe("SuperTokens SignUp => Server Error", function () {

From 0f0c68e0bc5c44dc92bb1d690f98c7fbab91baca Mon Sep 17 00:00:00 2001
From: amitbadala <amitbadala07@gmail.com>
Date: Fri, 3 Nov 2023 14:31:18 +0530
Subject: [PATCH 5/7] Tests for signin,

---
 test/end-to-end/signin.test.js | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/test/end-to-end/signin.test.js b/test/end-to-end/signin.test.js
index e9c4721f1..5fe7d7342 100644
--- a/test/end-to-end/signin.test.js
+++ b/test/end-to-end/signin.test.js
@@ -757,6 +757,24 @@ describe("SuperTokens SignIn", function () {
             }
         });
     });
+
+    describe("Check if nonOptionalErrorMsg works as expected", function () {
+        it("Check on blank form submit nonOptionalErrorMsg gets displayed as expected", async function () {
+            // set cookie and reload which loads the form with custom field
+            await page.evaluate(() =>
+                window.localStorage.setItem("SHOW_SIGNIN_WITH_NON_OPTIONAL_ERROR_MESSAGE", "YES")
+            );
+            await page.reload({
+                waitUntil: "domcontentloaded",
+            });
+
+            await submitForm(page);
+            let formFieldErrors = await getFieldErrors(page);
+
+            // Also standard non-optional-error is displayed if nonOptionalErrorMsg is not provided
+            assert.deepStrictEqual(formFieldErrors, ["Please add email", "Field is not optional"]);
+        });
+    });
 });
 
 describe("SuperTokens SignIn => Server Error", function () {

From b879cdf7b9b7c07e963fdb87d377247aed53b461 Mon Sep 17 00:00:00 2001
From: amitbadala <amitbadala07@gmail.com>
Date: Fri, 3 Nov 2023 14:35:30 +0530
Subject: [PATCH 6/7] Remove comments

---
 test/end-to-end/signup.test.js | 81 ----------------------------------
 1 file changed, 81 deletions(-)

diff --git a/test/end-to-end/signup.test.js b/test/end-to-end/signup.test.js
index beefdd384..d07a235b4 100644
--- a/test/end-to-end/signup.test.js
+++ b/test/end-to-end/signup.test.js
@@ -721,87 +721,6 @@ describe("SuperTokens SignUp", function () {
             );
         });
     });
-
-    // describe("Check if nonOptionalErrorMsg works as expected", function () {
-    //     beforeEach(async function () {
-    //         // set cookie and reload which loads the form with custom field
-    //         await page.evaluate(() => window.localStorage.setItem("SHOW_CUSTOM_FIELDS", "YES"));
-
-    //         await page.reload({
-    //             waitUntil: "domcontentloaded",
-    //         });
-    //         await toggleSignInSignUp(page);
-    //     });
-
-    //     it("Check on blank form submit nonOptionalErrorMsg gets displayed as expected", async function () {
-    //         await submitForm(page);
-    //         let formFieldErrors = await getFieldErrors(page);
-    //         // Also standard non-optional-error is displayed if nonOptionalErrorMsg is not provided
-    //         assert.deepStrictEqual(formFieldErrors, [
-    //             "Field is not optional",
-    //             "Field is not optional",
-    //             "You must accept the terms and conditions",
-    //         ]);
-    //     });
-
-    //     it("Check if nonOptionalErrorMsg overwrites server error message for non-optional fields", async function () {
-    //         const requestHandler = (request) => {
-    //             if (request.method() === "POST" && request.url() === SIGN_UP_API) {
-    //                 request.respond({
-    //                     status: 200,
-    //                     contentType: "application/json",
-    //                     headers: {
-    //                         "access-control-allow-origin": TEST_CLIENT_BASE_URL,
-    //                         "access-control-allow-credentials": "true",
-    //                     },
-    //                     body: JSON.stringify({
-    //                         status: "FIELD_ERROR",
-    //                         formFields: [
-    //                             {
-    //                                 id: "select-dropdown",
-    //                                 error: "Field is not optional",
-    //                             },
-    //                             {
-    //                                 id: "email",
-    //                                 error: "Field is not optional",
-    //                             },
-    //                         ],
-    //                     }),
-    //                 });
-    //             } else {
-    //                 request.continue();
-    //             }
-    //         };
-
-    //         try {
-    //             await page.setRequestInterception(true);
-    //             page.on("request", requestHandler);
-
-    //             // Fill and submit the form with custom fields
-    //             await setInputValues(page, [
-    //                 { name: "email", value: "john.doe@supertokens.io" },
-    //                 { name: "password", value: "Str0ngP@assw0rd" },
-    //             ]);
-    //             // Check terms and condition checkbox
-    //             let termsCheckbox = await waitForSTElement(page, '[name="terms"]');
-    //             await page.evaluate((e) => e.click(), termsCheckbox);
-
-    //             // Perform the button click and wait for all network activity to finish
-    //             await Promise.all([page.waitForNetworkIdle(), submitForm(page)]);
-
-    //             await waitForSTElement(page, "[data-supertokens~='inputErrorMessage']");
-    //             // should also show the server error message if nonOptionalErrorMsg is not provided
-    //             let formFieldsErrors = await getFieldErrors(page);
-    //             assert.deepStrictEqual(formFieldsErrors, [
-    //                 "Field is not optional",
-    //                 "Select dropdown is not an optional",
-    //             ]);
-    //         } finally {
-    //             page.off("request", requestHandler);
-    //             await page.setRequestInterception(false);
-    //         }
-    //     });
-    // });
 });
 
 describe("SuperTokens SignUp => Server Error", function () {

From ae369cb420e513047fe7ad784fa6b0c83ca1ff72 Mon Sep 17 00:00:00 2001
From: amitbadala <amitbadala07@gmail.com>
Date: Fri, 3 Nov 2023 14:38:15 +0530
Subject: [PATCH 7/7] Add nonOptional property to typescript

---
 examples/for-tests/src/App.js    | 10 ++++++++++
 test/with-typescript/src/App.tsx |  1 +
 2 files changed, 11 insertions(+)

diff --git a/examples/for-tests/src/App.js b/examples/for-tests/src/App.js
index 8c940e174..798d87edd 100644
--- a/examples/for-tests/src/App.js
+++ b/examples/for-tests/src/App.js
@@ -725,6 +725,7 @@ function getFormFields() {
 
 function getSignInFormFields() {
     let showDefaultFields = localStorage.getItem("SHOW_SIGNIN_DEFAULT_FIELDS");
+    let showFieldsWithNonOptionalErrMsg = localStorage.getItem("SHOW_SIGNIN_WITH_NON_OPTIONAL_ERROR_MESSAGE");
     if (showDefaultFields === "YES") {
         return {
             formFields: [
@@ -738,6 +739,15 @@ function getSignInFormFields() {
                 },
             ],
         };
+    } else if (showFieldsWithNonOptionalErrMsg === "YES") {
+        return {
+            formFields: [
+                {
+                    id: "email",
+                    nonOptionalErrorMsg: "Please add email",
+                },
+            ],
+        };
     }
     return {};
 }
diff --git a/test/with-typescript/src/App.tsx b/test/with-typescript/src/App.tsx
index 1f8a4b3fa..ecc3f41ef 100644
--- a/test/with-typescript/src/App.tsx
+++ b/test/with-typescript/src/App.tsx
@@ -377,6 +377,7 @@ function getEmailPasswordConfigs() {
                         id: "terms",
                         label: "",
                         optional: false,
+                        nonOptionalErrorMsg: "Please check Terms and conditions",
                         getDefaultValue: () => "true",
                         inputComponent: (inputProps) => (
                             <div