From c0bcced3c08b2be6d5a61076fdf5fb7c2fbee864 Mon Sep 17 00:00:00 2001 From: lebaudantoine Date: Fri, 28 Feb 2025 13:49:34 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(frontend)=20fix=20logout=20issues?= =?UTF-8?q?=20affecting=20support=20and=20analytics=20sessions?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fix logout functionality that was failing in 2 out of 3 scenarios where support and analytics sessions weren't properly closed. Prevents bugs and behavioral issues when enabling feature flags or advanced PostHog features. --- src/frontend/src/features/auth/api/useUser.tsx | 18 ++++++++++++++++-- src/frontend/src/features/auth/index.ts | 1 - .../settings/components/SettingsDialog.tsx | 6 +++--- .../settings/components/tabs/AccountTab.tsx | 6 +++--- src/frontend/src/layout/Header.tsx | 10 +++------- 5 files changed, 25 insertions(+), 16 deletions(-) diff --git a/src/frontend/src/features/auth/api/useUser.tsx b/src/frontend/src/features/auth/api/useUser.tsx index 058f379f..314796ca 100644 --- a/src/frontend/src/features/auth/api/useUser.tsx +++ b/src/frontend/src/features/auth/api/useUser.tsx @@ -3,8 +3,15 @@ import { keys } from '@/api/queryKeys' import { fetchUser } from './fetchUser' import { type ApiUser } from './ApiUser' import { useEffect } from 'react' -import { startAnalyticsSession } from '@/features/analytics/hooks/useAnalytics' -import { initializeSupportSession } from '@/features/support/hooks/useSupport' +import { + startAnalyticsSession, + terminateAnalyticsSession, +} from '@/features/analytics/hooks/useAnalytics' +import { + initializeSupportSession, + terminateSupportSession, +} from '@/features/support/hooks/useSupport' +import { logoutUrl } from '../utils/logoutUrl' /** * returns info about currently logged-in user @@ -30,6 +37,12 @@ export const useUser = ( } }, [query.data]) + const logout = () => { + terminateAnalyticsSession() + terminateSupportSession() + window.location.href = logoutUrl() + } + const isLoggedIn = query.status === 'success' ? query.data !== false : undefined const isLoggedOut = isLoggedIn === false @@ -38,5 +51,6 @@ export const useUser = ( ...query, user: isLoggedOut ? undefined : (query.data as ApiUser | undefined), isLoggedIn, + logout, } } diff --git a/src/frontend/src/features/auth/index.ts b/src/frontend/src/features/auth/index.ts index c08b819e..a3446c50 100644 --- a/src/frontend/src/features/auth/index.ts +++ b/src/frontend/src/features/auth/index.ts @@ -1,4 +1,3 @@ export { useUser } from './api/useUser' export { authUrl } from './utils/authUrl' -export { logoutUrl } from './utils/logoutUrl' export { UserAware } from './components/UserAware' diff --git a/src/frontend/src/features/settings/components/SettingsDialog.tsx b/src/frontend/src/features/settings/components/SettingsDialog.tsx index ed11fde2..2b405119 100644 --- a/src/frontend/src/features/settings/components/SettingsDialog.tsx +++ b/src/frontend/src/features/settings/components/SettingsDialog.tsx @@ -1,14 +1,14 @@ import { Trans, useTranslation } from 'react-i18next' import { useLanguageLabels } from '@/i18n/useLanguageLabels' import { A, Badge, Dialog, type DialogProps, Field, H, P } from '@/primitives' -import { logoutUrl, useUser } from '@/features/auth' +import { useUser } from '@/features/auth' import { ProConnectButton } from '@/components/ProConnectButton' export type SettingsDialogProps = Pick export const SettingsDialog = (props: SettingsDialogProps) => { const { t, i18n } = useTranslation('settings') - const { user, isLoggedIn } = useUser() + const { user, isLoggedIn, logout } = useUser() const { languagesList, currentLanguage } = useLanguageLabels() return ( @@ -23,7 +23,7 @@ export const SettingsDialog = (props: SettingsDialogProps) => { />

- {t('logout', { ns: 'global' })} + {t('logout', { ns: 'global' })}

) : ( diff --git a/src/frontend/src/features/settings/components/tabs/AccountTab.tsx b/src/frontend/src/features/settings/components/tabs/AccountTab.tsx index 77c9f655..73e8d6fd 100644 --- a/src/frontend/src/features/settings/components/tabs/AccountTab.tsx +++ b/src/frontend/src/features/settings/components/tabs/AccountTab.tsx @@ -1,7 +1,7 @@ import { A, Badge, Button, DialogProps, Field, H, P } from '@/primitives' import { Trans, useTranslation } from 'react-i18next' import { useRoomContext } from '@livekit/components-react' -import { logoutUrl, useUser } from '@/features/auth' +import { useUser } from '@/features/auth' import { css } from '@/styled-system/css' import { TabPanel, TabPanelProps } from '@/primitives/Tabs' import { HStack } from '@/styled-system/jsx' @@ -16,7 +16,7 @@ export const AccountTab = ({ id, onOpenChange }: AccountTabProps) => { const { t } = useTranslation('settings') const { saveUsername } = usePersistentUserChoices() const room = useRoomContext() - const { user, isLoggedIn } = useUser() + const { user, isLoggedIn, logout } = useUser() const [name, setName] = useState(room?.localParticipant.name || '') const handleOnSubmit = () => { @@ -51,7 +51,7 @@ export const AccountTab = ({ id, onOpenChange }: AccountTabProps) => { />

- {t('logout', { ns: 'global' })} + {t('logout', { ns: 'global' })}

) : ( diff --git a/src/frontend/src/layout/Header.tsx b/src/frontend/src/layout/Header.tsx index 99f2cb4f..05903238 100644 --- a/src/frontend/src/layout/Header.tsx +++ b/src/frontend/src/layout/Header.tsx @@ -4,14 +4,12 @@ import { HStack, Stack } from '@/styled-system/jsx' import { useTranslation } from 'react-i18next' import { Button } from '@/primitives' import { SettingsButton } from '@/features/settings' -import { logoutUrl, useUser } from '@/features/auth' +import { useUser } from '@/features/auth' import { useMatchesRoute } from '@/navigation/useMatchesRoute' import { FeedbackBanner } from '@/components/FeedbackBanner' import { Menu } from '@/primitives/Menu' import { MenuList } from '@/primitives/MenuList' import { ProConnectButton } from '@/components/ProConnectButton' -import { terminateAnalyticsSession } from '@/features/analytics/hooks/useAnalytics' -import { terminateSupportSession } from '@/features/support/hooks/useSupport' import LogoAsset from '@/assets/logo.svg' @@ -97,7 +95,7 @@ export const Header = () => { const { t } = useTranslation() const isHome = useMatchesRoute('home') const isRoom = useMatchesRoute('room') - const { user, isLoggedIn } = useUser() + const { user, isLoggedIn, logout } = useUser() return ( <> @@ -173,9 +171,7 @@ export const Header = () => { items={[{ value: 'logout', label: t('logout') }]} onAction={(value) => { if (value === 'logout') { - terminateAnalyticsSession() - terminateSupportSession() - window.location.href = logoutUrl() + logout() } }} />