diff --git a/apps/meteor/client/hooks/iframe/useIframe.ts b/apps/meteor/client/hooks/iframe/useIframe.ts index 8f0e205624172..076a5b9ce5160 100644 --- a/apps/meteor/client/hooks/iframe/useIframe.ts +++ b/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(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, diff --git a/apps/meteor/client/views/root/MainLayout/LoginPage.tsx b/apps/meteor/client/views/root/MainLayout/LoginPage.tsx index 346ee0b39329e..65d0f3d048cf9 100644 --- a/apps/meteor/client/views/root/MainLayout/LoginPage.tsx +++ b/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