🐛(frontend) fix logout issues affecting support and analytics sessions

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

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

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'

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<DialogProps, 'isOpen' | 'onOpenChange'>
 
 export const SettingsDialog = (props: SettingsDialogProps) => {
   const { t, i18n } = useTranslation('settings')
-  const { user, isLoggedIn } = useUser()
+  const { user, isLoggedIn, logout } = useUser()
   const { languagesList, currentLanguage } = useLanguageLabels()
   return (
     <Dialog title={t('dialog.heading')} {...props}>
@@ -23,7 +23,7 @@ export const SettingsDialog = (props: SettingsDialogProps) => {
             />
           </P>
           <P>
-            <A href={logoutUrl()}>{t('logout', { ns: 'global' })}</A>
+            <A onPress={logout}>{t('logout', { ns: 'global' })}</A>
           </P>
         </>
       ) : (

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) => {
             />
           </P>
           <P>
-            <A href={logoutUrl()}>{t('logout', { ns: 'global' })}</A>
+            <A onPress={logout}>{t('logout', { ns: 'global' })}</A>
           </P>
         </>
       ) : (

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()
                       }
                     }}
                   />