AngularFire Infinite $digest Loop with OAuth browser redirect method

Question

I'm trying to setup AngularFire login with redirect-based OAuth flow in my AngularJS web app, with FireBase backend. I'm using AngularJS 1.3.14, Firebase 2.2.3 and AngularFire 1.0.0.

I tried to setup a basic example, to get auth done in the simplest way, following AngularFire library docs: https://www.firebase.com/docs/web/libraries/angular/api.html#angularfire-users-and-authentication

I completed Google application authentication set up, as described here: https://www.firebase.com/docs/web/guide/login/google.html

In my controller i do:

    var ref = new Firebase("https://xxxxxxx.firebaseio.com");
    $scope.authObj = $firebaseAuth(ref);

and then the following routine is bound to a "login" button in my interface.

    $scope.authObj.$authWithOAuthRedirect("google");

As soon as i click my "login" button, I'm redirected to Google, where I can authorize my app and I can login with my account. Then I'm redirected back to my app, but I see this error in the javascript browser (Chrome) console:

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.3.14/$rootScope/infdig?p0=10&p1=%5B%5D
    at REGEX_STRING_REGEXP (angular.js:63)
    at Scope.$get.Scope.$digest (angular.js:14281)
    at Scope.$get.Scope.$apply (angular.js:14506)
    at bootstrapApply (angular.js:1448)
    at Object.invoke (angular.js:4185)
    at doBootstrap (angular.js:1446)
    at bootstrap (angular.js:1466)
    at angularInit (angular.js:1360)
    at angular.js:26176
    at HTMLDocument.trigger (angular.js:2744)

I can't figure out why this happens and how to solve. It looks like some kind of loop happens while AngularJS bootstraps.

If I change my $scope.authObj.$authWithOAuthRedirect("google"); line with a $authWithOAuthPopup call (see below for exact code), everything works fine:

$scope.authObj.$authWithOAuthPopup("google")
    .then(function(authData) {
        $log.info("Logged in as:", authData.uid);
    }).catch(function(error) {
        $log.info("Authentication failed:", error);
    });

With this code bound to my "login" button, a popup appears, allowing me to login with Google and then I can read the expected auth message in console: Logged in as: google:[undisclosed-21-digit-number].

Any help to better understand AngularFire auth lib will be greatly appreciated. Thank you in advance.

Answer 1

I figured out a solution/workaround. Actually, I think that $authWithOAuthRedirect call from angularfire library does something that I can't understand. I tried with "vanilla" Firebase library (with the very same app structure) and everything is right. To make it work, i followed the instruction from their docs here: https://www.firebase.com/docs/web/guide/user-auth.html#section-login and ref.authWithOAuthRedirect("<provider>", authHandler); works as expected, without redirects, nor digest loops.

I'm still wondering why the AngularFire lib doesn't work, but I got around the problem.

Hope this helps.