Implement SyncStorageService using broadcast-channel

.eslintignore

@@ -1,5 +1,6 @@
 /test/support/xhr
 /test/app/public
+/test/apps/app/public
 node_modules
 /build/dist
 /build/lib

CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 6.7.0
+
+## Features
+
+- [#1197](https://github.com/okta/okta-auth-js/pull/1197)
+  - Changes implementation of `SyncStorageService` using `broadcast-channel` instead of using `StorageEvent`. Supports `localStorage` and `cookie` storage.
+  - Adds `LeaderElectionService` as separate service
+  - Fixes error `Channel is closed` while stopping leader election
+
 ## 6.6.1
 
 ### Fixes

README.md

@@ -234,12 +234,12 @@ var authClient = new OktaAuth(config);
 
 ### Running as a service
 
-By default, creating a new instance of `OktaAuth` will not create any asynchronous side-effects. However, certain features such as [token auto renew](#autorenew), [token auto remove](#autoremove) and [cross-tab synchronization](#syncstorage) require `OktaAuth` to be running as a service. This means timeouts are set in the background which will continue working until the service is stopped.  To start the `OktaAuth` service, simply call the `start` method. To terminate all background processes, call `stop`. See [Service Configuration](#services) for more info.
+By default, creating a new instance of `OktaAuth` will not create any asynchronous side-effects. However, certain features such as [token auto renew](#autorenew), [token auto remove](#autoremove) and [cross-tab synchronization](#syncstorage) require `OktaAuth` to be running as a service. This means timeouts are set in the background which will continue working until the service is stopped.  To start the `OktaAuth` service, simply call the `start` method right after creation and before calling other methods like [handleLoginRedirect](#handleloginredirecttokens). To terminate all background processes, call `stop`. See [Service Configuration](#services) for more info.
 
 ```javascript
   var authClient = new OktaAuth(config);
-  authClient.start(); // start the service
-  authClient.stop(); // stop the service
+  await authClient.start(); // start the service
+  await authClient.stop(); // stop the service
 ```
 
 Starting the service will also call [authStateManager.updateAuthState](#authstatemanagerupdateauthstate).
@@ -829,7 +829,7 @@ When `tokenManager.autoRenew` is `true` both renew strategies are enabled. To di
 By default, the library will attempt to remove expired tokens when `autoRemove` is `true`. If you wish to disable auto removal of tokens, set `autoRemove` to `false`.
 
 #### `syncStorage`
-Automatically syncs tokens across browser tabs when token storage is `localStorage`. To disable this behavior, set `syncStorage` to false.
+Automatically syncs tokens across browser tabs when token storage is `localStorage` or `cookie`. To disable this behavior, set `syncStorage` to false.
 
 This is accomplished by selecting a single tab to handle the network requests to refresh the tokens and broadcasting to the other tabs. This is done to avoid all tabs sending refresh requests simultaneously, which can cause rate limiting/throttling issues.
 
@@ -903,11 +903,15 @@ This is accomplished by selecting a single tab to handle the network requests to
 
 ### `start()`
 
+> :hourglass: async
+
 Starts the `OktaAuth` service. See [running as a service](#running-as-a-service) for more details.
 
 ### `stop()`
 
-Starts the `OktaAuth` service. See [running as a service](#running-as-a-service) for more details.
+> :hourglass: async
+
+Stops the `OktaAuth` service. See [running as a service](#running-as-a-service) for more details.
 
 ### `signIn(options)`
 

jest.server.js

@@ -26,6 +26,7 @@ const config = Object.assign({}, baseConfig, {
     'oidc/renewTokens.ts',
     'TokenManager/browser',
     'SyncStorageService',
+    'LeaderElectionService',
     'ServiceManager'
   ])
 });

lib/AuthStateManager.ts

@@ -15,10 +15,9 @@
 // Do not use this type in code, so it won't be emitted in the declaration output
 import PCancelable from 'p-cancelable';
 import { AuthSdkError } from './errors';
-import { AuthState, AuthStateLogOptions } from './types';
+import { AuthState, AuthStateLogOptions, EVENT_ADDED, EVENT_REMOVED } from './types';
 import { OktaAuth } from '.';
 import { getConsole } from './util';
-import { EVENT_ADDED, EVENT_REMOVED } from './TokenManager';
 import PromiseQueue from './PromiseQueue';
 
 export const INITIAL_AUTH_STATE = null;

lib/OktaAuth.ts

@@ -367,17 +367,22 @@ class OktaAuth implements OktaAuthInterface, SigninAPI, SignoutAPI {
     // AuthStateManager
     this.authStateManager = new AuthStateManager(this);
 
+    // Enable `syncStorage` only if token storage is shared across tabs (type is `localStorage` or `cookie`)
+    if (!this.tokenManager.hasSharedStorage()) {
+      args.services = { ...args.services, syncStorage: false };
+    }
+
     // ServiceManager
     this.serviceManager = new ServiceManager(this, args.services);
   }
 
   async start() {
+    await this.serviceManager.start();
     // TODO: review tokenManager.start
     this.tokenManager.start();
     if (!this.token.isLoginRedirect()) {
-      this.authStateManager.updateAuthState();
+      await this.authStateManager.updateAuthState();
     }
-    await this.serviceManager.start();
   }
 
   async stop() {

lib/SavedObject.ts

@@ -52,6 +52,11 @@ export default class SavedObject implements StorageProvider {
   // StorageProvider interface
   //
 
+  isSharedStorage() {
+    return typeof localStorage !== 'undefined' && this.storageProvider === localStorage as any 
+      || !!this.storageProvider.isSharedStorage?.();
+  }
+
   getStorage() {
     var storageString = this.storageProvider.getItem(this.storageName);
     storageString = storageString || '{}';

lib/ServiceManager.ts

@@ -17,23 +17,20 @@ import {
   ServiceManagerOptions
 } from './types';
 import { OktaAuth } from '.';
-import {
-  BroadcastChannel,
-  createLeaderElection,
-  LeaderElector
-} from 'broadcast-channel';
-import { AutoRenewService, SyncStorageService } from './services';
-import { isBrowser } from './features';
+import { AutoRenewService, SyncStorageService, LeaderElectionService } from './services';
+import { removeNils } from './util';
+
+const AUTO_RENEW = 'autoRenew';
+const SYNC_STORAGE = 'syncStorage';
+const LEADER_ELECTION = 'leaderElection';
 
 export class ServiceManager implements ServiceManagerInterface {
   private sdk: OktaAuth;
   private options: ServiceManagerOptions;
   private services: Map<string, ServiceInterface>;
-  private channel?: BroadcastChannel;
-  private elector?: LeaderElector;
   private started: boolean;
 
-  private static knownServices = ['autoRenew', 'syncStorage'];
+  private static knownServices = [AUTO_RENEW, SYNC_STORAGE, LEADER_ELECTION];
 
   private static defaultOptions = {
     autoRenew: true,
@@ -43,19 +40,23 @@ export class ServiceManager implements ServiceManagerInterface {
 
   constructor(sdk: OktaAuth, options: ServiceManagerOptions = {}) {
     this.sdk = sdk;
+    this.onLeader = this.onLeader.bind(this);
 
     // TODO: backwards compatibility, remove in next major version - OKTA-473815
     const { autoRenew, autoRemove, syncStorage } = sdk.tokenManager.getOptions();
+    options.electionChannelName = options.electionChannelName || options.broadcastChannelName;
     this.options = Object.assign({}, 
       ServiceManager.defaultOptions,
-      { autoRenew, autoRemove, syncStorage },
-      options
+      { autoRenew, autoRemove, syncStorage }, 
+      {
+        electionChannelName: `${sdk.options.clientId}-election`,
+        syncChannelName: `${sdk.options.clientId}-sync`,
+      },
+      removeNils(options)
     );
 
     this.started = false;
     this.services = new Map();
-    this.onLeaderDuplicate = this.onLeaderDuplicate.bind(this);
-    this.onLeader = this.onLeader.bind(this);
 
     ServiceManager.knownServices.forEach(name => {
       const svc = this.createService(name);
@@ -65,102 +66,76 @@ export class ServiceManager implements ServiceManagerInterface {
     });
   }
 
-  public static canUseLeaderElection() {
-    return isBrowser();
-  }
-
-  private onLeader() {
+  private async onLeader() {
     if (this.started) {
       // Start services that requires leadership
-      this.startServices();
+      await this.startServices();
     }
   }
 
-  private onLeaderDuplicate() {
-  }
-
   isLeader() {
-    return !!this.elector?.isLeader;
-  }
-
-  hasLeader() {
-    return this.elector?.hasLeader;
+    return (this.getService(LEADER_ELECTION) as LeaderElectionService)?.isLeader();
   }
 
   isLeaderRequired() {
-    return [...this.services.values()].some(srv => srv.requiresLeadership());
+    return [...this.services.values()].some(srv => srv.canStart() && srv.requiresLeadership());
   }
 
   async start() {
     if (this.started) {
       return;     // noop if services have already started
     }
-    // only start election if a leader is required
-    if (this.isLeaderRequired()) {
-      await this.startElector();
-    }
-    this.startServices();
+    await this.startServices();
     this.started = true;
   }
 
   async stop() {
-    await this.stopElector();
-    this.stopServices();
+    await this.stopServices();
     this.started = false;
   }
 
   getService(name: string): ServiceInterface | undefined {
     return this.services.get(name);
   }
 
-  private startServices() {
-    for (const srv of this.services.values()) {
-      const canStart = srv.canStart() && !srv.isStarted() && (srv.requiresLeadership() ? this.isLeader() : true);
-      if (canStart) {
-        srv.start();
+  private async startServices() {
+    for (const [name, srv] of this.services.entries()) {
+      if (this.canStartService(name, srv)) {
+        await srv.start();
       }
     }
   }
 
-  private stopServices() {
+  private async stopServices() {
     for (const srv of this.services.values()) {
-      srv.stop();
-    }
-  }
-
-  private async startElector() {
-    await this.stopElector();
-    if (ServiceManager.canUseLeaderElection()) {
-      if (!this.channel) {
-        const { broadcastChannelName } = this.options;
-        this.channel = new BroadcastChannel(broadcastChannelName as string);
-      }
-      if (!this.elector) {
-        this.elector = createLeaderElection(this.channel);
-        this.elector.onduplicate = this.onLeaderDuplicate;
-        this.elector.awaitLeadership().then(this.onLeader);
-      }
+      await srv.stop();
     }
   }
 
-  private async stopElector() {
-    if (this.elector) {
-      await this.elector?.die();
-      this.elector = undefined;
-      await this.channel?.close();
-      this.channel = undefined;
+  // eslint-disable-next-line complexity
+  private canStartService(name: string, srv: ServiceInterface): boolean {
+    let canStart = srv.canStart() && !srv.isStarted();
+    // only start election if a leader is required
+    if (name === LEADER_ELECTION) {
+      canStart &&= this.isLeaderRequired();
+    } else if (srv.requiresLeadership()) {
+      canStart &&= this.isLeader();
     }
+    return canStart;
   }
 
   private createService(name: string): ServiceInterface {
     const tokenManager = this.sdk.tokenManager;
 
-    let service: ServiceInterface | undefined;
+    let service: ServiceInterface;
     switch (name) {
-      case 'autoRenew':
+      case LEADER_ELECTION:
+        service = new LeaderElectionService({...this.options, onLeader: this.onLeader});
+        break;
+      case AUTO_RENEW:
         service = new AutoRenewService(tokenManager, {...this.options});
         break;
-      case 'syncStorage':
+      case SYNC_STORAGE:
         service = new SyncStorageService(tokenManager, {...this.options});
         break;
       default: