Ionic, Stack Overflow

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

I’m a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%). In this category (stackoverflow) of posts, I will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here.

As you may know, I’m really into Ionic framework lately and am helping out on StackOverflow with the knowledge I gained so far with the framework. I’m in the top All time answerers list.

I actually asked this question myself:

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, onAuthdoesn’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>

edit: I sort of solved it by 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's name in our view
    });
}, 3000);

However, this just feels wrong (mildly put), and there has to be a better way, so please suggest one. Also, I noticed that the whopping 3second delay is barely enough (few of the resources I found suggested 500ms would be enough, but in my case, that’s not the case).

Answer, from user mhartington, was:

Posted on the github issues, but will reply here as well.

This only happens in the browser using $authWithOAuthRedirect. The example was intended for cordova apps, so this really shouldn’t be an issue.

But if you really need it, you could just skip the redirect and use a popup.
Auth.$authWithOAuthPopup(authMethod).then(function(authData) {
      console.dir(authData);
    });
https://twitter.com/HitmanHR/status/671222279121076224