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.

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) {