From 992d7e33038d81d7938ed6c6f90fbfc0302a9bed Mon Sep 17 00:00:00 2001
From: Mo Tarbin <mhed.t91@gmail.com>
Date: Wed, 7 May 2025 00:21:36 -0400
Subject: [PATCH] fix: update ApiManager to handle navigation on 401
 Unauthorized responses and navigation for login

---
 src/App.jsx                | 10 +++++++---
 src/utils/TokenManager.jsx | 11 +++++++++++
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 7310ae1..41570b9 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -3,7 +3,7 @@ import { Button, Snackbar, Typography, useColorScheme } from '@mui/joy'
 import Tracker from '@openreplay/tracker'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { useEffect, useState } from 'react'
-import { Outlet } from 'react-router-dom'
+import { Outlet, useNavigate } from 'react-router-dom'
 import { useRegisterSW } from 'virtual:pwa-register/react'
 import { registerCapacitorListeners } from './CapacitorListener'
 import { UserContext } from './contexts/UserContext'
@@ -23,7 +23,8 @@ const remove = className => {
 const intervalMS = 5 * 60 * 1000 // 5 minutes
 
 function App() {
-  startApiManager()
+  const navigate = useNavigate()
+  startApiManager(navigate)
   startOpenReplay()
   const queryClient = new QueryClient()
   const { mode, systemMode } = useColorScheme()
@@ -129,6 +130,9 @@ const startOpenReplay = () => {
 }
 export default App
 
-const startApiManager = () => {
+const startApiManager = navigate => {
   apiManager.init()
+  apiManager.setNavigateToLogin(() => {
+    navigate('/login')
+  })
 }
diff --git a/src/utils/TokenManager.jsx b/src/utils/TokenManager.jsx
index 877ece5..ad8378a 100644
--- a/src/utils/TokenManager.jsx
+++ b/src/utils/TokenManager.jsx
@@ -11,6 +11,7 @@ class ApiManager {
   constructor() {
     this.customServerURL = `${API_URL}/api/v1`
     this.initialized = false
+    this.navigateToLogin = () => {}
   }
 
   async init() {
@@ -35,6 +36,9 @@ class ApiManager {
     this.customServerURL = url
     this.init()
   }
+  setNavigateToLogin(callback) {
+    this.navigateToLogin = callback
+  }
 }
 
 export const apiManager = new ApiManager()
@@ -68,6 +72,13 @@ export async function Fetch(url, options) {
       const optionsHash = murmurhash.v3(JSON.stringify(options))
       await localStore.saveToCache(fullURL + optionsHash, data)
       networkManager.setOnline()
+    } else if (response.status === 401) {
+      // Handle 401 Unauthorized
+      const errorData = await response.json()
+      console.error('Unauthorized:', errorData)
+      localStorage.removeItem('ca_token')
+      localStorage.removeItem('ca_expiration')
+      apiManager.navigateToLogin()
     } else if (
       response.status === 503 ||
       response.type === 'opaque' ||