How to handle states when logged in (Ionic, Firebase, AngularJS)?

Question

I am building an app in Ionic and have started to dig into the Firebase Authentication method. So far I have managed to setup a Login through Twitter properly (I can login and l

Answer 1

To succeed read the value using:

toState.authRequired

Please move authRequired: true inside of .state instead of views.

Answer 2

I had the same problem that yours! Take a look how I solved it!

app.js

angular.module('app', ['ionic','firebase', 'app.controllers', 'app.routes', 'app.directives','app.services','app.filters',])

.run(function($ionicPlatform, $rootScope, $state) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if (window.StatusBar) {//
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });

  //stateChange event
  $rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams){
    var user = firebase.auth().currentUser;
    if (toState.authRequired && !user){ //Assuming the AuthService holds authentication logic
      // User isn’t authenticated
      $state.transitionTo("login");
      event.preventDefault(); 
    }
  });
  // Initialize Firebase Here

})

routes.js

angular.module('app.routes', ['ionicUIRouter'])

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider  

  .state('login', {
    url: '/login',
    templateUrl: 'templates/login.html',
    controller: 'loginCtrl'
  })

 .state('menu', {
    url: '/menu',
    templateUrl: 'templates/menu.html',
    abstract:true,
    controller: 'menuCtrl'
  })

  .state('menu.dash', {
    url: '/contas',
    templateUrl: 'templates/dash.html',
    controller: 'contasCtrl',
    authRequired: true
  })

$urlRouterProvider.otherwise('/login')

});

Answer 3

You are almost there. All you need is to ensure your states are marked appropriate with the custom property 'AuthRequired' and listen for $stateChangeStart event to check for authentication. This event fires each time you move with in the application.

.run(function($ionicPlatform, AuthService) {
      //ionic init code    

      //stateChange event
      $rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams){
      if (toState.authRequired && !AuthService.isAuthenticated()){ //Assuming the AuthService holds authentication logic
        // User isn’t authenticated
        $state.transitionTo("login");
        event.preventDefault(); 
      }
    });
}

.state('tab.dash', {
    url: '/dash',
    views: {
      'tab-dash': {
        templateUrl: 'templates/tab-dash.html',
        controller: 'DashCtrl',
        authRequired: true
      }
    }
  })

  .state('tab.chats', {
      url: '/chats',
      views: {
        'tab-chats': {
          templateUrl: 'templates/tab-chats.html',
          controller: 'ChatsCtrl',
          authRequired: true
        }
      }
    })

The best place to have $stateChangeStart event handler would be the app run.