misc: addressed signupinvite issue

frontend/src/pages/signupinvite.tsx

@@ -29,8 +29,10 @@ import {
   useSelectOrganization,
   verifySignupInvite
 } from "@app/hooks/api/auth/queries";
+import { MfaMethod } from "@app/hooks/api/auth/types";
 import { fetchOrganizations } from "@app/hooks/api/organization/queries";
 import { navigateUserToOrg } from "@app/views/Login/Login.utils";
+import { Mfa } from "@app/views/Login/Mfa";
 
 // eslint-disable-next-line new-cap
 const client = new jsrp.client();
@@ -59,6 +61,7 @@ export default function SignupInvite() {
   const [errors, setErrors] = useState<Errors>({});
 
   const [shouldShowMfa, toggleShowMfa] = useToggle(false);
+  const [requiredMfaMethod, setRequiredMfaMethod] = useState(MfaMethod.EMAIL);
   const [mfaSuccessCallback, setMfaSuccessCallback] = useState<() => void>(() => {});
   const router = useRouter();
   const parsedUrl = queryString.parse(router.asPath.split("?")[1]);
@@ -184,12 +187,19 @@ export default function SignupInvite() {
               if (!orgId) throw new Error("You are not part of any organization");
 
               const completeSignupFlow = async () => {
-                const { token: mfaToken, isMfaEnabled } = await selectOrganization({
+                const {
+                  token: mfaToken,
+                  isMfaEnabled,
+                  mfaMethod
+                } = await selectOrganization({
                   organizationId: orgId
                 });
 
                 if (isMfaEnabled) {
                   SecurityClient.setMfaToken(mfaToken);
+                  if (mfaMethod) {
+                    setRequiredMfaMethod(mfaMethod);
+                  }
                   toggleShowMfa.on();
                   setMfaSuccessCallback(() => completeSignupFlow);
                   return;
@@ -390,12 +400,23 @@ export default function SignupInvite() {
         <title>Sign Up</title>
         <link rel="icon" href="/infisical.ico" />
       </Head>
-      <Link href="/">
+      {shouldShowMfa ? (
-        <div className="mb-4 mt-20 flex justify-center">
+        <Mfa
-          <Image src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical Logo" />
+          email={email}
-        </div>
+          successCallback={mfaSuccessCallback}
-      </Link>
+          method={requiredMfaMethod}
-      {step === 1 ? stepConfirmEmail : step === 2 ? main : step4}
+          closeMfa={() => toggleShowMfa.off()}
+        />
+      ) : (
+        <>
+          <Link href="/">
+            <div className="mb-4 mt-20 flex justify-center">
+              <Image src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical Logo" />
+            </div>
+          </Link>
+          {step === 1 ? stepConfirmEmail : step === 2 ? main : step4}
+        </>
+      )}
     </div>
   );
 }

frontend/src/views/Login/Mfa.tsx

@@ -114,11 +114,7 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
         <TotpRegistration
           onComplete={async () => {
             setShouldShowTotpRegistration(false);
-
             await successCallback();
-            if (closeMfa) {
-              closeMfa();
-            }
           }}
         />
       </div>

frontend/src/views/Login/components/PasswordStep/PasswordStep.tsx

@@ -72,11 +72,11 @@ export const PasswordStep = ({ providerAuthToken, email, password, setPassword }
 
           if (isMfaEnabled) {
             SecurityClient.setMfaToken(token);
+            setMfaSuccessCallback(() => finishWithOrgWorkflow);
             if (mfaMethod) {
               setRequiredMfaMethod(mfaMethod);
             }
             toggleShowMfa.on();
-            setMfaSuccessCallback(() => finishWithOrgWorkflow);
             return;
           }