(RESOLVED) Hide TabsPage before Login

app.component.ts:

export class AppComponent {

  // [root]="rootPage"
  public rootPage: any = 'LoadingPage';

  ...

  constructor(public config: Config,
              public platform: Platform,
              private authService: AuthService,
              private swService: ServiceWorkerService,
              private logger: LoggerService) {

    this.initialiseApp();
  }

  private initialiseApp() {

    ...

    this.authService.afAuth.authState.subscribe(user => {

      if (user) {
        this.rootPage = 'TabsPage';
      } else {
        this.rootPage = 'SignInPage';
      }
    }, () => {
      this.rootPage = 'SignInPage';
    });

  }

sign-in.page.ts:

  public signIn() {

    const email = this.emailPasswordGroup.controls['email'].value;
    const password = this.emailPasswordGroup.controls['password'].value;

    this.authService.signInWithEmailAndPassword(email, password).then(() => {
      this.navCtrl.setRoot('TabsPage');
    }).catch((error) => {
      ...
    });
  }

auth.service.ts:

  public signInWithEmailAndPassword(email: string, password: string): Promise<any> {
    return this.afAuth.auth.signInWithEmailAndPassword(email, password);
  }

Sign In:

Tabs:

1 Like