From f8d8df6beb441093f7ecf07f4bde34c309344d6e Mon Sep 17 00:00:00 2001
From: Aleksandar Petkov <sashko506@gmail.com>
Date: Thu, 27 Jul 2023 18:20:32 +0300
Subject: [PATCH] [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           | 33 ++++++++++++++++---
 .../client/auth/profile/ProfilePage.tsx       | 12 +++++++
 2 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/src/common/util/useCurrentPerson.ts b/src/common/util/useCurrentPerson.ts
index 691c8cab4..a68bb231c 100644
--- a/src/common/util/useCurrentPerson.ts
+++ b/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() {
diff --git a/src/components/client/auth/profile/ProfilePage.tsx b/src/components/client/auth/profile/ProfilePage.tsx
index 264c0ce1e..a53bc3e28 100644
--- a/src/components/client/auth/profile/ProfilePage.tsx
+++ b/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 (