Merge branch 'master' into HEAD

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 (