fix: small test based fixes

supertokens · Nov 6, 2023 · 6b84340 · 6b84340
1 parent 9653c1b
commit 6b84340
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 30 deletions.
diff --git a/lib/ts/recipe/passwordless/components/features/mfa/index.tsx b/lib/ts/recipe/passwordless/components/features/mfa/index.tsx
@@ -110,6 +110,7 @@ export const useFeatureReducer = (): [MFAState, React.Dispatch<MFAAction>] => {
                 case "setError":
                     return {
                         ...oldState,
+                        loaded: true,
                         error: action.error,
                     };
                 case "startLogin":
@@ -259,12 +260,6 @@ export const MFAFeature: React.FC<
     )!;
     useSuccessInAnotherTabChecker(callingConsumeCodeRef, recipeImplementation, state, dispatch, userContext);
 
-    useEffect(() => {
-        if (state.loaded && state.isSetupAllowed === false && state.loginAttemptInfo === undefined) {
-            void MultiFactorAuth.getInstanceOrThrow().redirectToFactorChooser();
-        }
-    }, [state.loaded, state.isSetupAllowed, state.loginAttemptInfo]);
-
     return (
         <ComponentOverrideContext.Provider value={recipeComponentOverrides}>
             <FeatureWrapper
@@ -314,7 +309,6 @@ function useOnLoad(
         [props.recipe, userContext]
     );
     const handleLoadError = React.useCallback(
-        // TODO: Test this, it may show an empty screen in many cases
         () => dispatch({ type: "setError", error: "SOMETHING_WENT_WRONG_ERROR" }),
         [dispatch]
     );
@@ -350,11 +344,15 @@ function useOnLoad(
             if (!loginAttemptInfo) {
                 if (props.contactMethod === "EMAIL") {
                     if (isAlreadySetup && doSetup !== "true") {
-                        // createCode also dispatches the necessary events
-                        await recipeImplementation!.createCode({
-                            email: mfaInfo.email!, // We can assume this is set here, since the mfaInfo states that otp-email has been set up
-                            userContext,
-                        });
+                        try {
+                            // createCode also dispatches the necessary events
+                            await recipeImplementation!.createCode({
+                                email: mfaInfo.email!, // We can assume this is set here, since the mfaInfo states that otp-email has been set up
+                                userContext,
+                            });
+                        } catch (err) {
+                            dispatch({ type: "setError", error: "SOMETHING_WENT_WRONG_ERROR" });
+                        }
                     } else if (!mfaInfo.factors.isAllowedToSetup.includes("otp-email")) {
                         dispatch({
                             type: "load",
@@ -367,11 +365,15 @@ function useOnLoad(
                     }
                 } else {
                     if (isAlreadySetup && doSetup !== "true") {
-                        // createCode also dispatches the necessary events
-                        await recipeImplementation!.createCode({
-                            phoneNumber: mfaInfo.phoneNumber!, // We can assume this is set here, since the mfaInfo states that otp-phone has been set up
-                            userContext,
-                        });
+                        try {
+                            // createCode also dispatches the necessary events
+                            await recipeImplementation!.createCode({
+                                phoneNumber: mfaInfo.phoneNumber!, // We can assume this is set here, since the mfaInfo states that otp-phone has been set up
+                                userContext,
+                            });
+                        } catch (err) {
+                            dispatch({ type: "setError", error: "SOMETHING_WENT_WRONG_ERROR" });
+                        }
                     } else if (!mfaInfo.factors.isAllowedToSetup.includes("otp-phone")) {
                         dispatch({
                             type: "load",

diff --git a/lib/ts/recipe/passwordless/components/themes/mfa/index.tsx b/lib/ts/recipe/passwordless/components/themes/mfa/index.tsx
@@ -62,25 +62,25 @@ const MFATheme: React.FC<MFAProps & { activeScreen: MFAScreens }> = ({
         error: featureState.error,
     };
 
+    if (!featureState.loaded) {
+        return null;
+    }
+
     return activeScreen === MFAScreens.CloseTab ? (
         <CloseTabScreen {...commonProps} />
     ) : activeScreen === MFAScreens.AccessDenied ? (
-        <AccessDeniedScreen useShadowDom={props.config.useShadowDom} error={t(featureState.error!)} />
+        <AccessDeniedScreen useShadowDom={false} error={t(featureState.error!)} />
     ) : (
         <div data-supertokens="container">
             <div data-supertokens="row">
-                {featureState.loaded && (
+                {
                     <React.Fragment>
                         {activeScreen === MFAScreens.UserInputCodeForm ? (
                             <MFAOTPHeader
                                 {...commonProps}
                                 loginAttemptInfo={featureState.loginAttemptInfo!}
                                 isSetupAllowed={featureState.isSetupAllowed}
-                                onBackButtonClicked={() =>
-                                    props.recipeImplementation.clearLoginAttemptInfo({
-                                        userContext: props.userContext,
-                                    })
-                                }
+                                onBackButtonClicked={onBackButtonClicked}
                             />
                         ) : (
                             <MFAHeader
@@ -130,7 +130,7 @@ const MFATheme: React.FC<MFAProps & { activeScreen: MFAScreens }> = ({
                             />
                         ) : null}
                     </React.Fragment>
-                )}
+                }
             </div>
             <SuperTokensBranding />
         </div>
@@ -173,10 +173,9 @@ export function getActiveScreen(props: Pick<MFAProps, "featureState" | "contactM
     } else if (
         props.featureState.error === "PWLESS_MFA_OTP_NOT_ALLOWED_TO_SETUP" ||
         (props.featureState.isSetupAllowed === false && props.featureState.loginAttemptInfo === undefined)
-        // The first condition should always be true if the second one is true, this is here as a "fallback"
     ) {
         return MFAScreens.AccessDenied;
-    } else if (props.featureState.isSetupAllowed !== true && props.featureState.loginAttemptInfo) {
+    } else if (props.featureState.loginAttemptInfo) {
         return MFAScreens.UserInputCodeForm;
     } else if (props.contactMethod === "EMAIL") {
         return MFAScreens.EmailForm;

diff --git a/lib/ts/recipe/passwordless/components/themes/mfa/mfaFooter.tsx b/lib/ts/recipe/passwordless/components/themes/mfa/mfaFooter.tsx
@@ -32,11 +32,11 @@ export const MFAFooter = withOverride(
                 {claim.loading === false && (claim.value?.n.length ?? 0) > 1 && (
                     <div
                         data-supertokens="secondaryText secondaryLinkWithLeftArrow"
-                        onClick={() => props.onFactorChooserButtonClicked}>
+                        onClick={props.onFactorChooserButtonClicked}>
                         {t("PWLESS_MFA_FOOTER_CHOOSER_ANOTHER")}
                     </div>
                 )}
-                <div data-supertokens="secondaryText secondaryLinkWithLeftArrow" onClick={() => props.onSignOutClicked}>
+                <div data-supertokens="secondaryText secondaryLinkWithLeftArrow" onClick={props.onSignOutClicked}>
                     <ArrowLeftIcon color="rgb(var(--palette-textPrimary))" />
                     {t("PWLESS_MFA_FOOTER_LOGOUT")}
                 </div>

diff --git a/lib/ts/recipe/passwordless/components/themes/mfa/mfaOTPFooter.tsx b/lib/ts/recipe/passwordless/components/themes/mfa/mfaOTPFooter.tsx
@@ -54,7 +54,7 @@ export const MFAOTPFooter = withOverride(
                     (claim.value?.n.length ?? 0) > 1 && (
                         <div
                             data-supertokens="secondaryText secondaryLinkWithLeftArrow"
-                            onClick={() => onFactorChooserButtonClicked}>
+                            onClick={onFactorChooserButtonClicked}>
                             {t("PWLESS_MFA_FOOTER_CHOOSER_ANOTHER")}
                         </div>
                     )