store logged in state in local storage

Author: SuaYoo

frontend/src/utils/AuthService.ts

@@ -182,8 +182,12 @@ export default class AuthService {
     const authState =
       AuthService.getCurrentTabAuth() || (await this.getSharedSessionAuth());
 
-    if (!this.authState && authState) {
-      this.saveLogin(authState);
+    if (authState) {
+      if (!this.authState) {
+        this.saveLogin(authState);
+      }
+    } else {
+      AppStateService.updateAuth(null);
     }
 
     return authState;
@@ -260,20 +264,15 @@ export default class AuthService {
       { signal },
     );
 
-    /**
-     * Assume another tab has logged out if `orgSlug` preference is removed
-     * See FIXME note in state.ts
-     */
+    // Check for storage event so that the auth token can be removed from
+    // session storage if any other other tab is logged out; otherwise,
+    // the token will be refreshed until the original expiration time
     window.addEventListener(
       "storage",
       (e: StorageEvent) => {
-        if (!this.authState) return;
+        if (e.key !== `${STORAGE_KEY_PREFIX}.loggedIn`) return;
 
-        if (
-          e.key === `${STORAGE_KEY_PREFIX}.orgSlug` &&
-          e.oldValue &&
-          !e.newValue
-        ) {
+        if (this.authState && e.oldValue === "true") {
           this.revoke();
         }
       },

frontend/src/utils/state.test.ts

@@ -30,6 +30,7 @@ describe("state", () => {
       const mockAuth = null;
       AppStateService.updateAuth(mockAuth);
       expect(AppStateService.appState.auth).to.equal(mockAuth);
+      expect(AppStateService.appState.loggedIn).to.equal(false);
     });
 
     it("updates valid auth", () => {
@@ -40,6 +41,7 @@ describe("state", () => {
       };
       AppStateService.updateAuth(mockAuth);
       expect(AppStateService.appState.auth).to.equal(mockAuth);
+      expect(AppStateService.appState.loggedIn).to.equal(true);
     });
 
     it("does not update invalid auth", () => {

frontend/src/utils/state.ts

@@ -35,18 +35,16 @@ export function makeAppStateService() {
     @options(persist(window.localStorage))
     userPreferences: UserPreferences | null = null;
 
-    // TODO persist here
+    // TODO persist here instead of in AuthService
     auth: Auth | null = null;
 
+    // Store logged-in flag in local storage so that tabs know whether to
+    // check auth again when focused
+    @options(persist(window.localStorage))
+    loggedIn: boolean | null = null;
+
     // Store user's org slug preference in local storage in order to redirect
     // to the most recently visited org on next log in.
-    //
-    // FIXME Since the org slug preference is removed on log out, AuthService
-    // currently checks whether `orgSlug` is being removed in a `storage`
-    // event to determine whether another tab has logged out.
-    // It's not the cleanest solution to use `orgSlug` as a cross-tab logout
-    // event, so we may want to refactor this in the future.
-    //
     // TODO move to `userPreferences`
     @options(persist(window.localStorage))
     orgSlug: string | null = null;
@@ -103,11 +101,13 @@ export function makeAppStateService() {
       appState.settings = settings;
     }
 
+    @transaction()
     @unlock()
     updateAuth(authState: AppState["auth"]) {
       authSchema.nullable().parse(authState);
 
       appState.auth = authState;
+      appState.loggedIn = Boolean(authState);
     }
 
     @transaction()
@@ -188,6 +188,7 @@ export function makeAppStateService() {
 
     private _resetUser() {
       appState.auth = null;
+      appState.loggedIn = null;
       appState.userInfo = null;
       appState.userPreferences = null;
       appState.orgSlug = null;