AngularJS Firebase logout user not working

Question

My logout function, linked to a logout button is:

$scope.logoutUser = function() {
  var ref = new Firebase("https://buzzmovieionic.firebaseio.com");
  ref.unauth();
  console.log(ref.getAuth);
  $state.transitionTo('login');
}

When I click logout, it prints this to the console:

function (){x("Firebase.getAuth",0,0,arguments.length);return this.k.P.we()}

I am checking for authData in my other controller with:

CONTROLLER:

.controller('SearchCtrl',
    function ($scope, $http, Movie, $state, UsersRef, AuthData, $timeout) {
      $scope.$on('$ionicView.enter', function () {
        if (!AuthData) {
          console.log("Auth data null!");
          swal("Unauthorized", "You are not logged in", "error");
          $state.transitionTo('login');
        } else {
          console.log("Auth data found: " + AuthData);
          //do stuff
        }
    });
})

FACTORY:

.factory("AuthData", [
    function () {
      var ref = new Firebase("https://buzzmovieionic.firebaseio.com");
      var data = null;
      ref.onAuth(function (authData) {
        if (authData) {
          data = authData;
        }
      });
      return data;
    }
  ])

If I logout, then go back to the page linked to SearchCtrl by changing the URL, it still says it found the authData.

However, if I try and go to the search page the FIRST time I open the app, before anybody has logged in, it gives me the right error message and exits out to the login page.

How can I ensure the user can't go back into the app after logging out?

You're missing parentheses after getAuth: console.log(ref.getAuth()); — Frank van Puffelen
– Frank van Puffelen, Commented Apr 30, 2016 at 3:52
@FrankvanPuffelen added them, now it prints null after logout. Why does it then say Auth Data was found. — Nishant Roy
– Nishant Roy, Commented Apr 30, 2016 at 4:51

Community · Accepted Answer · 2020-06-20 09:12:55Z

Welcome to async programming 101.

Firebase's onAuth methods listens for changes on auth state. When the auth state changes, the callback method you provide is invoked. But while it's waiting for auth state changes, your other code continues to run.

It most easy to see this if you add some log statements to your code:

.factory("AuthData", [
    function () {
      var ref = new Firebase("https://buzzmovieionic.firebaseio.com");
      var data = null;
      console.log('before onAuth');
      ref.onAuth(function (authData) {
        console.log('in callback');
        if (authData) {
          data = authData;
        }
      });
      console.log('after onAuth');
      return data;
    }
  ])

The output is going to be:

before onAuth

after onAuth

in callback

Which is likely not what you expected when you wrote this code.

The simplest way to fix this in your code is to use the synchronous ref.getAuth() method:

.factory("AuthData", [
    function () {
      var ref = new Firebase("https://buzzmovieionic.firebaseio.com");
      return ref.getAuth();
    }
  ])

But you're going to run into this asynchronicity problem quite often. I highly recommend using and studying AngularFire instead of reinventing the wheel.

Muli Yulzary · Accepted Answer · 2016-04-30 01:38:33Z

0

You are never cleaning data inside AuthData so it will always have data after the first guy logs in. I'm not familiar with Firebase but you need something like this in your AuthData factory:

.factory("AuthData", [
function () {
  var ref = new Firebase("https://buzzmovieionic.firebaseio.com");
  var data = null;
  ref.onAuth(function (authData) {
    if (authData) {
      data = authData;
    }
    else
      data = null;
  });
  return data;
}
])

edited Apr 30, 2016 at 1:38

answered Apr 30, 2016 at 1:24

Muli Yulzary

2,5793 gold badges23 silver badges42 bronze badges

5 Comments

Nishant Roy Over a year ago

onAuth() docs onAuth() should be a listener, so ideally data should update whenever auth status changes.

Muli Yulzary Over a year ago

then perhaps all you miss is an else statement. I've updated my code so you could try

Muli Yulzary Over a year ago

could you put it in a plunkr?

Nishant Roy Over a year ago

It's an ionic project found here It's hosted at this link

Muli Yulzary Over a year ago

If i'm not mistaken there are plunkr-like sites for Ionic projects. can't recall the name though

Collectives™ on Stack Overflow

AngularJS Firebase logout user not working

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related