saasufy-components 3.26.2 → 3.27.0

package/README.md

@@ -251,6 +251,7 @@ A Saasufy component which integrates with data from Saasufy is known as a `socke
 - `auth-token-name`: Allows you to specify a custom key for your token - This will be used as the key in localStorage. You generally do not need to set this attribute. It is intended for situations were an app has multiple `socket-provider` elements connecting different services with different/separate authentication flows.
 - `disable-tab-sync`: By default, the socket provider synchronizes socket auth state across multiple tabs via localStorage. If this attribute is set, then the socket auth state will not sync automatically and a manual page refresh may be necessary to update to the latest auth state.
 - `socket-options`: Can be used to set options on the inner `socket`. Must be in the format `option1:type1=value1,option2:type2=value2`; the type of each option can be string, boolean or number. If not specified, the default type is string.
+- `disconnect-on-deauth`: If this attribute is set, the underlying socket will be disconnected if the socket becomes unauthenticated. This means that components will not receive real-time updates until the user's next interaction (which will cause the socket to reconnect). If this attribute is not set, the socket will attempt to reconnect immediately after losing authentication.
 
 ### collection-browser
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "saasufy-components",
-  "version": "3.26.2",
+  "version": "3.27.0",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {

package/socket.js

@@ -120,9 +120,18 @@ export class SocketProvider extends HTMLElement {
     }
     let disableTabSync = this.hasAttribute('disable-tab-sync');
     if (!disableTabSync) {
-      this.storageChangeWatcher = (event) => {
+      this.storageChangeWatcher = async (event) => {
         if (event.storageArea === window.localStorage && event.key === this.saasufySocket.options.authTokenName) {
-          this.saasufySocket.reconnect();
+          if (event.newValue == null) {
+            await this.saasufySocket.deauthenticate();
+            if (this.hasAttribute('disconnect-on-deauth')) {
+              this.saasufySocket.disconnect(1000, 'log-out');
+            } else {
+              this.saasufySocket.reconnect(1000, 'log-out');
+            }
+          } else {
+            this.saasufySocket.reconnect(1000, 'log-out');
+          }
         }
       };
       window.addEventListener('storage', this.storageChangeWatcher);