regression: iframe auth api request loop (RocketChat#37021)

Co-authored-by: Tasso Evangelista <2263066+tassoevan@users.noreply.github.com>

Author: yash-rajpal

apps/meteor/client/hooks/iframe/useIframe.ts

@@ -1,5 +1,6 @@
+import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { useLoginWithIframe, useLoginWithToken, useSetting } from '@rocket.chat/ui-contexts';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
 
 export const useIframe = () => {
 	const [iframeLoginUrl, setIframeLoginUrl] = useState<string | undefined>(undefined);
@@ -31,54 +32,48 @@ export const useIframe = () => {
 		[iframeLogin, tokenLogin],
 	);
 
-	const tryLogin = useCallback(
-		async (callback?: (error: Error | null | undefined, result: unknown) => void) => {
-			if (!enabled) {
-				return;
-			}
-
-			let url = accountIframeUrl;
-			let separator = '?';
-			if (url.indexOf('?') > -1) {
-				separator = '&';
-			}
+	const tryLogin = useEffectEvent(async (callback?: (error: Error | null | undefined, result: unknown) => void) => {
+		if (!enabled) {
+			return;
+		}
 
-			if (navigator.userAgent.indexOf('Electron') > -1) {
-				url += `${separator}client=electron`;
-			}
+		let url = accountIframeUrl;
+		let separator = '?';
+		if (url.indexOf('?') > -1) {
+			separator = '&';
+		}
 
-			try {
-				const result = await fetch(apiUrl, {
-					method: apiMethod,
-					headers: undefined,
-					credentials: 'include',
-				});
+		if (navigator.userAgent.indexOf('Electron') > -1) {
+			url += `${separator}client=electron`;
+		}
 
-				if (!result.ok || result.status !== 200) {
-					setIframeLoginUrl(url);
-					callback?.(new Error(), null);
-					return;
-				}
+		try {
+			const result = await fetch(apiUrl, {
+				method: apiMethod,
+				headers: undefined,
+				credentials: 'include',
+			});
 
-				loginWithToken(await result.json(), async (error: Meteor.Error | Meteor.TypedError | Error | null | undefined) => {
-					if (error) {
-						setIframeLoginUrl(url);
-					} else {
-						setIframeLoginUrl(undefined);
-					}
-					callback?.(error, await result.json());
-				});
-			} catch (error) {
+			if (!result.ok || result.status !== 200) {
 				setIframeLoginUrl(url);
-				callback?.(error instanceof Error ? error : undefined, null);
+				callback?.(new Error(), null);
+				return;
 			}
-		},
-		[apiMethod, apiUrl, accountIframeUrl, loginWithToken, enabled],
-	);
 
-	useEffect(() => {
-		tryLogin();
-	}, [tryLogin]);
+			const body = await result.json();
+			loginWithToken(body, async (error: Meteor.Error | Meteor.TypedError | Error | null | undefined) => {
+				if (error) {
+					setIframeLoginUrl(url);
+				} else {
+					setIframeLoginUrl(undefined);
+				}
+				callback?.(error, body);
+			});
+		} catch (error) {
+			setIframeLoginUrl(url);
+			callback?.(error instanceof Error ? error : undefined, null);
+		}
+	});
 
 	return {
 		enabled,

apps/meteor/client/views/root/MainLayout/LoginPage.tsx

@@ -2,6 +2,7 @@ import { useSession } from '@rocket.chat/ui-contexts';
 import type { LoginRoutes } from '@rocket.chat/web-ui-registration';
 import RegistrationRoute from '@rocket.chat/web-ui-registration';
 import type { ReactElement, ReactNode } from 'react';
+import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import LoggedOutBanner from '../../../components/deviceManagement/LoggedOutBanner';
@@ -10,7 +11,15 @@ import { useIframe } from '../../../hooks/iframe/useIframe';
 const LoginPage = ({ defaultRoute, children }: { defaultRoute?: LoginRoutes; children?: ReactNode }): ReactElement => {
 	const { t } = useTranslation();
 	const showForcedLogoutBanner = useSession('forceLogout') as boolean | undefined;
-	const { iframeLoginUrl } = useIframe();
+	const { iframeLoginUrl, tryLogin, enabled: iframeEnabled } = useIframe();
+
+	useEffect(() => {
+		if (!iframeEnabled) {
+			return;
+		}
+
+		tryLogin();
+	}, [tryLogin, iframeEnabled]);
 
 	if (iframeLoginUrl) {
 		return <iframe title={t('Login')} src={iframeLoginUrl} style={{ height: '100%', width: '100%' }} />;