Firebase Authentication authStateChange listener has not been called after app comes from background mode

[okletstryit]

So the problem is that if an app was not opened for a while and it is in the background on iOS, and the user opens it again, authStateChange is not called and my app is not rendered, I have such a code (simplified). Please give me some advice of how to fix that 🙏:

  const { setUser } = useRuntimeStore();
  const [isLoading, setLoading] = useState(true);

  useEffect(() => {
    FirebaseAuthentication.addListener('authStateChange', async (result) => {
      try {
        if (result.user) {
          await setInitialData(result.user.uid);
        } 
        setLoading(false);
        setUser(result.user);
      } catch (e) {
        setUser(null);
      }
    });

    return () => {
      FirebaseAuthentication.removeAllListeners();
    };
  }, []);

  return !isLoading && children;
};

[robingenz]

I will fix #560 later. This might help you.

[robingenz]

Besides that, you need to call getCurrentUser(...) when using livereload because the listener fires only at the first start (because the native listener is only added once). This is the code i'm using for https://ionstarter.dev/:

private async addListeners(): Promise<void> {
  if (Capacitor.isNativePlatform()) {
    await this.removeAllListeners();
    // This fires every time the auth state changes
    // and once after the (native) listener is added.
    await FirebaseAuthentication.addListener('authStateChange', event => {
      this.ngZone.run(() => {
        this.authStateChangeSubject.next(event);
      });
    });
    // When using live reload, the auth state change
    // listener is not added again after a page reload.
    await this.getCurrentUser().then(result => {
      this.authStateChangeSubject.next({ user: result.user });
    });
  } else {
    // See https://github.com/capawesome-team/capacitor-firebase/issues/494
    const auth = getAuth();
    auth.onAuthStateChanged(() => {
      void this.getCurrentUser().then(result => {
        this.authStateChangeSubject.next({ user: result.user });
      });
    });
  }
}

[okletstryit]

Thanks so much for your reply!

Do I understand right that in my case I need 2 things mostly?

1. await this.removeAllListeners(); before using addListener again
2. Bump my version to 5.4.0 where you fixed some internal lib's bug?

[robingenz]

1. await this.removeAllListeners(); before using addListener again

This is only needed for your dev environment if you use livereload.

As i said, in my case, i also have to call getCurrentUser(...) when using livereload because the listener fires only at the first start.

I don't know your architecture. That's why I can't tell you exactly which solution is best for you.

[okletstryit]

I tried the approach you suggested. Thanks for it so much.

But my app still seems to do "unloading" state of authentication being in the background, after some time, like 1 hour.

After that, it does not get authorized and it always returns 1. (see code below)

it works well on the first run and if you open it from the background after some short time. But in one hour it just renders '1'

I will be so grateful if you have any other ideas about the reason of such behavior

import { useRuntimeStore } from '../initApp';
import { useEffect, useRef, useState } from 'react';
import { FirebaseAuthentication } from '@capacitor-firebase/authentication';
import { setInitialData } from '../pages/Signup/firebase';
import { Analytics } from '../analytics';
import * as Sentry from '@sentry/react';

export const AuthSubscriber = ({ children }) => {
  const { setUser, getUser } = useRuntimeStore();
  const [isLoading, setLoading] = useState(true);

  useEffect(() => {
    const initAuthStuff = async () => {
      await FirebaseAuthentication.removeAllListeners();

      FirebaseAuthentication.addListener('authStateChange', async (result) => {
        try {
          if (result.user) {
            await setInitialData(result.user.uid);
            Analytics.setSignIn();
          }

          setLoading(false);
          setUser(result.user);
        } catch (e) {
          setUser(null);
        }
      });

      const currentUserResult = await FirebaseAuthentication.getCurrentUser();
      setUser(currentUserResult.user);

      return () => {
        FirebaseAuthentication.removeAllListeners();
      };
    };

    initAuthStuff();
  }, []);

  if (!isLoading) {
    return children;
  }

  return 1;
};

[robingenz]

Sorry I don't have any experience with React. Please provide a Minimal, Reproducible Example using this template in a public GitHub repository so I can debug it.