feat: close session expired dialog in all tabs

The reauthentication of user in multiple tabs works fine.
However the session expired dialog stayed present aand prevented usage of the app.
This is no longer the case

Author: bodnara

libs/perun/services/src/lib/ApiInterceptor.ts

@@ -56,20 +56,23 @@ export class ApiInterceptor implements HttpInterceptor {
     ) {
       const config = getDefaultDialogConfig();
       config.width = '450px';
+      config.id = 'SessionExpirationDialog';
 
       // Skip if the dialog is already open
-      if (this.dialogRefSessionExpiration == null) {
+      if (!this.dialogRefSessionExpiration) {
         this.dialogRefSessionExpiration = this.dialog.open(
           SessionExpirationDialogComponent,
           config
         );
-        this.dialogRefSessionExpiration.afterClosed().subscribe(() => {
-          finalize(() => (this.dialogRefSessionExpiration = undefined));
-          sessionStorage.setItem('auth:redirect', location.pathname);
-          sessionStorage.setItem('auth:queryParams', location.search.substring(1));
-          this.dialog.closeAll();
-          this.oauthService.logOut(true);
-          this.reauthenticate();
+        this.dialogRefSessionExpiration.afterClosed().subscribe((manuallyClosed: boolean) => {
+          finalize(() => (this.dialogRefSessionExpiration = null));
+          // Only for the case when user closed the dialog manually to authenticate
+          // it can be automatically closed in other tabs once user refreshes session
+          if (manuallyClosed) {
+            this.dialog.closeAll();
+            this.oauthService.logOut(true);
+            this.reauthenticate();
+          }
         });
       }
     }

libs/perun/services/src/lib/auth.service.ts

@@ -33,8 +33,22 @@ export class AuthService {
         this.filterShortname = String(params['idpFilter']);
       }
     });
+
+    // The storage event of the Window interface fires when a storage area (localStorage) has been modified in the context of another document.
+    window.addEventListener('storage', this.closeSessionDialogsForOtherTabs);
   }
 
+  closeSessionDialogsForOtherTabs = (event: StorageEvent): void => {
+    // Check if user authenticated in other tab and if so close the session expiration dialog
+    if (event.key === 'access_token' && this.oauthService.hasValidAccessToken()) {
+      this.dialog.openDialogs.forEach((dialog) => {
+        if (dialog.id === 'SessionExpirationDialog') {
+          dialog.close();
+        }
+      });
+    }
+  };
+
   loadOidcConfigData(): void {
     this.oauthService.configure(this.getClientConfig());
   }