From 52f8d93d54268716d4afcaee73313e34bc44f7fc Mon Sep 17 00:00:00 2001
From: Amit Badala <amitbadala07@gmail.com>
Date: Sat, 11 Nov 2023 11:45:02 +0530
Subject: [PATCH] feat: add nonOptionalErrorMsg props  (#757)

* Add nonOptionalErr types

* Now supports nonOptionalErrorMsg attribute

* Add tests and fix signin types to include nonOptionalMsg

* Enforce no api request are made on blank forms

* Clean up signup

* Throw error if invalid nonOptionalErrorMsg, add tests for the same

* Better error message

* Handle incorrect optional flag

* fixes redundant normalisation

---------

Co-authored-by: rishabhpoddar <rishabh.poddar@gmail.com>
---
 examples/for-tests/src/App.js                 |  22 ++++
 lib/build/emailpassword-shared4.js            |   7 +
 lib/build/emailpassword-shared7.js            |  47 +++++--
 .../submitNewPassword.d.ts                    |   2 +-
 .../components/themes/signInAndUp/signIn.d.ts |   4 +-
 .../components/themes/signInAndUp/signUp.d.ts |   7 +-
 .../components/themes/translations.d.ts       |   6 -
 .../components/themes/translations.d.ts       |   5 -
 lib/build/types.d.ts                          |   2 +
 .../components/library/formBase.tsx           |  16 ++-
 lib/ts/recipe/emailpassword/utils.ts          |   7 +
 lib/ts/types.ts                               |  10 ++
 test/end-to-end/signin.test.js                |  44 +++++++
 test/end-to-end/signup.test.js                | 124 +++++++++++++++++-
 test/with-typescript/src/App.tsx              |   2 +
 15 files changed, 272 insertions(+), 33 deletions(-)

diff --git a/examples/for-tests/src/App.js b/examples/for-tests/src/App.js
index 505beeb61..7c546a35d 100644
--- a/examples/for-tests/src/App.js
+++ b/examples/for-tests/src/App.js
@@ -279,12 +279,19 @@ const incorrectFormFields = [
             return "Please check Terms and conditions";
         },
     },
+    {
+        id: "city",
+        label: "Your city",
+        optional: false,
+        nonOptionalErrorMsg: "", // empty string should throw error
+    },
 ];
 
 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,6 +308,7 @@ const customFields = [
         id: "terms",
         label: "",
         optional: false,
+        nonOptionalErrorMsg: "You must accept the terms and conditions",
         inputComponent: ({ name, onChange }) => (
             <div
                 style={{
@@ -711,6 +719,10 @@ function getFormFields() {
             // since page-error blocks all the other errors
             // use this filter to test specific error
             return incorrectFormFields.filter(({ id }) => id === "terms");
+        } else if (localStorage.getItem("INCORRECT_NON_OPTIONAL_ERROR_MSG") === "YES") {
+            return incorrectFormFields.filter(({ id }) => id === "city");
+        } else if (localStorage.getItem("INCORRECT_GETDEFAULT") === "YES") {
+            return incorrectFormFields.filter(({ id }) => id === "country");
         }
         return incorrectFormFields;
     } else if (localStorage.getItem("SHOW_CUSTOM_FIELDS_WITH_DEFAULT_VALUES") === "YES") {
@@ -723,6 +735,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: [
@@ -736,6 +749,15 @@ function getSignInFormFields() {
                 },
             ],
         };
+    } else if (showFieldsWithNonOptionalErrMsg === "YES") {
+        return {
+            formFields: [
+                {
+                    id: "email",
+                    nonOptionalErrorMsg: "Please add email",
+                },
+            ],
+        };
     }
     return {};
 }
diff --git a/lib/build/emailpassword-shared4.js b/lib/build/emailpassword-shared4.js
index e3070936a..e2f54ebcc 100644
--- a/lib/build/emailpassword-shared4.js
+++ b/lib/build/emailpassword-shared4.js
@@ -376,6 +376,10 @@ function mergeFormFields(defaultFormFields, userFormFields) {
 }
 function getFormattedFormField(field) {
     var _this = this;
+    // Fields with the 'nonOptionalErrorMsg' property must have a valid message defined
+    if (field.optional === false && field.nonOptionalErrorMsg === "") {
+        throw new Error("nonOptionalErrorMsg for field ".concat(field.id, " cannot be an empty string"));
+    }
     return genericComponentOverrideContext.__assign(genericComponentOverrideContext.__assign({}, field), {
         validate: function (value) {
             return genericComponentOverrideContext.__awaiter(_this, void 0, void 0, function () {
@@ -384,6 +388,9 @@ function getFormattedFormField(field) {
                         case 0:
                             // Absent or not optional empty field
                             if (value === "" && field.optional === false) {
+                                if (field.nonOptionalErrorMsg !== undefined) {
+                                    return [2 /*return*/, field.nonOptionalErrorMsg];
+                                }
                                 return [2 /*return*/, "ERROR_NON_OPTIONAL"];
                             }
                             return [4 /*yield*/, field.validate(value)];
diff --git a/lib/build/emailpassword-shared7.js b/lib/build/emailpassword-shared7.js
index 0abdcd070..db90a2acb 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,36 @@ 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;
+                                            });
+                                            // replace non-optional server error message from nonOptionalErrorMsg
+                                            if (
+                                                (fieldConfigData === null || fieldConfigData === void 0
+                                                    ? void 0
+                                                    : fieldConfigData.nonOptionalErrorMsg) !== undefined
+                                            ) {
+                                                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/build/recipe/emailpassword/components/themes/resetPasswordUsingToken/submitNewPassword.d.ts b/lib/build/recipe/emailpassword/components/themes/resetPasswordUsingToken/submitNewPassword.d.ts
index 9c795dce2..b8ec36fd7 100644
--- a/lib/build/recipe/emailpassword/components/themes/resetPasswordUsingToken/submitNewPassword.d.ts
+++ b/lib/build/recipe/emailpassword/components/themes/resetPasswordUsingToken/submitNewPassword.d.ts
@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export declare const SubmitNewPassword: import("react").ComponentType<
     import("../../../../../types").ThemeBaseProps & {
-        formFields: Omit<import("../../../types").FormFieldThemeProps, "inputComponent">[];
+        formFields: import("../../../types").FormFieldThemeProps[];
         error: string | undefined;
     } & {
         recipeImplementation: import("supertokens-web-js/recipe/emailpassword").RecipeInterface;
diff --git a/lib/build/recipe/emailpassword/components/themes/signInAndUp/signIn.d.ts b/lib/build/recipe/emailpassword/components/themes/signInAndUp/signIn.d.ts
index 64639bb96..46dd93ed6 100644
--- a/lib/build/recipe/emailpassword/components/themes/signInAndUp/signIn.d.ts
+++ b/lib/build/recipe/emailpassword/components/themes/signInAndUp/signIn.d.ts
@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export declare const SignIn: import("react").ComponentType<
     import("../../../../../types").ThemeBaseProps & {
-        formFields: Omit<import("../../../types").FormFieldThemeProps, "inputComponent">[];
+        formFields: import("../../../types").FormFieldThemeProps[];
         error: string | undefined;
     } & {
         recipeImplementation: import("supertokens-web-js/recipe/emailpassword").RecipeInterface;
@@ -10,6 +10,6 @@ export declare const SignIn: import("react").ComponentType<
         config: import("../../../types").NormalisedConfig;
         signUpClicked?: (() => void) | undefined;
         forgotPasswordClick: () => void;
-        onSuccess: (result: { user: import("supertokens-web-js/types").User }) => void;
+        onSuccess: () => void;
     }
 >;
diff --git a/lib/build/recipe/emailpassword/components/themes/signInAndUp/signUp.d.ts b/lib/build/recipe/emailpassword/components/themes/signInAndUp/signUp.d.ts
index 32bc386b1..1a0268aa8 100644
--- a/lib/build/recipe/emailpassword/components/themes/signInAndUp/signUp.d.ts
+++ b/lib/build/recipe/emailpassword/components/themes/signInAndUp/signUp.d.ts
@@ -1,13 +1,14 @@
 /// <reference types="react" />
 export declare const SignUp: import("react").ComponentType<
     import("../../../../../types").ThemeBaseProps & {
+        formFields: import("../../../types").FormFieldThemeProps[];
+        error: string | undefined;
+    } & {
         recipeImplementation: import("supertokens-web-js/recipe/emailpassword").RecipeInterface;
         clearError: () => void;
         onError: (error: string) => void;
         config: import("../../../types").NormalisedConfig;
         signInClicked?: (() => void) | undefined;
-        onSuccess: (result: { user: import("supertokens-web-js/types").User }) => void;
-        formFields: import("../../../types").FormFieldThemeProps[];
-        error: string | undefined;
+        onSuccess: () => void;
     }
 >;
diff --git a/lib/build/recipe/thirdpartyemailpassword/components/themes/translations.d.ts b/lib/build/recipe/thirdpartyemailpassword/components/themes/translations.d.ts
index 454ff978e..bb256d116 100644
--- a/lib/build/recipe/thirdpartyemailpassword/components/themes/translations.d.ts
+++ b/lib/build/recipe/thirdpartyemailpassword/components/themes/translations.d.ts
@@ -58,9 +58,6 @@ export declare const defaultTranslationsThirdPartyEmailPassword: {
         "Password must contain at least one alphabet": undefined;
         "Password must contain at least one number": undefined;
         "Email is invalid": undefined;
-        "Reset password link was not created because of account take over risk. Please contact support. (ERR_CODE_001)": undefined;
-        "Cannot sign up due to security reasons. Please try logging in, use a different login method or contact support. (ERR_CODE_007)": undefined;
-        "Cannot sign in due to security reasons. Please try resetting your password, use a different login method or contact support. (ERR_CODE_008)": undefined;
         EMAIL_VERIFICATION_RESEND_SUCCESS: string;
         EMAIL_VERIFICATION_SEND_TITLE: string;
         EMAIL_VERIFICATION_SEND_DESC_START: string;
@@ -89,8 +86,5 @@ export declare const defaultTranslationsThirdPartyEmailPassword: {
         THIRD_PARTY_PROVIDER_DEFAULT_BTN_START: string;
         THIRD_PARTY_PROVIDER_DEFAULT_BTN_END: string;
         THIRD_PARTY_ERROR_NO_EMAIL: string;
-        "Cannot sign in / up due to security reasons. Please try a different login method or contact support. (ERR_CODE_004)": undefined;
-        "Cannot sign in / up because new email cannot be applied to existing account. Please contact support. (ERR_CODE_005)": undefined;
-        "Cannot sign in / up due to security reasons. Please try a different login method or contact support. (ERR_CODE_006)": undefined;
     };
 };
diff --git a/lib/build/recipe/thirdpartypasswordless/components/themes/translations.d.ts b/lib/build/recipe/thirdpartypasswordless/components/themes/translations.d.ts
index b24b59e60..dbe4e941e 100644
--- a/lib/build/recipe/thirdpartypasswordless/components/themes/translations.d.ts
+++ b/lib/build/recipe/thirdpartypasswordless/components/themes/translations.d.ts
@@ -57,8 +57,6 @@ export declare const defaultTranslationsThirdPartyPasswordless: {
         "Failed to generate a one time code. Please try again": undefined;
         "Phone number is invalid": undefined;
         "Email is invalid": undefined;
-        "Cannot sign in / up due to security reasons. Please try a different login method or contact support. (ERR_CODE_002)": undefined;
-        "Cannot sign in / up due to security reasons. Please try a different login method or contact support. (ERR_CODE_003)": undefined;
         BRANDING_POWERED_BY_START: string;
         BRANDING_POWERED_BY_END: string;
         SOMETHING_WENT_WRONG_ERROR: string;
@@ -71,8 +69,5 @@ export declare const defaultTranslationsThirdPartyPasswordless: {
         THIRD_PARTY_PROVIDER_DEFAULT_BTN_START: string;
         THIRD_PARTY_PROVIDER_DEFAULT_BTN_END: string;
         THIRD_PARTY_ERROR_NO_EMAIL: string;
-        "Cannot sign in / up due to security reasons. Please try a different login method or contact support. (ERR_CODE_004)": undefined;
-        "Cannot sign in / up because new email cannot be applied to existing account. Please contact support. (ERR_CODE_005)": undefined;
-        "Cannot sign in / up due to security reasons. Please try a different login method or contact support. (ERR_CODE_006)": undefined;
     };
 };
diff --git a/lib/build/types.d.ts b/lib/build/types.d.ts
index 93605a26e..ad8f5fb88 100644
--- a/lib/build/types.d.ts
+++ b/lib/build/types.d.ts
@@ -90,6 +90,7 @@ export declare type FormFieldBaseConfig = {
     label: string;
     placeholder?: string;
     getDefaultValue?: () => string;
+    nonOptionalErrorMsg?: string;
 };
 export declare type FormField = FormFieldBaseConfig & {
     validate?: (value: any) => Promise<string | undefined>;
@@ -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/components/library/formBase.tsx b/lib/ts/recipe/emailpassword/components/library/formBase.tsx
index f9d5e201b..d532a325b 100644
--- a/lib/ts/recipe/emailpassword/components/library/formBase.tsx
+++ b/lib/ts/recipe/emailpassword/components/library/formBase.tsx
@@ -251,10 +251,18 @@ 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);
+                                // replace non-optional server error message from nonOptionalErrorMsg
+                                if (fieldConfigData?.nonOptionalErrorMsg !== undefined) {
+                                    return fieldConfigData?.nonOptionalErrorMsg;
+                                }
+                            }
+                            return errorMessage;
+                        };
+                        setFieldStates((os) => os.map((fs) => ({ ...fs, error: getErrorMessage(fs) })));
                     }
                 }
             } catch (e) {
diff --git a/lib/ts/recipe/emailpassword/utils.ts b/lib/ts/recipe/emailpassword/utils.ts
index 6220af0c5..c289b8653 100644
--- a/lib/ts/recipe/emailpassword/utils.ts
+++ b/lib/ts/recipe/emailpassword/utils.ts
@@ -338,11 +338,18 @@ export function mergeFormFields(
 }
 
 export function getFormattedFormField(field: NormalisedFormField): NormalisedFormField {
+    // Fields with the 'nonOptionalErrorMsg' property must have a valid message defined
+    if (field.optional === false && field.nonOptionalErrorMsg === "") {
+        throw new Error(`nonOptionalErrorMsg for field ${field.id} cannot be an empty string`);
+    }
     return {
         ...field,
         validate: async (value: any): Promise<string | undefined> => {
             // Absent or not optional empty field
             if (value === "" && field.optional === false) {
+                if (field.nonOptionalErrorMsg !== undefined) {
+                    return field.nonOptionalErrorMsg;
+                }
                 return "ERROR_NON_OPTIONAL";
             }
 
diff --git a/lib/ts/types.ts b/lib/ts/types.ts
index 16beba60b..0f7771175 100644
--- a/lib/ts/types.ts
+++ b/lib/ts/types.ts
@@ -227,6 +227,11 @@ export type FormFieldBaseConfig = {
      *Ability to provide default value to input field.
      */
     getDefaultValue?: () => string;
+
+    /*
+     * Error message for non optional field.
+     */
+    nonOptionalErrorMsg?: string;
 };
 
 export type FormField = FormFieldBaseConfig & {
@@ -279,6 +284,11 @@ export type NormalisedFormField = {
      */
     optional: boolean;
 
+    /*
+     * Error message for non optional field.
+     */
+    nonOptionalErrorMsg?: string;
+
     /*
      * Autocomplete input.
      */
diff --git a/test/end-to-end/signin.test.js b/test/end-to-end/signin.test.js
index 44c474c6d..160a66c09 100644
--- a/test/end-to-end/signin.test.js
+++ b/test/end-to-end/signin.test.js
@@ -758,6 +758,50 @@ 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 () {
+            await page.evaluate(() => localStorage.removeItem("SHOW_SIGNIN_DEFAULT_FIELDS"));
+
+            // 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",
+            });
+
+            let apiCallMade = false;
+
+            const requestHandler = (request) => {
+                const url = request.url();
+                if (url === SIGN_IN_API) {
+                    apiCallMade = true;
+                    request.continue();
+                } else {
+                    request.continue();
+                }
+            };
+
+            await page.setRequestInterception(true);
+            page.on("request", requestHandler);
+
+            try {
+                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"]);
+            } finally {
+                page.off("request", requestHandler);
+                await page.setRequestInterception(false);
+            }
+
+            if (apiCallMade) {
+                throw new Error("Empty form making API request to signin");
+            }
+        });
+    });
 });
 
 describe("SuperTokens SignIn => Server Error", function () {
diff --git a/test/end-to-end/signup.test.js b/test/end-to-end/signup.test.js
index 829ad2c4f..1285e6ec0 100644
--- a/test/end-to-end/signup.test.js
+++ b/test/end-to-end/signup.test.js
@@ -378,7 +378,7 @@ describe("SuperTokens SignUp", function () {
             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,100 @@ describe("SuperTokens SignUp", function () {
                 throw new Error("test failed");
             }
         });
+
+        it("Check on blank form submit nonOptionalErrorMsg gets displayed as expected", async function () {
+            let apiCallMade = false;
+
+            const requestHandler = (request) => {
+                const url = request.url();
+                if (url === SIGN_UP_API) {
+                    apiCallMade = true;
+                    request.continue();
+                } else {
+                    request.continue();
+                }
+            };
+
+            await page.setRequestInterception(true);
+            page.on("request", requestHandler);
+
+            try {
+                // Fill and submit the form with custom fields
+                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",
+                ]);
+            } finally {
+                page.off("request", requestHandler);
+                await page.setRequestInterception(false);
+            }
+
+            if (apiCallMade) {
+                throw new Error("Empty form making API request to sign-up");
+            }
+        });
+
+        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
@@ -612,6 +706,7 @@ describe("SuperTokens SignUp", function () {
         });
 
         it("Check if incorrect getDefaultValue throws error", async function () {
+            await page.evaluate(() => window.localStorage.setItem("INCORRECT_GETDEFAULT", "YES"));
             let pageErrorMessage = "";
             page.on("pageerror", (err) => {
                 pageErrorMessage = err.message;
@@ -630,6 +725,7 @@ describe("SuperTokens SignUp", function () {
         });
 
         it("Check if non-string params to onChange throws error", async function () {
+            await page.evaluate(() => window.localStorage.removeItem("INCORRECT_GETDEFAULT"));
             await page.evaluate(() => window.localStorage.setItem("INCORRECT_ONCHANGE", "YES"));
             await page.reload({
                 waitUntil: "domcontentloaded",
@@ -651,6 +747,30 @@ describe("SuperTokens SignUp", function () {
                 `Expected "${expectedErrorMessage}" to be included in page-error`
             );
         });
+
+        it("Check if empty string for nonOptionalErrorMsg throws error", async function () {
+            const expectedErrorMessage = "nonOptionalErrorMsg for field city cannot be an empty string";
+            let pageErrorMessage = "";
+            page.on("pageerror", (err) => {
+                pageErrorMessage = err.message;
+            });
+
+            await page.evaluate(() => window.localStorage.removeItem("INCORRECT_GETDEFAULT"));
+            await page.evaluate(() => window.localStorage.removeItem("INCORRECT_ONCHANGE"));
+            await page.evaluate(() => window.localStorage.setItem("INCORRECT_NON_OPTIONAL_ERROR_MSG", "YES"));
+            await page.reload({
+                waitUntil: "domcontentloaded",
+            });
+
+            if (pageErrorMessage !== "") {
+                assert(
+                    pageErrorMessage.includes(expectedErrorMessage),
+                    `Expected "${expectedErrorMessage}" to be included in page-error`
+                );
+            } else {
+                throw "Empty nonOptionalErrorMsg should throw error";
+            }
+        });
     });
 });
 
diff --git a/test/with-typescript/src/App.tsx b/test/with-typescript/src/App.tsx
index c06d3fff7..b90e41e78 100644
--- a/test/with-typescript/src/App.tsx
+++ b/test/with-typescript/src/App.tsx
@@ -343,6 +343,7 @@ function getEmailPasswordConfigs() {
                     {
                         id: "email",
                         label: "Email",
+                        nonOptionalErrorMsg: "Please add your email",
                         getDefaultValue: () => "abc@xyz.com",
                     },
                 ],
@@ -384,6 +385,7 @@ function getEmailPasswordConfigs() {
                         id: "terms",
                         label: "",
                         optional: false,
+                        nonOptionalErrorMsg: "Please check Terms and conditions",
                         getDefaultValue: () => "true",
                         inputComponent: (inputProps) => (
                             <div