Fix session replica behaviour (merge with session)

The harder-to-refactor parts are the places where exists/username/token
are called within a React component. However, `resetAndRedirect` and
`store` are already called from async contexts, so adding an `await`
is simple.

This thus merges the logic, keeping localStorage for the components to
call, but making sure reset/store behaviour works correctly for the
replica.

web/src/app/AccountApi.js

@@ -367,7 +367,7 @@ class AccountApi {
     } catch (e) {
       console.log(`[AccountApi] Error fetching account`, e);
       if (e instanceof UnauthorizedError) {
-        session.resetAndRedirect(routes.login);
+        await session.resetAndRedirect(routes.login);
       }
       return undefined;
     }

web/src/app/Session.js

@@ -1,29 +1,36 @@
-import sessionReplica from "./SessionReplica";
+import Dexie from "dexie";
 
 /**
  * Manages the logged-in user's session and access token.
  * The session replica is stored in IndexedDB so that the service worker can access it.
  */
 class Session {
-  constructor(replica) {
-    this.replica = replica;
+  constructor() {
+    const db = new Dexie("session-replica");
+    db.version(1).stores({
+      kv: "&key",
+    });
+    this.db = db;
   }
 
-  store(username, token) {
+  async store(username, token) {
+    await this.db.kv.bulkPut([
+      { key: "user", value: username },
+      { key: "token", value: token },
+    ]);
     localStorage.setItem("user", username);
     localStorage.setItem("token", token);
-    this.replica.store(username, token);
   }
 
-  reset() {
+  async resetAndRedirect(url) {
+    await this.db.delete();
     localStorage.removeItem("user");
     localStorage.removeItem("token");
-    this.replica.reset();
+    window.location.href = url;
   }
 
-  resetAndRedirect(url) {
-    this.reset();
-    window.location.href = url;
+  async usernameAsync() {
+    return (await this.db.kv.get({ key: "user" }))?.value;
   }
 
   exists() {
@@ -39,5 +46,5 @@ class Session {
   }
 }
 
-const session = new Session(sessionReplica);
+const session = new Session();
 export default session;

web/src/app/SessionReplica.js

@@ -1,41 +0,0 @@
-import Dexie from "dexie";
-
-/**
- * Replica of the session in IndexedDB. This is used by the service
- * worker to access the session. This is a bit of a hack.
- */
-class SessionReplica {
-  constructor() {
-    const db = new Dexie("session-replica");
-    db.version(1).stores({
-      kv: "&key",
-    });
-    this.db = db;
-  }
-
-  async store(username, token) {
-    try {
-      await this.db.kv.bulkPut([
-        { key: "user", value: username },
-        { key: "token", value: token },
-      ]);
-    } catch (e) {
-      console.error("[Session] Error replicating session to IndexedDB", e);
-    }
-  }
-
-  async reset() {
-    try {
-      await this.db.delete();
-    } catch (e) {
-      console.error("[Session] Error resetting session on IndexedDB", e);
-    }
-  }
-
-  async username() {
-    return (await this.db.kv.get({ key: "user" }))?.value;
-  }
-}
-
-const sessionReplica = new SessionReplica();
-export default sessionReplica;

web/src/app/db.js

@@ -1,6 +1,5 @@
 import Dexie from "dexie";
 import session from "./Session";
-import sessionReplica from "./SessionReplica";
 
 // Uses Dexie.js
 // https://dexie.org/docs/API-Reference#quick-reference
@@ -23,7 +22,7 @@ const createDatabase = (username) => {
 };
 
 export const dbAsync = async () => {
-  const username = await sessionReplica.username();
+  const username = await session.usernameAsync();
   return createDatabase(username);
 };
 

web/src/components/Account.jsx

@@ -164,7 +164,7 @@ const ChangePasswordDialog = (props) => {
       if (e instanceof IncorrectPasswordError) {
         setError(t("account_basics_password_dialog_current_password_incorrect"));
       } else if (e instanceof UnauthorizedError) {
-        session.resetAndRedirect(routes.login);
+        await session.resetAndRedirect(routes.login);
       } else {
         setError(e.message);
       }
@@ -245,7 +245,7 @@ const AccountType = () => {
     } catch (e) {
       console.log(`[Account] Error opening billing portal`, e);
       if (e instanceof UnauthorizedError) {
-        session.resetAndRedirect(routes.login);
+        await session.resetAndRedirect(routes.login);
       } else {
         setShowPortalError(true);
       }
@@ -371,7 +371,7 @@ const PhoneNumbers = () => {
     } catch (e) {
       console.log(`[Account] Error deleting phone number`, e);
       if (e instanceof UnauthorizedError) {
-        session.resetAndRedirect(routes.login);
+        await session.resetAndRedirect(routes.login);
       }
     }
   };
@@ -447,7 +447,7 @@ const AddPhoneNumberDialog = (props) => {
     } catch (e) {
       console.log(`[Account] Error sending verification`, e);
       if (e instanceof UnauthorizedError) {
-        session.resetAndRedirect(routes.login);
+        await session.resetAndRedirect(routes.login);
       } else {
         setError(e.message);
       }
@@ -464,7 +464,7 @@ const AddPhoneNumberDialog = (props) => {
     } catch (e) {
       console.log(`[Account] Error confirming verification`, e);
       if (e instanceof UnauthorizedError) {
-        session.resetAndRedirect(routes.login);
+        await session.resetAndRedirect(routes.login);
       } else {
         setError(e.message);
       }
@@ -946,7 +946,7 @@ const TokenDialog = (props) => {
     } catch (e) {
       console.log(`[Account] Error creating token`, e);
       if (e instanceof UnauthorizedError) {
-        session.resetAndRedirect(routes.login);
+        await session.resetAndRedirect(routes.login);
       } else {
         setError(e.message);
       }
@@ -1003,7 +1003,7 @@ const TokenDeleteDialog = (props) => {
     } catch (e) {
       console.log(`[Account] Error deleting token`, e);
       if (e instanceof UnauthorizedError) {
-        session.resetAndRedirect(routes.login);
+        await session.resetAndRedirect(routes.login);
       } else {
         setError(e.message);
       }
@@ -1080,13 +1080,13 @@ const DeleteAccountDialog = (props) => {
       await accountApi.delete(password);
       await db().delete();
       console.debug(`[Account] Account deleted`);
-      session.resetAndRedirect(routes.app);
+      await session.resetAndRedirect(routes.app);
     } catch (e) {
       console.log(`[Account] Error deleting account`, e);
       if (e instanceof IncorrectPasswordError) {
         setError(t("account_basics_password_dialog_current_password_incorrect"));
       } else if (e instanceof UnauthorizedError) {
-        session.resetAndRedirect(routes.login);
+        await session.resetAndRedirect(routes.login);
       } else {
         setError(e.message);
       }

web/src/components/ActionBar.jsx

@@ -123,7 +123,7 @@ const ProfileIcon = () => {
       await accountApi.logout();
       await db().delete();
     } finally {
-      session.resetAndRedirect(routes.app);
+      await session.resetAndRedirect(routes.app);
     }
   };
 

web/src/components/Login.jsx

@@ -24,7 +24,7 @@ const Login = () => {
     try {
       const token = await accountApi.login(user);
       console.log(`[Login] User auth for user ${user.username} successful, token is ${token}`);
-      session.store(user.username, token);
+      await session.store(user.username, token);
       window.location.href = routes.app;
     } catch (e) {
       console.log(`[Login] User auth for user ${user.username} failed`, e);

web/src/components/Preferences.jsx

@@ -59,7 +59,7 @@ const maybeUpdateAccountSettings = async (payload) => {
   } catch (e) {
     console.log(`[Preferences] Error updating account settings`, e);
     if (e instanceof UnauthorizedError) {
-      session.resetAndRedirect(routes.login);
+      await session.resetAndRedirect(routes.login);
     }
   }
 };

web/src/components/PublishDialog.jsx

@@ -211,7 +211,7 @@ const PublishDialog = (props) => {
     } catch (e) {
       console.log(`[PublishDialog] Retrieving attachment limits failed`, e);
       if (e instanceof UnauthorizedError) {
-        session.resetAndRedirect(routes.login);
+        await session.resetAndRedirect(routes.login);
       } else {
         setAttachFileError(""); // Reset error (rely on server-side checking)
       }

web/src/components/ReserveDialogs.jsx

@@ -43,7 +43,7 @@ export const ReserveAddDialog = (props) => {
     } catch (e) {
       console.log(`[ReserveAddDialog] Error adding topic reservation.`, e);
       if (e instanceof UnauthorizedError) {
-        session.resetAndRedirect(routes.login);
+        await session.resetAndRedirect(routes.login);
       } else if (e instanceof TopicReservedError) {
         setError(t("subscribe_dialog_error_topic_already_reserved"));
         return;
@@ -99,7 +99,7 @@ export const ReserveEditDialog = (props) => {
     } catch (e) {
       console.log(`[ReserveEditDialog] Error updating topic reservation.`, e);
       if (e instanceof UnauthorizedError) {
-        session.resetAndRedirect(routes.login);
+        await session.resetAndRedirect(routes.login);
       } else {
         setError(e.message);
         return;
@@ -136,7 +136,7 @@ export const ReserveDeleteDialog = (props) => {
     } catch (e) {
       console.log(`[ReserveDeleteDialog] Error deleting topic reservation.`, e);
       if (e instanceof UnauthorizedError) {
-        session.resetAndRedirect(routes.login);
+        await session.resetAndRedirect(routes.login);
       } else {
         setError(e.message);
         return;

web/src/components/Signup.jsx

@@ -27,7 +27,7 @@ const Signup = () => {
       await accountApi.create(user.username, user.password);
       const token = await accountApi.login(user);
       console.log(`[Signup] User signup for user ${user.username} successful, token is ${token}`);
-      session.store(user.username, token);
+      await session.store(user.username, token);
       window.location.href = routes.app;
     } catch (e) {
       console.log(`[Signup] Signup for user ${user.username} failed`, e);

web/src/components/SubscribeDialog.jsx

@@ -39,7 +39,7 @@ export const subscribeTopic = async (baseUrl, topic, opts) => {
     } catch (e) {
       console.log(`[SubscribeDialog] Subscribing to topic ${topic} failed`, e);
       if (e instanceof UnauthorizedError) {
-        session.resetAndRedirect(routes.login);
+        await session.resetAndRedirect(routes.login);
       }
     }
   }
@@ -124,7 +124,7 @@ const SubscribePage = (props) => {
       } catch (e) {
         console.log(`[SubscribeDialog] Error reserving topic`, e);
         if (e instanceof UnauthorizedError) {
-          session.resetAndRedirect(routes.login);
+          await session.resetAndRedirect(routes.login);
         } else if (e instanceof TopicReservedError) {
           setError(t("subscribe_dialog_error_topic_already_reserved"));
           return;

web/src/components/SubscriptionPopup.jsx

@@ -155,7 +155,7 @@ export const SubscriptionPopup = (props) => {
       } catch (e) {
         console.log(`[SubscriptionPopup] Error unsubscribing`, e);
         if (e instanceof UnauthorizedError) {
-          session.resetAndRedirect(routes.login);
+          await session.resetAndRedirect(routes.login);
         }
       }
     }
@@ -298,7 +298,7 @@ const DisplayNameDialog = (props) => {
       } catch (e) {
         console.log(`[SubscriptionSettingsDialog] Error updating subscription`, e);
         if (e instanceof UnauthorizedError) {
-          session.resetAndRedirect(routes.login);
+          await session.resetAndRedirect(routes.login);
         } else {
           setError(e.message);
           return;

web/src/components/UpgradeDialog.jsx

@@ -140,7 +140,7 @@ const UpgradeDialog = (props) => {
     } catch (e) {
       console.log(`[UpgradeDialog] Error changing billing subscription`, e);
       if (e instanceof UnauthorizedError) {
-        session.resetAndRedirect(routes.login);
+        await session.resetAndRedirect(routes.login);
       } else {
         setError(e.message);
       }

web/src/components/hooks.js

@@ -114,7 +114,7 @@ export const useAutoSubscribe = (subscriptions, selected) => {
           } catch (e) {
             console.log(`[Hooks] Auto-subscribing failed`, e);
             if (e instanceof UnauthorizedError) {
-              session.resetAndRedirect(routes.login);
+              await session.resetAndRedirect(routes.login);
             }
           }
         }