How to implement login flow in ionic 2?

Question

So I'm trying to get started with ionic 2 from ionic 1 and need some guidance on how to set up authentication in my project. Specifically I'm using firebase and angularfire2.

As a general approach should I either:

a. Check for session/localStorage on app.ts and set the rootPage to login if unauthenticated? Using this method if I log the user out and set the nav rootpage back to the login, the tabs are displayed at the bottom.

b. Create the login page as a modal which removes the problem of the tabs appearing at the bottom, but I'm not sure if I should be firing the modal from app.ts since I'm not sure if the application itself has a root view I should be referencing.

Also, should I set up the auth login and logout as a service and refactor it out rather than having it in the login page and the logout button in the profile controllers?

Here's my logic thus far using method A:

app.ts

export class MyApp {
  rootPage: any;
  local: Storage = new Storage(LocalStorage);
  constructor(platform: Platform) {
    this.local.get('user').then(user => {
      if (user) {
        this.rootPage = TabsPage;
      } else {
        this.rootPage = LoginPage;
      }
    });

    platform.ready().then(() => {
      StatusBar.styleDefault();
    });
  }
}

And in myProfile.ts

  logout() {
    this.local.remove('user');
    this.user = null;
    let modal = Modal.create(LoginPage);
    this.nav.present(modal); //should I set the rootPage instead?  if so how do I remove the tabBar or set the rootpage of the containing app root page
  }

Answer 1

a. Check for session/localStorage on app.ts and set the rootPage to login if unauthenticated? Using this method if I log the user out and set the nav rootpage back to the login, the tabs are displayed at the bottom.

You can use Angularfire2 Ionic Provider , Go to this link for more details Angularfire2 Auth with Ionic

import { Observable } from 'rxjs/Observable';
import { Injectable } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
// Do not import from 'firebase' as you'll lose the tree shaking benefits
import * as firebase from 'firebase/app';

@Injectable()
export class AuthService {
  private currentUser: firebase.User;

  constructor(public afAuth: AngularFireAuth) {
    afAuth.authState.subscribe((user: firebase.User) => this.currentUser = user);
  }

  getauthenticated(): boolean {
    return this.currentUser !== null;
  }

  signInWithFacebook(): firebase.Promise<any> {
    return this.afAuth.auth.signInWithPopup(new firebase.auth.FacebookAuthProvider());
  }

  signOut(): void {
    this.afAuth.auth.signOut();
  }

  displayName(): string {
    if (this.currentUser !== null) {
      return this.currentUser.facebook.displayName;
    } else {
      return '';
    }
  }
}

Then from App.ts Import the Provider you just created and then check for Auth status

constructor(public authService: AuthService) {
     let authState = this.authservice.getauthenticated();
     if (authState) {
        this.rootPage = TabsPage;
      } else {
        this.rootPage = LoginPage;
      }
  }

And Finally for the Logout use Navigating from an Overlay Component

import { App } from 'ionic-angular';
constructor(
      public appCtrl: App
    ) {}

    setRoot(Page:any) {
      this.appCtrl.getRootNav().setRoot(Page);

This will not display the Tabs in bottom.