bug: authStateChange doesn't fire on Log Out and open the app from App Killed use cases

[Sampath-Lokuge]

Hi,

I can see an issue with your demo app. The below method doesn't fire on Log out and open the app from App Kill use cases. Any clue? Thanks!

I have used it like so:

firebase-authentication.service.ts

 setFirebaseAuthStateChange(): void {
   FirebaseAuthentication.removeAllListeners().then(() => {
      FirebaseAuthentication.addListener('authStateChange', (change) => {
        this.ngZone.run(() => {
          this.authStateSubj.next(change);
        });
      });
    });
}

app. componnet.ts

  ngOnInit(): void {
    this.initializeApp();
  }

 private initializeApp(): void {
     this.firebaseAuthenticationService.setFirebaseAuthStateChange();
 }

It works only when the Login use case. I have used AngularFire on many applications and below works on all the above use cases. So we would like to have the same behavior also on your plugin too. Please let me know your thoughts here.

this.angularFireAuth.authState.subscribe(async (user: firebase.default.User) => {
 
    });

Ionic:

   Ionic CLI                     : 6.16.3 (C:\Users\Sampath\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 6.0.11
   @angular-devkit/build-angular : 13.0.1
   @angular-devkit/schematics    : 13.0.1
   @angular/cli                  : 13.0.1
   @ionic/angular-toolkit        : 5.0.0

Capacitor:

   Capacitor CLI      : 3.4.0
   @capacitor/android : 3.4.1
   @capacitor/core    : 3.4.0
   @capacitor/ios     : not installed

Utility:

   cordova-res : 0.15.3
   native-run  : 1.5.0

System:

   NodeJS : v14.16.1 (C:\Program Files\nodejs\node.exe)
   npm    : 6.14.12
   OS     : Windows 10

[robingenz]

Hi @Sampath-Lokuge,
what do you mean by and open the app from App Kill use cases exactly?
I just tested my demo app and everything worked for me. authStateChange fired on logout. But I did not have your changes.
Please provide a Minimal, Reproducible Example (see How to create a Minimal, Reproducible Example).

[Sampath-Lokuge]

Hi @robingenz

Yes, I have tested it on a Native device/Native app on Android.

Steps:

1. Logged in using G+
2. After that killed the app and open it again. But at that time too didn't fire the authStateChange event.

Since authStateChange is a listener it must fire with my workflow too no? Or do I need to put that code only on the constructor of the FirebaseAuthentication service? Please let me know. Thanks!

[robingenz]

You have to set up your listener in the constructor to ensure that the listener is ready before the first event is fired.
I also do this in my demo app.

[Sampath-Lokuge]

I have done the same thing but outside the constructor. Because on App Killed use case there will not have any Service available until it has been instantiated. So that is why I have put it under the setFirebaseAuthStateChange() and called it within the initializeApp() method on the app. componnet.ts file. Your thoughts?

[robingenz]

Because on App Killed use case there will not have any Service available until it has been instantiated.

What do you mean by this exactly? I do not really understand your use case.

[Sampath-Lokuge]

Please see this: https://youtu.be/oTkLCESOxZc?t=37

This is the thing where I have done here too.

[robingenz]

Okay, but what does exiting the app have to do with the constructor/NgOnInit? That is independent of where you initialize the listener.

[Sampath-Lokuge]

Yes, that is the issue here too. If I kill the app then above listener no more? But as I mentioned on AngularFire where I have followed the same pattern and it detects the App open from the Kill/Exit use case. But here it is not? Any reason for that?

P.S.

The importance of this functionality is that we do not need to maintain/use any local storage plugin to store user details. i.e. I can handle all the routings, etc. within that Listner hence it has user details.

[robingenz]

Yes it does, the listener continues to work even after restarting (after quitting) the app.
You just have to initialize the auth instance with the persistence flag, if you are using the plugin in combination with the Firebase JS SDK:

function whichAuth() {
  let auth
  if (Capacitor.isNativePlatform()) {
    auth = initializeAuth(app, {
      persistence: indexedDBLocalPersistence
    })
  } else {
    auth = getAuth()
  }
  return auth
}

(Source: https://harryherskowitz.com/2021/08/23/firebase-capacitor.html)

Does that answer your question?

[Sampath-Lokuge]

I do not use Firebase JS SDK since this is a native-only app. So I'll provide you sample app to reproduce this soon. Thanks!

[github-actions]

It looks like there hasn't been a reply in 30 days, so I'm closing this issue.

[JSponaugle]

@robingenz Can you provide the persistence into your demo. To show how you would go by doing this.

[robingenz]

@robingenz Can you provide the persistence into your demo. To show how you would go by doing this.

@JSponaugle Yes, please create a feature request in the demo app repo for tracking.

[braincomb]

@Sampath-Lokuge were you able to resolve this? I have the same issue where authStateChange never fires.

[Sampath-Lokuge]

@braincomb Yes, I have used the Capacitor Storage plugin to store the user details.

firebase-authentication.service.ts

async setFirebaseAuthenticationState(): Promise<void> {
   try {
    
     const user = await this.storageService.get<UserModel>('user');

     if (user) {
       this.userDataService.setUser(user);

       this.router.navigateByUrl('tabs/home');
     } else {
       this.router.navigateByUrl('auth/log-in');
     }
   } catch (error) {
     this.router.navigateByUrl('auth/log-in');
   }
 }

app.component.ts

 ngOnInit(): void {
   this.firebaseAuthenticationService.setFirebaseAuthenticationState();
  }

Please let me know if you'll need more details here.