feat: added mfa popup for all select org

frontend/src/pages/login/select-organization.tsx

@@ -46,7 +46,9 @@ export default function LoginPage() {
   const [mfaSuccessCallback, setMfaSuccessCallback] = useState<() => void>(() => {});
 
   const queryParams = new URLSearchParams(window.location.search);
+  const orgId = queryParams.get("org_id");
   const callbackPort = queryParams.get("callback_port");
+  const defaultSelectedOrg = organizations.data?.find((org) => org.id === orgId);
 
   const logout = useLogoutUser(true);
   const handleLogout = useCallback(async () => {
@@ -179,6 +181,12 @@ export default function LoginPage() {
     }
   }, [organizations.isLoading, organizations.data]);
 
+  useEffect(() => {
+    if (defaultSelectedOrg) {
+      handleSelectOrganization(defaultSelectedOrg);
+    }
+  }, [defaultSelectedOrg]);
+
   if (userLoading || !user) {
     return <LoadingScreen />;
   }
@@ -193,7 +201,11 @@ export default function LoginPage() {
         <meta name="og:description" content={t("login.og-description") ?? ""} />
       </Head>
       {shouldShowMfa ? (
-        <Mfa successCallback={mfaSuccessCallback} closeMfa={() => toggleShowMfa.off()} />
+        <Mfa
+          email={user.email as string}
+          successCallback={mfaSuccessCallback}
+          closeMfa={() => toggleShowMfa.off()}
+        />
       ) : (
         <div className="mx-auto mt-20 w-fit rounded-lg border-2 border-mineshaft-500 p-10 shadow-lg">
           <Link href="/">

frontend/src/pages/signupinvite.tsx

@@ -23,6 +23,7 @@ import issueBackupKey from "@app/components/utilities/cryptography/issueBackupKe
 import { saveTokenToLocalStorage } from "@app/components/utilities/saveTokenToLocalStorage";
 import SecurityClient from "@app/components/utilities/SecurityClient";
 import { useServerConfig } from "@app/context";
+import { useToggle } from "@app/hooks";
 import {
   completeAccountSignupInvite,
   useSelectOrganization,
@@ -57,6 +58,8 @@ export default function SignupInvite() {
   const [backupKeyIssued, setBackupKeyIssued] = useState(false);
   const [errors, setErrors] = useState<Errors>({});
 
+  const [shouldShowMfa, toggleShowMfa] = useToggle(false);
+  const [mfaSuccessCallback, setMfaSuccessCallback] = useState<() => void>(() => {});
   const router = useRouter();
   const parsedUrl = queryString.parse(router.asPath.split("?")[1]);
   const token = parsedUrl.token as string;
@@ -180,11 +183,24 @@ export default function SignupInvite() {
 
               if (!orgId) throw new Error("You are not part of any organization");
 
-              await selectOrganization({ organizationId: orgId });
+              const completeSignupFlow = async () => {
+                const { token: mfaToken, isMfaEnabled } = await selectOrganization({
+                  organizationId: orgId
+                });
 
-              localStorage.setItem("orgData.id", orgId);
+                if (isMfaEnabled) {
+                  SecurityClient.setMfaToken(mfaToken);
+                  toggleShowMfa.on();
+                  setMfaSuccessCallback(() => completeSignupFlow);
+                  return;
+                }
 
-              setStep(3);
+                localStorage.setItem("orgData.id", orgId);
+
+                setStep(3);
+              };
+
+              await completeSignupFlow();
             } catch (error) {
               setIsLoading(false);
               console.error(error);
@@ -222,11 +238,24 @@ export default function SignupInvite() {
                   SecurityClient.setSignupToken(response.token);
                   setStep(2);
                 } else {
-                  await selectOrganization({ organizationId });
+                  const redirectExistingUser = async () => {
+                    const { token: mfaToken, isMfaEnabled } = await selectOrganization({
+                      organizationId
+                    });
 
-                  // user will be redirected to dashboard
-                  // if not logged in gets kicked out to login
-                  await navigateUserToOrg(router, organizationId);
+                    if (isMfaEnabled) {
+                      SecurityClient.setMfaToken(mfaToken);
+                      toggleShowMfa.on();
+                      setMfaSuccessCallback(() => redirectExistingUser);
+                      return;
+                    }
+
+                    // user will be redirected to dashboard
+                    // if not logged in gets kicked out to login
+                    await navigateUserToOrg(router, organizationId);
+                  };
+
+                  await redirectExistingUser();
                 }
               }
             } catch (err) {