Simplify main logout flow to use page redirect (#622)

browser-extensions/chrome/src/app/App.tsx

@@ -9,12 +9,13 @@ import CredentialsList from './pages/CredentialsList';
 import EmailsList from './pages/EmailsList';
 import LoadingSpinner from './components/LoadingSpinner';
 import Home from './pages/Home';
-import './style.css';
 import CredentialDetails from './pages/CredentialDetails';
 import EmailDetails from './pages/EmailDetails';
 import Settings from './pages/Settings';
 import GlobalStateChangeHandler from './components/GlobalStateChangeHandler';
 import { useLoading } from './context/LoadingContext';
+import Logout from './pages/Logout';
+import './style.css';
 
 /**
  * Route configuration.
@@ -44,6 +45,7 @@ const App: React.FC = () => {
     { path: '/emails', element: <EmailsList />, showBackButton: false },
     { path: '/emails/:id', element: <EmailDetails />, showBackButton: true, title: 'Email details' },
     { path: '/settings', element: <Settings />, showBackButton: false },
+    { path: '/logout', element: <Logout />, showBackButton: false },
   ];
 
   useEffect(() => {

browser-extensions/chrome/src/app/components/Layout/UserMenu.tsx

@@ -47,10 +47,7 @@ export const UserMenu: React.FC = () => {
    */
   const onLogout = async () : Promise<void> => {
     showLoading();
-    await authContext.logout();
-    navigate('/', { replace: true });
-    // Delay for 100ms for improved UX
-    await new Promise(resolve => setTimeout(resolve, 100));
+    navigate('/logout', { replace: true });
     hideLoading();
   };
 

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

@@ -2,6 +2,7 @@ import React, { createContext, useContext, useState, useEffect, useCallback, use
 import SqliteClient from '../../shared/SqliteClient';
 import { VaultResponse } from '../../shared/types/webapi/VaultResponse';
 import EncryptionUtility from '../../shared/EncryptionUtility';
+
 type DbContextType = {
   sqliteClient: SqliteClient | null;
   dbInitialized: boolean;

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

@@ -0,0 +1,31 @@
+import React, { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+
+/**
+ * Logout page.
+ */
+const Logout: React.FC = () => {
+  const authContext = useAuth();
+  const navigate = useNavigate();
+
+  /**
+   * Logout and navigate to home page.
+   */
+  useEffect(() => {
+    /**
+     * Perform logout via async method to ensure logout is completed before navigating to home page.
+     */
+    const performLogout = async () : Promise<void> => {
+      await authContext.logout();
+      navigate('/');
+    };
+
+    performLogout();
+  }, [authContext, navigate]);
+
+  // Return null since this is just a functional component that handles logout.
+  return null;
+};
+
+export default Logout;

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

@@ -308,7 +308,7 @@ export class WebApiService {
       /**
        * When the reader has finished loading, convert the result to a Base64 string.
        */
-      reader.onloadend = () : void => {
+      reader.onloadend = (): void => {
         const result = reader.result;
         if (typeof result === 'string') {
           resolve(result.split(',')[1]); // Remove the data URL prefix
@@ -320,7 +320,7 @@ export class WebApiService {
       /**
        * If the reader encounters an error, reject the promise with a proper Error object.
        */
-      reader.onerror = () : void => {
+      reader.onerror = (): void => {
         reject(new Error('Failed to read blob as Data URL'));
       };
       reader.readAsDataURL(blob);