Firebase auth 'onAuthStateChanged()' makes tabs not update

Ionic Framework ionic-v3
1

hello all :grinning:,
I have an app that whenever a user isn’t authenticated he is redirected to login, else, he is directed to the tabs page.
Code (app.component.ts):

  platform.ready().then(() => {
        


        _authFire.auth.onAuthStateChanged((user)=>{
          if(user){
            this.nav.setRoot('TabsPage').then(()=>{
               splashScreen.hide();
           })
          }else{
           this.nav.setRoot('loginPage').then(()=>{
               splashScreen.hide();
             })
          }
        })
      
        
        statusBar.styleDefault();
      });

(tabs.ts)


@IonicPage()
@Component({
  selector: 'page-tabs',
  templateUrl: 'tabs.html',
})
export class TabsPage {
  personal:any = 'PersonalAreaPage';
  maps:any = 'MapPage';
  options:any = 'OptionsPage';
  
  private param: any;
  constructor(public navCtrl: NavController, private alertCtrl: AlertController,private navParam: NavParams, 
    private _loadingCtrl: LoadingController,
    private _userHandler: UserHandlerProvider,
    ) {
      
      

      
    }

(tabs.html)

<ion-tabs selectedIndex="1">
  <ion-tab [root]="personal" tabIcon="person"></ion-tab>
  <ion-tab [root]="maps" tabIcon= "map"></ion-tab>
  <ion-tab [root]="options" tabIcon="options"></ion-tab>
</ion-tabs>

Expectation:
Clicking on a tab will bring user to respected page, and the tab will be highlighted as a result of the page being active. Simple tabs activity.

Problem:
Clicking on a tab does directs to its page, BUT, the icons are not updated, and seems to be stuck at the previous activated tab icon.

(for example, clicking on homeTab will still highlight optionsTab icon even though mapTab is fully loaded)

Problem identified (?):
Simply setting the root (with no ‘onAuthStateChanged()’ invoked) to ‘TabsPage’, seems to fix this bug.
but this is not solution…

Can you please help me with this?

2

FOUND THE SOLUTION

apparently, it wasn’t directly related to ‘onAuthStateChanged()’.

problem -

 this.nav.setRoot('TabsPage').then(()=>{
               splashScreen.hide();
           })

solution -

 _zone.run(()=>{
              this.nav.setRoot('TabsPage').then(()=>{
                splashScreen.hide();
              })
            })
1 Like
3

Thanks @mrg250! Been debugging this same issue for almost two days. Thank you for posting your solution.

1 Like