feat: enhance user profile management and MFA login flow

- Refactor user profile loading and updating logic to improve state management and reduce unnecessary checks.
- Update MFA login gate to streamline verification checks and improve user experience.
- Ensure consistent handling of user ID across profile context and components.
- Improve error handling and loading states in user-related API calls.

frontend/src/app/components/shared/MfaLoginGate.tsx

@@ -20,20 +20,30 @@ export function MfaLoginGate({ children }: { children: ReactNode }) {
     const isVerifyPage = pathname === "/verify-mfa";
 
     useEffect(() => {
-        if (!user || loading || !profile?.mfaOnLogin) {
+        if (!user) {
+            setGateState("idle");
+            return;
+        }
+        if (loading) {
+            return;
+        }
+        if (!profile?.mfaOnLogin) {
             setGateState("idle");
             return;
         }
 
+        if (hasRecentMfaVerification()) {
+            setGateState("verified");
+            return;
+        }
+
         let cancelled = false;
-        setGateState("checking");
+        setGateState((previous) =>
+            previous === "verified" ? "verified" : "checking",
+        );
 
         async function checkLoginMfa() {
             try {
-                if (hasRecentMfaVerification()) {
-                    if (!cancelled) setGateState("verified");
-                    return;
-                }
                 const required = await needsMfaVerification();
                 if (cancelled) return;
                 setGateState(required ? "required" : "verified");
@@ -47,7 +57,7 @@ export function MfaLoginGate({ children }: { children: ReactNode }) {
         return () => {
             cancelled = true;
         };
-    }, [loading, profile?.mfaOnLogin, user]);
+    }, [loading, profile?.mfaOnLogin, user?.id]);
 
     useEffect(() => {
         if (!user || loading || !profile?.mfaOnLogin) return;
@@ -75,7 +85,13 @@ export function MfaLoginGate({ children }: { children: ReactNode }) {
         user,
     ]);
 
-    if (user && loading) return <FullScreenGateLoader />;
+    if (user && loading) {
+        return gateState === "verified" ? (
+            <>{children}</>
+        ) : (
+            <FullScreenGateLoader />
+        );
+    }
 
     if (user && profile?.mfaOnLogin) {
         if (gateState === "required" && isVerifyPage) {

frontend/src/contexts/UserProfileContext.tsx

@@ -96,6 +96,7 @@ export function UserProfileProvider({ children }: { children: ReactNode }) {
     const { user, isAuthenticated } = useAuth();
     const [profile, setProfile] = useState<UserProfile | null>(null);
     const [loading, setLoading] = useState(true);
+    const userId = user?.id ?? null;
 
     const loadProfile = useCallback(async () => {
         try {
@@ -125,14 +126,14 @@ export function UserProfileProvider({ children }: { children: ReactNode }) {
     }, []);
 
     useEffect(() => {
-        if (isAuthenticated && user) {
+        if (isAuthenticated && userId) {
             setLoading(true);
             loadProfile();
         } else {
             setProfile(null);
             setLoading(false);
         }
-    }, [isAuthenticated, user, loadProfile]);
+    }, [isAuthenticated, userId, loadProfile]);
 
     const updateDisplayName = useCallback(
         async (displayName: string): Promise<boolean> => {
@@ -241,10 +242,10 @@ export function UserProfileProvider({ children }: { children: ReactNode }) {
     );
 
     const reloadProfile = useCallback(async () => {
-        if (user) {
+        if (userId) {
             await loadProfile();
         }
-    }, [user, loadProfile]);
+    }, [userId, loadProfile]);
 
     const incrementMessageCredits = useCallback(async (): Promise<boolean> => {
         if (!user || !profile) {