From 298e70b738ac0feca7b887fadfbf4966a5181892 Mon Sep 17 00:00:00 2001
From: gbuomprisco <giancarlopsk@gmail.com>
Date: Mon, 17 Jun 2024 13:12:40 +0800
Subject: [PATCH] Refactor multi-factor challenge verification logic

This update modifies the multi-factor challenge execution in the auth component. By moving the onSuccess callback directly into the useVerifyMFAChallenge useMutation hook, it simplifies the code and removes unnecessary useCallback use. Also, it reduces the dependency on useEffect to handle the success scenario which enhances readability and maintainability.
---
 .../multi-factor-challenge-container.tsx      | 31 +++++--------------
 1 file changed, 8 insertions(+), 23 deletions(-)

diff --git a/packages/features/auth/src/components/multi-factor-challenge-container.tsx b/packages/features/auth/src/components/multi-factor-challenge-container.tsx
index 43a98f057..ed1e6c8bc 100644
--- a/packages/features/auth/src/components/multi-factor-challenge-container.tsx
+++ b/packages/features/auth/src/components/multi-factor-challenge-container.tsx
@@ -1,8 +1,6 @@
 'use client';
 
-import { useCallback, useEffect } from 'react';
-
-import { useRouter } from 'next/navigation';
+import { useEffect } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
@@ -42,12 +40,11 @@ export function MultiFactorChallengeContainer({
     redirectPath: string;
   };
 }>) {
-  const router = useRouter();
-  const verifyMFAChallenge = useVerifyMFAChallenge();
-
-  const onSuccess = useCallback(() => {
-    router.replace(paths.redirectPath);
-  }, [router, paths.redirectPath]);
+  const verifyMFAChallenge = useVerifyMFAChallenge({
+    onSuccess: () => {
+      window.location.replace(paths.redirectPath);
+    },
+  });
 
   const verificationCodeForm = useForm({
     resolver: zodResolver(
@@ -71,7 +68,6 @@ export function MultiFactorChallengeContainer({
         onSelect={(factorId) => {
           verificationCodeForm.setValue('factorId', factorId);
         }}
-        onSuccess={onSuccess}
       />
     );
   }
@@ -85,8 +81,6 @@ export function MultiFactorChallengeContainer({
             factorId,
             verificationCode: data.verificationCode,
           });
-
-          onSuccess();
         })}
       >
         <div className={'flex flex-col space-y-4'}>
@@ -169,7 +163,7 @@ export function MultiFactorChallengeContainer({
   );
 }
 
-function useVerifyMFAChallenge() {
+function useVerifyMFAChallenge({ onSuccess }: { onSuccess: () => void }) {
   const client = useSupabase();
   const mutationKey = ['mfa-verify-challenge'];
 
@@ -191,16 +185,14 @@ function useVerifyMFAChallenge() {
     return response.data;
   };
 
-  return useMutation({ mutationKey, mutationFn });
+  return useMutation({ mutationKey, mutationFn, onSuccess });
 }
 
 function FactorsListContainer({
-  onSuccess,
   onSelect,
   userId,
 }: React.PropsWithChildren<{
   userId: string;
-  onSuccess: () => void;
   onSelect: (factor: string) => void;
 }>) {
   const signOut = useSignOut();
@@ -208,13 +200,6 @@ function FactorsListContainer({
 
   const isSuccess = factors && !isLoading && !error;
 
-  useEffect(() => {
-    // If there are no factors, continue
-    if (isSuccess && !factors.totp.length) {
-      onSuccess();
-    }
-  }, [factors?.totp.length, isSuccess, onSuccess]);
-
   useEffect(() => {
     // If there is an error, sign out
     if (error) {