Ionic app login screen appears even-though the user is logged-in

Question

I have a problem in my ionic app.

It is that, the login screen pops up for a few seconds before the app redirects to home page(probably till it authenticates with firebase). The login page is confusing for the user if it's logged in already.

In the routing (app-routing.module.ts), I have this :

{ path: '', redirectTo: 'login', pathMatch: 'full' }`

Here is my code (in app.component.js):

    this.common.showLoader('Loading');  //show the loader(it shows up 
                                        //for a few seconds and disapperas)

    this.afAuth.authState.pipe(take(1)).subscribe(authData => {
      if (authData) {
        this.commonService.hideLoader(); //tried this. but not working
        this.router.navigateByUrl('/home');
      } else {
        this.commonService.hideLoader();
        this.router.navigateByUrl('/login');
      }
    });

I have tried using loader. But that does not seem to serve the purpose.
Please help. Thanks in advance.

Answer 1

Your app will not be able to immediately tell if the user is authenticated, at the time a page is first loaded. It takes some time for the Firebase Auth SDK to refresh and validate their auth token.

What you should do instead is show a loading/wait screen until you get the first authState callback. That first callback indicates when the SDK is certain that the user is either definitely signed out or definitely signed in with a valid token. That's information you can use to determine what to show next.