From f15e92a306c26b7cabd580f2d28764f9e27b99bd Mon Sep 17 00:00:00 2001
From: gbuomprisco <giancarlopsk@gmail.com>
Date: Mon, 17 Jun 2024 12:30:20 +0800
Subject: [PATCH] Adjust MFA factor fetching and verification process

This commit refines the Multi-Factor Authentication (MFA) handling by removing 'requireUser' method, optimizing 'useFetchMfaFactors' hook to avoid fetching stale data, and improving error logging. The changes enhance the system's user session management and the MFA challenge response, ensuring smoother user experience and potential troubleshooting.
---
 apps/web/app/auth/verify/page.tsx               | 17 ++++++++++-------
 .../mfa/multi-factor-auth-setup-dialog.tsx      | 10 ++++++++--
 .../multi-factor-challenge-container.tsx        |  1 -
 .../supabase/src/hooks/use-fetch-mfa-factors.ts |  1 +
 4 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/apps/web/app/auth/verify/page.tsx b/apps/web/app/auth/verify/page.tsx
index a1977ecf6..8cf078c30 100644
--- a/apps/web/app/auth/verify/page.tsx
+++ b/apps/web/app/auth/verify/page.tsx
@@ -2,7 +2,6 @@ import { redirect } from 'next/navigation';
 
 import { MultiFactorChallengeContainer } from '@kit/auth/mfa';
 import { checkRequiresMultiFactorAuthentication } from '@kit/supabase/check-requires-mfa';
-import { requireUser } from '@kit/supabase/require-user';
 import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
 
 import pathsConfig from '~/config/paths.config';
@@ -25,6 +24,15 @@ export const generateMetadata = async () => {
 
 async function VerifyPage(props: Props) {
   const client = getSupabaseServerComponentClient();
+
+  const {
+    data: { user },
+  } = await client.auth.getUser();
+
+  if (!user) {
+    redirect(pathsConfig.auth.signIn);
+  }
+
   const needsMfa = await checkRequiresMultiFactorAuthentication(client);
 
   if (!needsMfa) {
@@ -32,15 +40,10 @@ async function VerifyPage(props: Props) {
   }
 
   const redirectPath = props.searchParams.next ?? pathsConfig.app.home;
-  const auth = await requireUser(client);
-
-  if (auth.error) {
-    redirect(auth.redirectTo);
-  }
 
   return (
     <MultiFactorChallengeContainer
-      userId={auth.data.id}
+      userId={user.id}
       paths={{
         redirectPath,
       }}
diff --git a/packages/features/accounts/src/components/personal-account-settings/mfa/multi-factor-auth-setup-dialog.tsx b/packages/features/accounts/src/components/personal-account-settings/mfa/multi-factor-auth-setup-dialog.tsx
index 2644c5d68..00dee505c 100644
--- a/packages/features/accounts/src/components/personal-account-settings/mfa/multi-factor-auth-setup-dialog.tsx
+++ b/packages/features/accounts/src/components/personal-account-settings/mfa/multi-factor-auth-setup-dialog.tsx
@@ -292,9 +292,15 @@ function FactorQrCode({
       <FactorNameForm
         onCancel={onCancel}
         onSetFactorName={async (name) => {
-          const data = await enrollFactorMutation.mutateAsync(name);
+          const data = await enrollFactorMutation
+            .mutateAsync(name)
+            .catch((error) => {
+              console.error(error);
 
-          if (!data) {
+              return;
+            });
+
+          if (data === undefined) {
             return setError(true);
           }
 
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 5e97226bd..43a98f057 100644
--- a/packages/features/auth/src/components/multi-factor-challenge-container.tsx
+++ b/packages/features/auth/src/components/multi-factor-challenge-container.tsx
@@ -171,7 +171,6 @@ export function MultiFactorChallengeContainer({
 
 function useVerifyMFAChallenge() {
   const client = useSupabase();
-
   const mutationKey = ['mfa-verify-challenge'];
 
   const mutationFn = async (params: {
diff --git a/packages/supabase/src/hooks/use-fetch-mfa-factors.ts b/packages/supabase/src/hooks/use-fetch-mfa-factors.ts
index 666aef91d..220df7231 100644
--- a/packages/supabase/src/hooks/use-fetch-mfa-factors.ts
+++ b/packages/supabase/src/hooks/use-fetch-mfa-factors.ts
@@ -20,5 +20,6 @@ export function useFetchAuthFactors(userId: string) {
   return useQuery({
     queryKey,
     queryFn,
+    staleTime: 0,
   });
 }