Do all logout actions via webapi which calls authcontext too (#622)

browser-extensions/chrome/src/app/context/WebApiContext.tsx

@@ -16,7 +16,13 @@ export const WebApiProvider: React.FC<{ children: React.ReactNode }> = ({ childr
    */
   useEffect(() : void => {
     const service = new WebApiService(
-      logout
+      (statusError: string | null) => {
+        if (statusError) {
+          logout(statusError);
+        } else {
+          logout();
+        }
+      }
     );
     setWebApiService(service);
   }, [logout]);

browser-extensions/chrome/src/app/pages/CredentialsList.tsx

@@ -7,7 +7,6 @@ import { useLoading } from '../context/LoadingContext';
 import { useWebApi } from '../context/WebApiContext';
 import { VaultResponse } from '../../shared/types/webapi/VaultResponse';
 import ReloadButton from '../components/ReloadButton';
-import { useAuth } from '../context/AuthContext';
 import LoadingSpinner from '../components/LoadingSpinner';
 import { useMinDurationLoading } from '../hooks/useMinDurationLoading';
 
@@ -21,7 +20,6 @@ const CredentialsList: React.FC = () => {
   const [searchTerm, setSearchTerm] = useState('');
   const navigate = useNavigate();
   const { showLoading, hideLoading, setIsInitialLoading } = useLoading();
-  const authContext = useAuth();
 
   /**
    * Loading state with minimum duration for more fluid UX.
@@ -40,13 +38,7 @@ const CredentialsList: React.FC = () => {
     const statusResponse = await webApi.getStatus();
     const statusError = webApi.validateStatusResponse(statusResponse);
     if (statusError !== null) {
-      try {
-        await webApi.logout();
-      } catch (err) {
-        console.error('WebApi logout error:', err);
-      }
-
-      authContext.logout(statusError);
+      await webApi.logout(statusError);
       return;
     }
 
@@ -66,13 +58,7 @@ const CredentialsList: React.FC = () => {
 
       const vaultError = webApi.validateVaultResponse(vaultResponseJson);
       if (vaultError) {
-        try {
-          await webApi.logout();
-        } catch (err) {
-          console.error('WebApi logout error:', err);
-        }
-
-        authContext.logout(vaultError);
+        await webApi.logout(vaultError);
         hideLoading();
         return;
       }
@@ -85,7 +71,7 @@ const CredentialsList: React.FC = () => {
     } catch (err) {
       console.error('Refresh error:', err);
     }
-  }, [dbContext, webApi, authContext, hideLoading]);
+  }, [dbContext, webApi, hideLoading]);
 
   /**
    * Manually refresh the credentials list.

browser-extensions/chrome/src/app/pages/Logout.tsx

@@ -18,13 +18,7 @@ const Logout: React.FC = () => {
      * Perform logout via async method to ensure logout is completed before navigating to home page.
      */
     const performLogout = async () : Promise<void> => {
-      try {
-        await webApi.logout();
-      } catch (err) {
-        console.error('WebApi logout error:', err);
-      }
-
-      await authContext.logout();
+      await webApi.logout();
       navigate('/');
     };
 

browser-extensions/chrome/src/app/pages/Unlock.tsx

@@ -31,13 +31,7 @@ const Unlock: React.FC = () => {
       const statusResponse = await webApi.getStatus();
       const statusError = webApi.validateStatusResponse(statusResponse);
       if (statusError !== null) {
-        try {
-          await webApi.logout();
-        } catch (err) {
-          console.error('WebApi logout error:', err);
-        }
-
-        authContext.logout(statusError);
+        await webApi.logout(statusError);
       }
     };
 

browser-extensions/chrome/src/shared/WebApiService.ts

@@ -19,9 +19,9 @@ export class WebApiService {
   /**
    * Constructor for the WebApiService class.
    *
-   * @param {Function} handleLogout - Function to handle logout.
+   * @param {Function} authContextLogout - Function to handle logout.
    */
-  public constructor(private readonly handleLogout: () => void) { }
+  public constructor(private readonly authContextLogout: (statusError: string | null) => void) { }
 
   /**
    * Get the base URL for the API from settings.
@@ -79,7 +79,7 @@ export class WebApiService {
 
           return parseJson ? retryResponse.json() : retryResponse as unknown as T;
         } else {
-          this.handleLogout();
+          this.authContextLogout(null);
           throw new Error('Session expired');
         }
       }
@@ -126,7 +126,7 @@ export class WebApiService {
       this.updateTokens(tokenResponse.token, tokenResponse.refreshToken);
       return tokenResponse.token;
     } catch {
-      this.handleLogout();
+      this.authContextLogout('Your session has expired. Please login again.');
       return null;
     }
   }
@@ -197,18 +197,26 @@ export class WebApiService {
   }
 
   /**
-   * Logout and revoke tokens via WebApi.
+   * Logout and revoke tokens via WebApi and remove local storage tokens via AuthContext.
    */
-  public async logout(): Promise<void> {
-    const refreshToken = await this.getRefreshToken();
-    if (!refreshToken) {
-      return;
+  public async logout(statusError: string | null = null): Promise<void> {
+    // Logout and revoke tokens via WebApi.
+    try {
+      const refreshToken = await this.getRefreshToken();
+      if (!refreshToken) {
+        return;
+      }
+
+      await this.post('Auth/revoke', {
+        token: await this.getAccessToken(),
+        refreshToken: refreshToken,
+      }, false);
+    } catch (err) {
+      console.error('WebApi logout error:', err);
     }
 
-    await this.post('Auth/revoke', {
-      token: await this.getAccessToken(),
-      refreshToken: refreshToken,
-    }, false);
+    // Logout and remove tokens from local storage via AuthContext.
+    this.authContextLogout(statusError);
   }
 
   /**