Implement cross-window browser events for auth-next

Author: avolkovi

packages-exp/auth-exp/src/core/persistence/in_memory.ts

@@ -17,7 +17,12 @@
 
 import * as externs from '@firebase/auth-types-exp';
 
-import { Persistence, PersistenceType, PersistenceValue } from '../persistence';
+import {
+  Persistence,
+  PersistenceType,
+  PersistenceValue,
+  StorageEventListener
+} from '../persistence';
 
 export class InMemoryPersistence implements Persistence {
   static type: 'NONE' = 'NONE';
@@ -40,6 +45,16 @@ export class InMemoryPersistence implements Persistence {
   async remove(key: string): Promise<void> {
     delete this.storage[key];
   }
+
+  addListener(_key: string, _listener: StorageEventListener): void {
+    // Listeners are not supported for in-memory storage since it cannot be shared across windows/workers
+    return;
+  }
+
+  removeListener(_key: string, _listener: StorageEventListener): void {
+    // Listeners are not supported for in-memory storage since it cannot be shared across windows/workers
+    return;
+  }
 }
 
 export const inMemoryPersistence: externs.Persistence = InMemoryPersistence;

packages-exp/auth-exp/src/core/persistence/index.ts

@@ -31,10 +31,16 @@ export type PersistenceValue = PersistedBlob | string;
 
 export const STORAGE_AVAILABLE_KEY = '__sak';
 
+export interface StorageEventListener {
+  (value: PersistenceValue | null): void;
+}
+
 export interface Persistence {
   type: PersistenceType;
   isAvailable(): Promise<boolean>;
   set(key: string, value: PersistenceValue): Promise<void>;
   get<T extends PersistenceValue>(key: string): Promise<T | null>;
   remove(key: string): Promise<void>;
+  addListener(key: string, listener: StorageEventListener): void;
+  removeListener(key: string, listener: StorageEventListener): void;
 }

packages-exp/auth-exp/src/core/persistence/persistence_user_manager.ts

@@ -16,11 +16,13 @@
  */
 
 import { ApiKey, AppName, Auth } from '../../model/auth';
-import { PersistedBlob, Persistence } from '../persistence';
-import { _getInstance } from '../util/instantiator';
-import { inMemoryPersistence } from './in_memory';
 import { User } from '../../model/user';
+import { AuthErrorCode } from '../errors';
+import { PersistedBlob, Persistence, PersistenceValue } from '../persistence';
 import { UserImpl } from '../user/user_impl';
+import { assert } from '../util/assert';
+import { _getInstance } from '../util/instantiator';
+import { inMemoryPersistence } from './in_memory';
 
 export const _AUTH_USER_KEY_NAME = 'authUser';
 export const _REDIRECT_USER_KEY_NAME = 'redirectUser';
@@ -35,9 +37,15 @@ function _persistenceKeyName(
   return `${PERSISTENCE_NAMESPACE}:${key}:${apiKey}:${appName}`;
 }
 
+export interface UserEventListener {
+  (): void;
+}
+
 export class PersistenceUserManager {
   private readonly fullUserKey: string;
   private readonly fullPersistenceKey: string;
+  private listener: UserEventListener | null = null;
+
   private constructor(
     public persistence: Persistence,
     private readonly auth: Auth,
@@ -84,6 +92,29 @@ export class PersistenceUserManager {
     }
   }
 
+  _onStorageEvent(_value: PersistenceValue | null): void {
+    assert(this.listener, AuthErrorCode.INTERNAL_ERROR, {
+      appName: this.auth.name
+    });
+    this.listener();
+  }
+
+  async addListener(listener: UserEventListener): Promise<void> {
+    assert(!this.listener, AuthErrorCode.INTERNAL_ERROR, {
+      appName: this.auth.name
+    });
+    this.listener = listener;
+    this.persistence.addListener(this.fullUserKey, this._onStorageEvent);
+  }
+
+  removeListener(listener: UserEventListener): void {
+    assert(this.listener === listener, AuthErrorCode.INTERNAL_ERROR, {
+      appName: this.auth.name
+    });
+    this.persistence.removeListener(this.fullUserKey, this._onStorageEvent);
+    this.listener = null;
+  }
+
   static async create(
     auth: Auth,
     persistenceHierarchy: Persistence[],

packages-exp/auth-exp/src/core/user/reload.ts

@@ -51,10 +51,7 @@ export async function _reloadWithoutSaving(user: User): Promise<void> {
     phoneNumber: coreAccount.phoneNumber || null,
     tenantId: coreAccount.tenantId || null,
     providerData: mergeProviderData(user.providerData, newProviderData),
-    metadata: new UserMetadata(
-      coreAccount.createdAt,
-      coreAccount.lastLoginAt
-    )
+    metadata: new UserMetadata(coreAccount.createdAt, coreAccount.lastLoginAt)
   };
 
   Object.assign(user, updates);

packages-exp/auth-exp/src/core/util/browser.ts

@@ -15,6 +15,16 @@
  * limitations under the License.
  */
 
+import { isIE, getUA } from '@firebase/util';
+
+interface NavigatorStandalone extends Navigator {
+  standalone?: unknown;
+}
+
+interface Document {
+  documentMode?: number;
+}
+
 /**
  * Enums for Browser name.
  */
@@ -40,36 +50,31 @@ export function _getBrowserName(userAgent: string): BrowserName | string {
   const ua = userAgent.toLowerCase();
   if (ua.includes('opera/') || ua.includes('opr/') || ua.includes('opios/')) {
     return BrowserName.OPERA;
-  } else if (ua.includes('iemobile')) {
+  } else if (_isIEMobile(ua)) {
     // Windows phone IEMobile browser.
     return BrowserName.IEMOBILE;
   } else if (ua.includes('msie') || ua.includes('trident/')) {
     return BrowserName.IE;
   } else if (ua.includes('edge/')) {
     return BrowserName.EDGE;
-  } else if (ua.includes('firefox/')) {
+  } else if (_isFirefox(ua)) {
     return BrowserName.FIREFOX;
   } else if (ua.includes('silk/')) {
     return BrowserName.SILK;
-  } else if (ua.includes('blackberry')) {
+  } else if (_isBlackBerry(ua)) {
     // Blackberry browser.
     return BrowserName.BLACKBERRY;
-  } else if (ua.includes('webos')) {
+  } else if (_isWebOS(ua)) {
     // WebOS default browser.
     return BrowserName.WEBOS;
-  } else if (
-    ua.includes('safari/') &&
-    !ua.includes('chrome/') &&
-    !ua.includes('crios/') &&
-    !ua.includes('android')
-  ) {
+  } else if (_isSafari(ua)) {
     return BrowserName.SAFARI;
   } else if (
-    (ua.includes('chrome/') || ua.includes('crios/')) &&
+    (ua.includes('chrome/') || _isChromeIOS(ua)) &&
     !ua.includes('edge/')
   ) {
     return BrowserName.CHROME;
-  } else if (ua.includes('android')) {
+  } else if (_isAndroid(ua)) {
     // Android stock browser.
     return BrowserName.ANDROID;
   } else {
@@ -82,3 +87,71 @@ export function _getBrowserName(userAgent: string): BrowserName | string {
   }
   return BrowserName.OTHER;
 }
+
+export function _isFirefox(ua: string): boolean {
+  return /firefox\//i.test(ua);
+}
+
+export function _isSafari(userAgent: string): boolean {
+  const ua = userAgent.toLowerCase();
+  return (
+    ua.includes('safari/') &&
+    !ua.includes('chrome/') &&
+    !ua.includes('crios/') &&
+    !ua.includes('android')
+  );
+}
+
+export function _isChromeIOS(ua: string): boolean {
+  return /crios\//i.test(ua);
+}
+
+export function _isIEMobile(ua: string): boolean {
+  return /iemobile/i.test(ua);
+}
+
+export function _isAndroid(ua: string): boolean {
+  return /android\//i.test(ua);
+}
+
+export function _isBlackBerry(ua: string): boolean {
+  return /blackberry/i.test(ua);
+}
+
+export function _isWebOS(ua: string): boolean {
+  return /webos/i.test(ua);
+}
+
+export function _isIOS(ua: string): boolean {
+  return /iphone|ipad|ipod/i.test(ua);
+}
+
+export function _isIOSStandalone(ua: string): boolean {
+  return _isIOS(ua) && !!(window.navigator as NavigatorStandalone)?.standalone;
+}
+
+export function _isIE10(): boolean {
+  return isIE() && (document as Document).documentMode === 10;
+}
+
+export function _isMobileBrowser(ua: string = getUA()): boolean {
+  // TODO: implement getBrowserName equivalent for OS.
+  return (
+    _isIOS(ua) ||
+    _isAndroid(ua) ||
+    _isWebOS(ua) ||
+    _isBlackBerry(ua) ||
+    /windows phone/i.test(ua) ||
+    _isIEMobile(ua)
+  );
+}
+
+export function _isIframe(): boolean {
+  try {
+    // Check that the current window is not the top window.
+    // If so, return true.
+    return !!(window && window !== window.top);
+  } catch (e) {
+    return false;
+  }
+}