Reference implementation of authentication in Ionic 2

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 that doesn’t have a nav I don’t think.

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:


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(() => {

And in myProfile.ts

  logout() {
    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

What I do is to have the root page of the app be a dispatch page with a blank template. The dispatch page subscribes to an observer provided by a service that provides notifications of login/logout and reacts thusly:

   let logsub = (loggedin) => {
      if (loggedin) {
      } else {

This way login and logout can happen through many different paths (switch user, explicit logout, inactivity timeout, &c) and the screen flow logic doesn’t have to know or care about it. All those things interact with the service that manages authentication status.

How would I create a subscrption using angular fire 2 for firebase. This is the example code they show but not sure how to subscribe to the event outside the template

Type: class FirebaseAuth extends ReplaySubject


import {FirebaseAuth} from 'angularfire2';
  selector: 'auth-status',
  template: `
    <div *ng-if="auth | async">You are logged in</div>
    <div *ng-if="!(auth | async)">Please log in</div>
class App {
  constructor (@Inject(FirebaseAuth) public auth: FirebaseAuth) {}

I have a working example here

ngOnInit() {

    // subscribe to the auth object to check for the login status
    // of the user, if logged in, save some user information and
    // execute the firebase query...
    // .. otherwise
    // show the login modal page
    this.auth.subscribe((data) => {
        console.log("in auth subscribe", data)
        if (data) {
            this.authInfo = data.password
            this.bookItems ='/bookItems');
        } else {
            this.authInfo = null

Hi Aaron,
I tried an approach like yours, but the function passed to is not getting called despite successful login with angularfire2.

My sample project is here -

Any idea what’s going wrong?

After updating AngularFire2 to version beta 3, the issue got fixed.

So, in package.json, change as:

"angularfire2": "^2.0.0-beta.3-0930330"

And then, npm install and try running the application. npm install complained of unmet peer dependencies requiring Angular 2 RC 2, and I am using RC3. But it was just a warning, and the app runs fine after this change.