fix(auth): remove visibilitychange listener from IndexedDBLocalPersistence (#10300)

Fixes #10264.

PR #10123 introduced pagehide, pageshow, and visibilitychange listeners to prevent null hydration during page reload. However, visibilitychange fires with document.visibilityState === 'hidden' whenever focus shifts to an OAuth popup window (e.g. signInWithPopup) or background tab. This caused IndexedDB to close prematurely and throw 'Database is closing/hidden' when the popup returned credentials to the opener.

This change:
1. Removes the visibilitychange listener from IndexedDBLocalPersistence, relying solely on pagehide/pageshow for true page teardown lifecycle events.
2. Renames isHiding -> isClosing to accurately reflect its purpose.
3. Updates unit tests to assert that visibilitychange does not close the DB or interrupt persistence writes.

Author: macastelaz

.changeset/fix-auth-visibilitychange-popup.md

@@ -0,0 +1,5 @@
+---
+'@firebase/auth': patch
+---
+
+Fix issue where `signInWithPopup` and other background tab operations fail with "Database is closing/hidden" by removing the `visibilitychange` listener from `IndexedDBLocalPersistence`.

packages/auth/src/platform_browser/persistence/indexed_db.test.ts

@@ -439,7 +439,7 @@ describe('platform_browser/persistence/indexed_db', () => {
       clock = sinon.useFakeTimers();
       callback = sinon.spy();
       // Ensure we start fresh
-      (persistence as any).isHiding = false;
+      (persistence as any).isClosing = false;
       (persistence as any).dbPromise = null;
     });
 
@@ -452,10 +452,12 @@ describe('platform_browser/persistence/indexed_db', () => {
     it('should register event listeners when first listener is added and unregister when last is removed', () => {
       const addSpy = sinon.spy(window, 'addEventListener');
       const removeSpy = sinon.spy(window, 'removeEventListener');
+      const docAddSpy = sinon.spy(document, 'addEventListener');
 
       persistence._addListener(key, callback);
       expect(addSpy).to.have.been.calledWith('pagehide');
       expect(addSpy).to.have.been.calledWith('pageshow');
+      expect(docAddSpy).not.to.have.been.calledWith('visibilitychange');
 
       persistence._removeListener(key, callback);
       expect(removeSpy).to.have.been.calledWith('pagehide');
@@ -468,7 +470,7 @@ describe('platform_browser/persistence/indexed_db', () => {
 
       // Trigger pagehide
       window.dispatchEvent(new Event('pagehide'));
-      expect((persistence as any).isHiding).to.be.true;
+      expect((persistence as any).isClosing).to.be.true;
       expect((persistence as any).pollTimer).to.be.null;
       expect((persistence as any).dbPromise).to.be.null;
 
@@ -479,7 +481,7 @@ describe('platform_browser/persistence/indexed_db', () => {
 
       // Trigger pageshow
       window.dispatchEvent(new Event('pageshow'));
-      expect((persistence as any).isHiding).to.be.false;
+      expect((persistence as any).isClosing).to.be.false;
       expect((persistence as any).pollTimer).not.to.be.null;
 
       // Modify DB in background, ensure polling picks it up after pageshow
@@ -488,23 +490,20 @@ describe('platform_browser/persistence/indexed_db', () => {
       expect(callback).to.have.been.calledWith('new-value');
     });
 
-    it('should handle visibilitychange hidden and visible', () => {
+    it('should not close DB or set isClosing on visibilitychange', async () => {
       persistence._addListener(key, callback);
+      await persistence._set(key, value);
 
-      // Mock document.visibilityState to 'hidden'
+      // Mock document.visibilityState to 'hidden' and dispatch visibilitychange
       sinon.stub(document, 'visibilityState').get(() => 'hidden');
       document.dispatchEvent(new Event('visibilitychange'));
 
-      expect((persistence as any).isHiding).to.be.true;
-      expect((persistence as any).pollTimer).to.be.null;
-
-      // Mock document.visibilityState to 'visible'
-      sinon.restore(); // Restore stub
-      sinon.stub(document, 'visibilityState').get(() => 'visible');
-      document.dispatchEvent(new Event('visibilitychange'));
-
-      expect((persistence as any).isHiding).to.be.false;
+      expect((persistence as any).isClosing).to.be.false;
       expect((persistence as any).pollTimer).not.to.be.null;
+
+      // Persistence writes should continue to succeed while document is hidden
+      await persistence._set(key, 'another-value');
+      expect(await persistence._get(key)).to.eq('another-value');
     });
 
     it('should discard in-flight poll results if pagehide occurs before poll completes', async () => {

packages/auth/src/platform_browser/persistence/indexed_db.ts

@@ -166,7 +166,7 @@ class IndexedDBLocalPersistence implements InternalPersistence {
   // setTimeout return value is platform specific
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   private pollTimer: any | null = null;
-  private isHiding = false;
+  private isClosing = false;
   private pendingWrites = 0;
 
   private receiver: Receiver | null = null;
@@ -177,7 +177,7 @@ class IndexedDBLocalPersistence implements InternalPersistence {
   readonly _workerInitializationPromise: Promise<void>;
 
   private readonly onPageHide = (): void => {
-    this.isHiding = true;
+    this.isClosing = true;
     this.stopPolling();
     if (this.dbPromise) {
       this.dbPromise.then(db => db.close()).catch(() => {});
@@ -186,24 +186,14 @@ class IndexedDBLocalPersistence implements InternalPersistence {
   };
 
   private readonly onPageShow = (): void => {
-    if (this.isHiding) {
-      this.isHiding = false;
+    if (this.isClosing) {
+      this.isClosing = false;
       if (Object.keys(this.listeners).length > 0) {
         this.startPolling();
       }
     }
   };
 
-  private readonly onVisibilityChange = (): void => {
-    if (typeof document !== 'undefined') {
-      if (document.visibilityState === 'hidden') {
-        this.onPageHide();
-      } else if (document.visibilityState === 'visible') {
-        this.onPageShow();
-      }
-    }
-  };
-
   private registerLifecycleListeners(): void {
     if (
       typeof window !== 'undefined' &&
@@ -212,12 +202,6 @@ class IndexedDBLocalPersistence implements InternalPersistence {
       window.addEventListener('pagehide', this.onPageHide);
       window.addEventListener('pageshow', this.onPageShow);
     }
-    if (
-      typeof document !== 'undefined' &&
-      typeof document.addEventListener === 'function'
-    ) {
-      document.addEventListener('visibilitychange', this.onVisibilityChange);
-    }
   }
 
   private unregisterLifecycleListeners(): void {
@@ -228,12 +212,6 @@ class IndexedDBLocalPersistence implements InternalPersistence {
       window.removeEventListener('pagehide', this.onPageHide);
       window.removeEventListener('pageshow', this.onPageShow);
     }
-    if (
-      typeof document !== 'undefined' &&
-      typeof document.removeEventListener === 'function'
-    ) {
-      document.removeEventListener('visibilitychange', this.onVisibilityChange);
-    }
   }
 
   constructor() {
@@ -246,8 +224,8 @@ class IndexedDBLocalPersistence implements InternalPersistence {
   }
 
   async _openDb(): Promise<IDBDatabase> {
-    if (this.isHiding) {
-      throw new Error('Database is closing/hidden');
+    if (this.isClosing) {
+      throw new Error('Database is closing');
     }
     if (this.dbPromise) {
       return this.dbPromise;
@@ -267,7 +245,7 @@ class IndexedDBLocalPersistence implements InternalPersistence {
         const db = await this._openDb();
         return await op(db);
       } catch (e) {
-        if (this.isHiding) {
+        if (this.isClosing) {
           throw e;
         }
         if (numAttempts++ > _TRANSACTION_RETRY_COUNT) {
@@ -425,7 +403,7 @@ class IndexedDBLocalPersistence implements InternalPersistence {
   }
 
   private async _poll(): Promise<string[]> {
-    if (this.isHiding) {
+    if (this.isClosing) {
       return [];
     }
     try {
@@ -435,7 +413,7 @@ class IndexedDBLocalPersistence implements InternalPersistence {
         return new DBPromise<DBObject[] | null>(getAllRequest).toPromise();
       });
 
-      if (this.isHiding) {
+      if (this.isClosing) {
         return [];
       }
 
@@ -469,7 +447,7 @@ class IndexedDBLocalPersistence implements InternalPersistence {
       }
       return keys;
     } catch (e) {
-      if (!this.isHiding) {
+      if (!this.isClosing) {
         _logWarn(`Firebase Auth cross-tab polling failed with error: ${e}`);
       }
       return [];