Firebase $authWithOAuthRedirect doesn't call $onAuth without page refresh


#1

Hey guys,

I’ve actually posted this post on StackOverflow, but since there aren’t many people following the tag there, I thought I’d give it a shot here:

I have a simple Firebase Facebook OAuth login set like below by following the official tutorial for the Ionic Firebase Facebook login.

The problem is that once I click on the login with Facebook button, I get redirected to Facebook, I log in, and I get redirected back to my app. However, the problem is that I stay in the login page. Strange thing is that if I physically refresh my browser (testing with ionic serve) by pressing F5 the onAuth triggers and I get redirected to the Items page. If I don’t refresh the browser, onAuth doesn’t get called.

Did someone have this issue? How did you solve it?

Please note that yes, I did my research (and am slightly starting to lose it), but can’t get it to work. I searched 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’m doing it 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's 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>

#2