[TEMP] Signout user on unauthorized response (#1516)

* ProfilePage.tsx: Signout user on unauthorized response
In some cases the keycloak session expires before the client session, which results in user not being able to see account's data such as donations and profile information.

* useCurrentPerson: Don't retry query if response is 401
There is no need to retry on unauthorized response.

* Run some linting

* useCurrentPerson.ts: Signout user on useCurrentPerson() call

src/common/util/useCurrentPerson.ts

@@ -1,6 +1,6 @@
-import { AxiosResponse } from 'axios'
+import { AxiosError, AxiosResponse } from 'axios'
 import { useQuery } from '@tanstack/react-query'
-import { useSession } from 'next-auth/react'
+import { signOut, useSession } from 'next-auth/react'
 
 import { apiClient } from 'service/apiClient'
 import { endpoints } from 'service/apiEndpoints'
@@ -15,20 +15,45 @@ type CurrentPerson = {
   status: 'unauthenticated'
 }
 
+//Note: Used only for /profile page
 export function getCurrentPerson(isNew = false) {
   const { data: session } = useSession()
-  return useQuery<CurrentPerson>(
+  const query = useQuery<CurrentPerson, AxiosError>(
     [isNew ? endpoints.account.new.url : endpoints.account.me.url],
     authQueryFnFactory<CurrentPerson>(session?.accessToken),
+    {
+      retry: (count, err) => {
+        if (err.isAxiosError && err.response?.status === 401) {
+          return false
+        }
+        return true
+      },
+    },
   )
+  if (query.error && query.error.response?.status === 401)
+    signOut({ redirect: true, callbackUrl: '/login' })
+
+  return query
 }
 
+//Note: Used for every other page
 export function useCurrentPerson() {
   const { data: session } = useSession()
-  return useQuery<CurrentPerson>(
+  const query = useQuery<CurrentPerson, AxiosError>(
     [endpoints.account.me.url],
     authQueryFnFactory<CurrentPerson>(session?.accessToken),
+    {
+      retry: (count, err) => {
+        if (err.isAxiosError && err.response?.status === 401) {
+          return false
+        }
+        return true
+      },
+    },
   )
+  if (query.error && query.error.response?.status === 401) signOut({ redirect: false })
+
+  return query
 }
 
 export function updateCurrentPerson() {

src/components/client/auth/profile/ProfilePage.tsx

@@ -19,6 +19,7 @@ import { routes } from 'common/routes'
 import Layout from 'components/client/layout/Layout'
 
 import { ProfileTabs, ProfileTab, tabs } from './tabs'
+import { getCurrentPerson } from 'common/util/useCurrentPerson'
 
 const PREFIX = 'ProfilePage'
 
@@ -50,6 +51,9 @@ export default function ProfilePage() {
   const router = useRouter()
   const matches = useMediaQuery(theme.breakpoints.down('sm'))
   const currentTab = router.query.slug ?? ProfileTabs.donations
+
+  const { error: userError, isError } = getCurrentPerson(!!router.query?.register)
+
   const tab = useMemo<ProfileTab>(() => {
     return tabs.find((tab) => tab.slug === currentTab) ?? tabs[0]
   }, [currentTab])
@@ -62,6 +66,14 @@ export default function ProfilePage() {
     return <StyledLayout title={t('nav.profile')}>Not authenticated</StyledLayout>
   }
 
+  if (isError && userError.response && userError.response.status === 401) {
+    return (
+      <StyledLayout title={t('nav.profile')}>
+        The user session has expired. Redirecting to login page
+      </StyledLayout>
+    )
+  }
+
   const { Component: SelectedTab } = tab
 
   return (