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

@@ -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,
       }}

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);
           }
 

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

packages/supabase/src/hooks/use-fetch-mfa-factors.ts

@@ -20,5 +20,6 @@ export function useFetchAuthFactors(userId: string) {
   return useQuery({
     queryKey,
     queryFn,
+    staleTime: 0,
   });
 }