Use event set_storage for IE11

lib/TokenManager.ts

@@ -13,7 +13,7 @@
 import { removeNils, clone } from './util';
 import { AuthSdkError } from './errors';
 import { validateToken  } from './oidc/util';
-import { isLocalhost } from './features';
+import { isLocalhost, isIE11OrLess } from './features';
 import SdkClock from './clock';
 import {
   EventEmitter,
@@ -28,8 +28,7 @@ import {
   StorageType,
   OktaAuthInterface,
   StorageProvider,
-  TokenManagerErrorEventHandler,
-  TokenManagerEventHandler,
+  TokenManagerAnyEventHandler,
   TokenManagerInterface,
   RefreshToken,
   AccessTokenCallback,
@@ -54,6 +53,7 @@ export const EVENT_RENEWED = 'renewed';
 export const EVENT_ADDED = 'added';
 export const EVENT_REMOVED = 'removed';
 export const EVENT_ERROR = 'error';
+export const EVENT_SET_STORAGE = 'set_storage';
 
 interface TokenManagerState {
   expireTimeouts: Record<string, unknown>;
@@ -73,8 +73,8 @@ export class TokenManager implements TokenManagerInterface {
   private state: TokenManagerState;
   private options: TokenManagerOptions;
 
-  on: (event: string, handler: TokenManagerErrorEventHandler | TokenManagerEventHandler, context?: object) => void;
-  off: (event: string, handler?: TokenManagerErrorEventHandler | TokenManagerEventHandler) => void;
+  on: (event: string, handler: TokenManagerAnyEventHandler, context?: object) => void;
+  off: (event: string, handler?: TokenManagerAnyEventHandler) => void;
 
   // eslint-disable-next-line complexity
   constructor(sdk: OktaAuthInterface, options: TokenManagerOptions = {}) {
@@ -219,6 +219,7 @@ export class TokenManager implements TokenManagerInterface {
     validateToken(token);
     tokenStorage[key] = token;
     this.storage.setStorage(tokenStorage);
+    this.emitSetStorageEvent();
     this.emitAdded(key, token);
     this.setExpireEventTimeout(key, token);
   }
@@ -276,6 +277,19 @@ export class TokenManager implements TokenManagerInterface {
     throw new AuthSdkError('Unknown token type');
   }
 
+  // for synchronization of LocalStorage cross tabs for IE11
+  private emitSetStorageEvent() {
+    if (isIE11OrLess()) {
+      const storage = this.storage.getStorage();
+      this.emitter.emit(EVENT_SET_STORAGE, storage);
+    }
+  }
+
+  // used in `SyncStorageService` for synchronization of LocalStorage cross tabs for IE11
+  public getStorage() {
+    return this.storage;
+  }
+
   setTokens(
     tokens: Tokens,
     // TODO: callbacks can be removed in the next major version OKTA-407224
@@ -331,7 +345,8 @@ export class TokenManager implements TokenManagerInterface {
       return storage;
     }, {});
     this.storage.setStorage(storage);
-
+    this.emitSetStorageEvent();
+
     // emit event and start expiration timer
     types.forEach(type => {
       const newToken = tokens[type];
@@ -358,6 +373,7 @@ export class TokenManager implements TokenManagerInterface {
     var removedToken = tokenStorage[key];
     delete tokenStorage[key];
     this.storage.setStorage(tokenStorage);
+    this.emitSetStorageEvent();
 
     this.emitRemoved(key, removedToken);
   }
@@ -437,6 +453,7 @@ export class TokenManager implements TokenManagerInterface {
     validateToken(token);
     tokenStorage[key] = token;
     this.storage.setStorage(tokenStorage);
+    this.emitSetStorageEvent();
   }
 
   removeRefreshToken () {

lib/services/SyncStorageService.ts

@@ -10,16 +10,17 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { TokenManager, EVENT_ADDED, EVENT_REMOVED, EVENT_RENEWED } from '../TokenManager';
+import { TokenManager, EVENT_ADDED, EVENT_REMOVED, EVENT_RENEWED, EVENT_SET_STORAGE } from '../TokenManager';
 import { BroadcastChannel } from 'broadcast-channel';
-import { isBrowser, isIE11OrLess } from '../features';
-import { ServiceManagerOptions, ServiceInterface, Token } from '../types';
+import { isBrowser } from '../features';
+import { ServiceManagerOptions, ServiceInterface, Token, Tokens } from '../types';
 
 export type SyncMessage = {
   type: string;
-  key: string;
-  token: Token;
+  key?: string;
+  token?: Token;
   oldToken?: Token;
+  storage?: Tokens;
 };
 export class SyncStorageService implements ServiceInterface {
   private tokenManager: TokenManager;
@@ -34,6 +35,7 @@ export class SyncStorageService implements ServiceInterface {
     this.onTokenAddedHandler = this.onTokenAddedHandler.bind(this);
     this.onTokenRemovedHandler = this.onTokenRemovedHandler.bind(this);
     this.onTokenRenewedHandler = this.onTokenRenewedHandler.bind(this);
+    this.onSetStorageHandler = this.onSetStorageHandler.bind(this);
     this.onSyncMessageHandler = this.onSyncMessageHandler.bind(this);
   }
 
@@ -57,6 +59,7 @@ export class SyncStorageService implements ServiceInterface {
       this.tokenManager.on(EVENT_ADDED, this.onTokenAddedHandler);
       this.tokenManager.on(EVENT_REMOVED, this.onTokenRemovedHandler);
       this.tokenManager.on(EVENT_RENEWED, this.onTokenRenewedHandler);
+      this.tokenManager.on(EVENT_SET_STORAGE, this.onSetStorageHandler);
       this.channel.addEventListener('message', this.onSyncMessageHandler);
       this.started = true;
     }
@@ -67,6 +70,7 @@ export class SyncStorageService implements ServiceInterface {
       this.tokenManager.off(EVENT_ADDED, this.onTokenAddedHandler);
       this.tokenManager.off(EVENT_REMOVED, this.onTokenRemovedHandler);
       this.tokenManager.off(EVENT_RENEWED, this.onTokenRenewedHandler);
+      this.tokenManager.off(EVENT_SET_STORAGE, this.onSetStorageHandler);
       this.channel?.removeEventListener('message', this.onSyncMessageHandler);
       this.channel?.close();
       this.channel = undefined;
@@ -108,32 +112,35 @@ export class SyncStorageService implements ServiceInterface {
     });
   }
 
+  private onSetStorageHandler(storage: Tokens) {
+    this.channel?.postMessage({
+      type: EVENT_SET_STORAGE,
+      storage
+    });
+  }
+
+  /* eslint-disable complexity */
   private onSyncMessageHandler(msg: SyncMessage) {
     // Notes:
     // 1. Using `enablePostMessage` flag here to prevent sync message loop.
     //    If this flag is on, tokenManager event handlers do not post sync message.
     // 2. IE11 has known issue with synchronization of LocalStorage cross tabs.
     //    One workaround is to set empty event handler for `window.onstorage`.
     //    But it's not 100% working, sometimes you still get old value from LocalStorage.
-    //    Better approch is to explicitly udpate LocalStorage with tokenManager's add/remove.
+    //    Better approch is to explicitly udpate LocalStorage with `setStorage`.
 
     this.enablePostMessage = false;
     switch (msg.type) {
+      case EVENT_SET_STORAGE:
+        this.tokenManager.getStorage().setStorage(msg.storage);
+        break;
       case EVENT_ADDED:
-        if (!isIE11OrLess()) {
-          this.tokenManager.emitAdded(msg.key, msg.token);
-          this.tokenManager.setExpireEventTimeout(msg.key, msg.token);
-        } else {
-          this.tokenManager.add(msg.key, msg.token);
-        }
+        this.tokenManager.emitAdded(msg.key, msg.token);
+        this.tokenManager.setExpireEventTimeout(msg.key, msg.token);
         break;
       case EVENT_REMOVED:
-        if (!isIE11OrLess()) {
-          this.tokenManager.clearExpireEventTimeout(msg.key);
-          this.tokenManager.emitRemoved(msg.key, msg.token);
-        } else {
-          this.tokenManager.remove(msg.key);
-        }
+        this.tokenManager.clearExpireEventTimeout(msg.key);
+        this.tokenManager.emitRemoved(msg.key, msg.token);
         break;
       case EVENT_RENEWED:
         this.tokenManager.emitRenewed(msg.key, msg.token, msg.oldToken);

lib/types/TokenManager.ts

@@ -11,16 +11,17 @@ export interface TokenManagerError {
 
 export declare type TokenManagerErrorEventHandler = (error: TokenManagerError) => void;
 export declare type TokenManagerEventHandler = (key: string, token: Token, oldtoken?: Token) => void;
-
+export declare type TokenManagerSetStorageEventHandler = (storage: Tokens) => void;
+export declare type TokenManagerAnyEventHandler = TokenManagerEventHandler | TokenManagerErrorEventHandler | TokenManagerSetStorageEventHandler;
 
 export declare type AccessTokenCallback = (key: string, token: AccessToken) => void;
 export declare type IDTokenCallback = (key: string, token: IDToken) => void;
 export declare type RefreshTokenCallback = (key: string, token: RefreshToken) => void;
 
 // only add methods needed internally
 export interface TokenManagerInterface {
-  on: (event: string, handler: TokenManagerErrorEventHandler | TokenManagerEventHandler, context?: object) => void;
-  off: (event: string, handler?: TokenManagerErrorEventHandler | TokenManagerEventHandler) => void;
+  on: (event: string, handler: TokenManagerAnyEventHandler, context?: object) => void;
+  off: (event: string, handler?: TokenManagerAnyEventHandler) => void;
   getTokensSync(): Tokens;
   setTokens({ accessToken, idToken, refreshToken }: Tokens, accessTokenCb?: AccessTokenCallback, idTokenCb?: IDTokenCallback, refreshTokenCb?: RefreshTokenCallback): void;
   getStorageKeyByType(type: TokenType): string;