Geek Answers Handbook

Firebase $ authWithOAuthRedirect does not call $ onAuth without refreshing the page

I have a simple Firebase Facebook OAuth listed below following the official tutorial for logging into Ionic Firebase Facebook.

The problem is that as soon as I click on the login button using Facebook, I am redirected to Facebook, I am logged in and I am redirected back to my application. However, the problem is that I remain on the login page. The strange thing is that if I physically update my browser (testing with ionic serve ) by pressing F5 onAuth triggers, I will be redirected to the Items page. If I do not update the browser, onAuth will not be called.

Has anyone had this problem? How did you solve it?

Please note that yes, I did my research (and started to lose it a little), but I can not get it to work. I searched for SO, tried with $ timeout from google groups, tried to call $ scope. $ Apply (), but all to no avail - so please help me figure out where I am doing this wrong?

 .controller('AppCtrl', function($scope, Items, Auth, $state, $ionicHistory) { $scope.login = function(provider) { Auth.$authWithOAuthRedirect(provider).then(function(authData) { }).catch(function(error) { if (error.code === "TRANSPORT_UNAVAILABLE") { Auth.$authWithOAuthPopup(provider).then(function(authData) { }); } else { console.log(error); } }); }; $scope.logout = function() { Auth.$unauth(); $scope.authData = null; $window.location.reload(true); }; Auth.$onAuth(function(authData) { if (authData === null) { console.log("Not logged in yet"); $state.go('app.login'); } else { console.log("Logged in as", authData.uid); $ionicHistory.nextViewOptions({ disableBack: true }); $state.go('app.items'); } $scope.authData = authData; // This will display the user name in our view }); }) 
 <ion-view view-title="Members area"> <ion-content padding="true"> <div ng-if="!authData"> <button class="button button-positive button-block" ng-click="login('facebook')">Log In with Facebook</button> </div> <div ng-if="authData.facebook"> <div class="card"> <div class="item item-text-wrap">Hello {{authData.facebook.displayName}}!</div> </div> <button class="button button-assertive button-block" ng-click="logout()">Log out</button> </div> </ion-content> </ion-view>

edit: I kind of solved this using $ timeout:

 $timeout(function(){ Auth.$onAuth(function(authData) { if (authData === null) { console.log("Not logged in yet"); $state.go('app.login'); } else { console.log("Logged in as", authData.uid); $ionicHistory.nextViewOptions({ disableBack: true }); $state.go('app.items'); } $scope.authData = authData; // This will display the user name in our view }); }, 3000);

However, this is simply wrong (to put it mildly), and there should be a better way, so please suggest one. In addition, I noticed that a colossal delay of 3 seconds is enough (the few resources that I found were offered 500 ms, it would be enough, but in my case it is not).

+4
source share
2 answers

Submitted on github questions, but will also answer here.

This only happens in the browser using $authWithOAuthRedirect . The example was intended for cordova applications, so this really should not be a problem.

But if you really need it, you can just skip the redirect and use the popup.

  Auth.$authWithOAuthPopup(authMethod).then(function(authData) { console.dir(authData); });
+4
source

This was a bug that was fixed in the latest release of Firebase JS ( 2.3.0 ). Now you can use $authWithOAuthRedirect , and the $ onAuth callback will fire when you go to the page.

+4
source

More articles:


All Articles