Enforce strict string check on form values, now onChange function for…

… fields only needs value, no need to supply name or id
supertokens · Oct 26, 2023 · 7dc66b8 · 7dc66b8
1 parent 2023dce
commit 7dc66b8
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 15 deletions.
diff --git a/lib/build/emailpassword-shared7.js b/lib/build/emailpassword-shared7.js
diff --git a/lib/build/recipe/emailpassword/components/library/input.d.ts b/lib/build/recipe/emailpassword/components/library/input.d.ts
diff --git a/lib/ts/recipe/emailpassword/components/library/formBase.tsx b/lib/ts/recipe/emailpassword/components/library/formBase.tsx
@@ -120,6 +120,19 @@ export const FormBase: React.FC<FormBaseProps<any>> = (props) => {
                 };
             });
 
+            // field.value must be a string
+            try {
+                const fieldsWithIncorrectValues = apiFields.filter((field) => typeof field.value !== "string");
+                if (fieldsWithIncorrectValues.length > 0) {
+                    const errorFields = fieldsWithIncorrectValues.map(({ id }) => id).join(", ");
+                    throw new Error(`${errorFields} value must be a string`);
+                }
+            } catch (error) {
+                console.error(error);
+                setIsLoading(false);
+                return props.onError("SOMETHING_WENT_WRONG_ERROR");
+            }
+
             const fieldUpdates: FieldState[] = [];
             // Call API.
             try {
@@ -219,7 +232,7 @@ export const FormBase: React.FC<FormBaseProps<any>> = (props) => {
                                     autofocus={field.autofocus}
                                     onInputFocus={onInputFocus}
                                     onInputBlur={onInputBlur}
-                                    onChange={onInputChange}
+                                    onChange={(value) => onInputChange({ id: field.id, value: value })}
                                     hasError={fstate.error !== undefined}
                                 />
                             ) : (
@@ -232,7 +245,7 @@ export const FormBase: React.FC<FormBaseProps<any>> = (props) => {
                                     autoComplete={field.autoComplete}
                                     onInputFocus={onInputFocus}
                                     onInputBlur={onInputBlur}
-                                    onChange={onInputChange}
+                                    onChange={(value) => onInputChange({ id: field.id, value: value })}
                                     autofocus={field.autofocus}
                                     hasError={fstate.error !== undefined}
                                 />

diff --git a/lib/ts/recipe/emailpassword/components/library/input.tsx b/lib/ts/recipe/emailpassword/components/library/input.tsx
@@ -34,7 +34,7 @@ export type InputProps = {
     value: string;
     onInputBlur?: (field: APIFormField) => void;
     onInputFocus?: (field: APIFormField) => void;
-    onChange?: (field: APIFormField) => void;
+    onChange?: (value: string) => void;
 };
 
 const Input: React.FC<InputProps> = ({
@@ -77,10 +77,7 @@ const Input: React.FC<InputProps> = ({
 
     function handleChange(event: ChangeEvent<HTMLInputElement>) {
         if (onChange) {
-            onChange({
-                id: name,
-                value: event.target.value,
-            });
+            onChange(event.target.value);
         }
     }