handle log out

Author: SuaYoo

frontend/src/index.ts

@@ -1079,6 +1079,7 @@ export class App extends BtrixElement {
 
   private clearUser() {
     this.authService.logout();
+    this.authService.finalize();
     this.authService = new AuthService();
     AppStateService.resetUser();
   }

frontend/src/utils/AuthService.ts

@@ -1,15 +1,11 @@
-import { nanoid } from "nanoid";
-import { z } from "zod";
-
 import { APIError } from "./api";
+import { STORAGE_KEY_PREFIX } from "./persist";
 import { urlForName } from "./router";
 import appState, { AppStateService } from "./state";
 
 import type { APIUser } from "@/index";
 import type { Auth } from "@/types/auth";
 
-const sessionIdSchema = z.string().nanoid();
-type SessionId = z.infer<typeof sessionIdSchema>;
 type AuthState = Auth | null;
 type JWT = {
   user_id: string;
@@ -32,21 +28,16 @@ export type LogOutEventDetail = {
   redirect?: boolean;
 };
 
-type AuthMessage = {
-  responderId?: SessionId;
-  requesterId?: SessionId;
-};
-
-type AuthRequestEventDetail = AuthMessage & {
+type AuthRequestEventDetail = {
   name: "requesting_auth";
 };
 
-type AuthResponseEventDetail = AuthMessage & {
+type AuthResponseEventDetail = {
   name: "responding_auth";
   auth: AuthState;
 };
 
-export type AuthReceivedEventDetail = AuthMessage & {
+export type AuthReceivedEventDetail = {
   name: "auth_received";
 };
 
@@ -66,8 +57,6 @@ const FRESHNESS_TIMER_INTERVAL = 60 * 1000 * 5;
 
 export default class AuthService {
   private timerId?: number;
-  private readonly sessionId: SessionId = nanoid();
-  private broadcastChannel?: BroadcastChannel;
 
   static storageKey = "btrix.auth";
   static unsupportedAuthErrorCode = "UNSUPPORTED_AUTH_TYPE";
@@ -90,6 +79,9 @@ export default class AuthService {
     },
   };
 
+  private broadcastChannel?: BroadcastChannel;
+  private readonly finalizeController = new AbortController();
+
   get authState() {
     return appState.auth;
   }
@@ -221,7 +213,6 @@ export default class AuthService {
     const broadcastPromise = new Promise<AuthState>((resolve) => {
       // Check if there's any authenticated tabs
       this.broadcastChannel?.postMessage({
-        requesterId: this.sessionId,
         name: "requesting_auth",
       } satisfies AuthRequestEventDetail);
       // Wait for another tab to respond
@@ -231,10 +222,9 @@ export default class AuthService {
 
           // Confirm receipt
           this.broadcastChannel?.postMessage({
-            requesterId: this.sessionId,
-            responderId: data.responderId,
             name: "auth_received",
           } satisfies AuthReceivedEventDetail);
+
           resolve(data.auth);
         }
       };
@@ -265,17 +255,48 @@ export default class AuthService {
   }
 
   constructor() {
+    const { signal } = this.finalizeController;
+
     this.broadcastChannel = new BroadcastChannel(AuthService.storageKey);
 
     // Only have freshness check run in visible tab(s)
-    document.addEventListener("visibilitychange", () => {
-      if (!this.authState) return;
-      if (document.visibilityState === "visible") {
-        this.startFreshnessCheck();
-      } else {
-        this.cancelFreshnessCheck();
-      }
-    });
+    document.addEventListener(
+      "visibilitychange",
+      () => {
+        if (!this.authState) return;
+        if (document.visibilityState === "visible") {
+          this.startFreshnessCheck();
+        } else {
+          this.cancelFreshnessCheck();
+        }
+      },
+      { signal },
+    );
+
+    /**
+     * Assume another tab has logged out if `orgSlug` preference is removed
+     * See FIXME note in state.ts
+     */
+    window.addEventListener(
+      "storage",
+      (e: StorageEvent) => {
+        if (!this.authState) return;
+
+        if (
+          e.key === `${STORAGE_KEY_PREFIX}.orgSlug` &&
+          e.oldValue &&
+          !e.newValue
+        ) {
+          this.revoke();
+        }
+      },
+      { signal },
+    );
+  }
+
+  finalize() {
+    this.finalizeController.abort();
+    this.stopSharingSession();
   }
 
   saveLogin(auth: Auth) {
@@ -327,7 +348,6 @@ export default class AuthService {
           if (auth) {
             // A new tab/window opened and is requesting shared auth
             this.broadcastChannel?.postMessage({
-              responderId: this.sessionId,
               name: "responding_auth",
               auth: AuthService.getCurrentTabAuth(),
             } satisfies AuthResponseEventDetail);

frontend/src/utils/persist.ts

@@ -7,7 +7,7 @@ import type {
   StateVar,
 } from "lit-shared-state";
 
-const STORAGE_KEY_PREFIX = "btrix.app";
+export const STORAGE_KEY_PREFIX = "btrix.app";
 
 type ExpiringValue = {
   value: unknown;

frontend/src/utils/state.ts

@@ -39,7 +39,14 @@ export function makeAppStateService() {
     auth: Auth | 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
+    // 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;