Add updated callAPI functions for signup

Author: deepjyoti30-st

lib/ts/recipe/emailpassword/components/library/functions/form.ts

@@ -18,16 +18,20 @@ export const handleFormSubmit = async ({
     updateFieldState,
 }: FormOnSubmitParameters<any>): Promise<void> => {
     // Prevent default event propagation.
-    e.preventDefault();
+    e?.preventDefault();
 
     // Set loading state.
-    setIsLoading(true);
+    if (setIsLoading) {
+        setIsLoading(true);
+    }
 
-    setFieldStates((os) => os.map((fs) => ({ ...fs, error: undefined })));
+    if (setFieldStates) {
+        setFieldStates((os) => os.map((fs) => ({ ...fs, error: undefined })));
+    }
 
     // Get the fields values from form.
-    const apiFields = formFields.map((field) => {
-        const fieldState = fieldStates.find((fs) => fs.id === field.id);
+    const apiFields = formFields?.map((field) => {
+        const fieldState = fieldStates?.find((fs) => fs.id === field.id);
         return {
             id: field.id,
             value: fieldState === undefined ? "" : fieldState.value,
@@ -41,7 +45,7 @@ export const handleFormSubmit = async ({
         let generalError: STGeneralError | undefined;
         let fetchError: Response | undefined;
         try {
-            result = await callAPI(apiFields, (id, value) => fieldUpdates.push({ id, value }));
+            result = await callAPI(apiFields || [], (id, value) => fieldUpdates.push({ id, value }));
         } catch (e) {
             if (STGeneralError.isThisError(e)) {
                 generalError = e;
@@ -51,14 +55,14 @@ export const handleFormSubmit = async ({
                 throw e;
             }
         }
-        if (unmounting.current.signal.aborted) {
+        if (unmounting?.current.signal.aborted) {
             return;
         }
 
         if (generalError !== undefined || (result !== undefined && result.status !== "OK")) {
-            for (const field of formFields) {
+            for (const field of formFields || []) {
                 const update = fieldUpdates.find((f) => f.id === field.id);
-                if (update || field.clearOnSubmit === true) {
+                if ((update || field.clearOnSubmit === true) && updateFieldState) {
                     // We can do these one by one, it's almost never more than one field
                     updateFieldState(field.id, (os) => ({ ...os, value: update ? update.value : "" }));
                 }
@@ -76,14 +80,16 @@ export const handleFormSubmit = async ({
         } else {
             // If successful
             if (result.status === "OK") {
-                setIsLoading(false);
+                if (setIsLoading) {
+                    setIsLoading(false);
+                }
                 clearError();
                 if (onSuccess !== undefined) {
                     onSuccess(result);
                 }
             }
 
-            if (unmounting.current.signal.aborted) {
+            if (unmounting?.current.signal.aborted) {
                 return;
             }
 
@@ -93,20 +99,24 @@ export const handleFormSubmit = async ({
                 const getErrorMessage = (fs: FieldState) => {
                     const errorMessage = errorFields.find((ef: any) => ef.id === fs.id)?.error;
                     if (errorMessage === "Field is not optional") {
-                        const fieldConfigData = formFields.find((f) => f.id === fs.id);
+                        const fieldConfigData = 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) })));
+                if (setFieldStates) {
+                    setFieldStates((os) => os.map((fs) => ({ ...fs, error: getErrorMessage(fs) })));
+                }
             }
         }
     } catch (e) {
         onError("SOMETHING_WENT_WRONG_ERROR");
     } finally {
-        setIsLoading(false);
+        if (setIsLoading) {
+            setIsLoading(false);
+        }
     }
 };

lib/ts/recipe/emailpassword/components/library/functions/types.ts

@@ -1,12 +1,21 @@
-import type { FormBaseProps } from "../../../types";
+import type { APIFormField } from "../../../../../types";
+import type { FormBaseAPIResponse, FormFieldThemeProps } from "../../../types";
 import type { FieldState } from "../formBase";
 import type { FormEvent } from "react";
 
-export type FormOnSubmitParameters<T> = FormBaseProps<T> & {
-    event: FormEvent;
-    setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
-    setFieldStates: React.Dispatch<React.SetStateAction<FieldState[]>>;
-    fieldStates: FieldState[];
-    unmounting: React.MutableRefObject<AbortController>;
-    updateFieldState: (id: string, update: (os: FieldState) => FieldState) => void;
+export type FormOnSubmitParameters<T> = {
+    event?: FormEvent;
+    setIsLoading?: React.Dispatch<React.SetStateAction<boolean>>;
+    setFieldStates?: React.Dispatch<React.SetStateAction<FieldState[]>>;
+    fieldStates?: FieldState[];
+    unmounting?: React.MutableRefObject<AbortController>;
+    updateFieldState?: (id: string, update: (os: FieldState) => FieldState) => void;
+
+    formFields?: FormFieldThemeProps[];
+    clearError: () => void;
+    onError: (error: string) => void;
+    onFetchError?: (err: Response) => void;
+    onSuccess?: (result: T & { status: "OK" }) => void;
+
+    callAPI: (fields: APIFormField[], setValue: (id: string, value: string) => void) => Promise<FormBaseAPIResponse<T>>;
 };

lib/ts/recipe/webauthn/components/themes/signUp/confirmation.tsx

@@ -27,6 +27,7 @@ export const PasskeyConfirmation = withOverride(
     function PasskeyConfirmation(
         props: SignUpFormProps & {
             email: string;
+            onContinueClick: () => void;
         }
     ): JSX.Element {
         const t = useTranslation();
@@ -39,7 +40,13 @@ export const PasskeyConfirmation = withOverride(
                 </div>
                 <PasskeyFeatureBlocks />
                 <div data-supertokens="passkeyConfirmationFooter">
-                    <Button disabled={false} isLoading={false} type="button" label="WEBAUTHN_EMAIL_CONTINUE_BUTTON" />
+                    <Button
+                        disabled={false}
+                        isLoading={false}
+                        type="button"
+                        onClick={props.onContinueClick}
+                        label="WEBAUTHN_EMAIL_CONTINUE_BUTTON"
+                    />
                     <ContinueWithoutPasskey onClick={props.resetFactorList} />
                 </div>
             </div>

lib/ts/recipe/webauthn/components/themes/signUp/signUpForm.tsx

@@ -18,13 +18,16 @@ import STGeneralError from "supertokens-web-js/utils/error";
 
 import { withOverride } from "../../../../../components/componentOverride/withOverride";
 import { useTranslation } from "../../../../../translation/translationContext";
+import { useUserContext } from "../../../../../usercontext";
 import { Label } from "../../../../emailpassword/components/library";
 import FormBase from "../../../../emailpassword/components/library/formBase";
+import { handleFormSubmit } from "../../../../emailpassword/components/library/functions/form";
 import { defaultEmailValidator } from "../../../../emailpassword/validators";
 
 import { PasskeyConfirmation } from "./confirmation";
 import { ContinueWithoutPasskey } from "./continueWithoutPasskey";
 
+import type { APIFormField } from "../../../../../types";
 import type { ContinueOnSuccessParams, SignUpFormProps } from "../../../types";
 
 export enum SignUpScreen {
@@ -109,6 +112,7 @@ export const SignUpForm = (
     }
 ): JSX.Element | null => {
     const [continueClickResponse, setContinueClickResponse] = useState<ContinueOnSuccessParams | null>(null);
+    const userContext = useUserContext();
 
     const onContinueClickCallback = useCallback(
         (params: ContinueOnSuccessParams) => {
@@ -118,9 +122,35 @@ export const SignUpForm = (
         [setContinueClickResponse, props]
     );
 
+    const callAPI = useCallback(
+        async (_: APIFormField[], __: (id: string, value: string) => any) => {
+            if (continueClickResponse === null) {
+                throw props.onError("EMAIL_INPUT_NOT_POPULATED_ERROR");
+            }
+
+            return await props.recipeImplementation.registerCredentialWithSignUp({
+                email: continueClickResponse.email,
+                userContext,
+            });
+        },
+        [continueClickResponse, props, userContext]
+    );
+
+    const onConfirmationClick = useCallback(async () => {
+        await handleFormSubmit({
+            callAPI: callAPI,
+            clearError: () => alert("Clearing error"),
+            onError: (error) => console.error("Got error: ", error),
+        });
+    }, [callAPI]);
+
     return props.activeScreen === SignUpScreen.SignUpForm ? (
         <SignUpFormInner {...props} onContinueClick={onContinueClickCallback} />
     ) : props.activeScreen === SignUpScreen.PasskeyConfirmation ? (
-        <PasskeyConfirmation {...props} email={continueClickResponse?.email || ""} />
+        <PasskeyConfirmation
+            {...props}
+            email={continueClickResponse?.email || ""}
+            onContinueClick={onConfirmationClick}
+        />
     ) : null;
 };