{"id":2351,"date":"2015-11-30T06:42:17","date_gmt":"2015-11-30T06:42:17","guid":{"rendered":"http:\/\/www.nikola-breznjak.com\/blog\/?p=2351"},"modified":"2015-11-30T07:03:37","modified_gmt":"2015-11-30T07:03:37","slug":"firebase-onauth","status":"publish","type":"post","link":"https:\/\/nikola-breznjak.com\/blog\/stack-overflow\/firebase-onauth\/","title":{"rendered":"Firebase $authWithOAuthRedirect doesn’t call $onAuth without page refresh"},"content":{"rendered":"

\"profile<\/a>
\nI’m a big fan of Stack Overflow<\/a> and I tend to contribute regularly (am currently in the top 0.X%<\/a>).\u00a0In this category (stackoverflow<\/a>)\u00a0of posts, I will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here<\/a>.<\/p>\n

As you may know, I’m really into Ionic framework lately\u00a0and am helping out on StackOverflow with the knowledge I gained so far with the framework. I’m in the top All time answerers<\/a> list.<\/p>\n

I actually asked\u00a0this question<\/a>\u00a0myself:<\/p>\n

I have a simple Firebase Facebook OAuth login set like below by following the official tutorial<\/a> for the Ionic Firebase Facebook login.<\/p>\n

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<\/code>) by pressing F5 the onAuth<\/code> triggers and I get redirected to the Items<\/code> page. If I don’t refresh the browser, onAuth<\/code>doesn’t get called.<\/p>\n

Did someone have this issue? How did you solve it?<\/p>\n

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<\/a> 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?<\/p>\n

\n
\n
.controller('AppCtrl', function($scope, Items, Auth, $state, $ionicHistory) {\r\n    $scope.login = function(provider) {\r\n        Auth.$authWithOAuthRedirect(provider).then(function(authData) {\r\n\r\n        }).catch(function(error) {\r\n            if (error.code === \"TRANSPORT_UNAVAILABLE\") {\r\n                Auth.$authWithOAuthPopup(provider).then(function(authData) {\r\n                    \r\n                });\r\n            } else {\r\n                console.log(error);\r\n            }\r\n        });\r\n    };\r\n\r\n    $scope.logout = function() {\r\n        Auth.$unauth();\r\n        $scope.authData = null;\r\n\r\n        $window.location.reload(true);\r\n    };\r\n\r\n    Auth.$onAuth(function(authData) {\r\n        if (authData === null) {\r\n            console.log(\"Not logged in yet\");\r\n            $state.go('app.login');\r\n        } else {\r\n            console.log(\"Logged in as\", authData.uid);\r\n            \r\n            $ionicHistory.nextViewOptions({\r\n                disableBack: true\r\n              });\r\n            $state.go('app.items');\r\n        }\r\n        $scope.authData = authData; \/\/ This will display the user's name in our view\r\n    });\r\n})<\/pre>\n
<ion-view view-title=\"Members area\">\r\n    <ion-content padding=\"true\">\r\n        <div ng-if=\"!authData\">\r\n            <button class=\"button button-positive button-block\" ng-click=\"login('facebook')\">Log In with Facebook<\/button>  \r\n        <\/div>       \r\n        \r\n        <div ng-if=\"authData.facebook\">\r\n            <div class=\"card\">\r\n                <div class=\"item item-text-wrap\">Hello {{authData.facebook.displayName}}!<\/div>                \r\n            <\/div>\r\n\r\n            <button class=\"button button-assertive button-block\" ng-click=\"logout()\">Log out<\/button>\r\n        <\/div>        \r\n\r\n    <\/ion-content>\r\n<\/ion-view><\/pre>\n
edit:<\/strong> I sort of solved it by using $timeout:<\/p>\n
$timeout(function(){\r\n    Auth.$onAuth(function(authData) {\r\n        if (authData === null) {\r\n            console.log(\"Not logged in yet\");\r\n            $state.go('app.login');\r\n        } else {\r\n            console.log(\"Logged in as\", authData.uid);\r\n\r\n            $ionicHistory.nextViewOptions({\r\n                disableBack: true\r\n              });\r\n            $state.go('app.items');\r\n        }\r\n        $scope.authData = authData; \/\/ This will display the user's name in our view\r\n    });\r\n}, 3000);<\/pre>\n
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).<\/p>\n
Answer, from user\u00a0mhartington<\/a>,\u00a0was:<\/p>\n<\/div>\n<\/div>\n
Posted on the github issues, but will reply here as well.<\/p>\n
This only happens in the browser using $authWithOAuthRedirect<\/code>. The example was intended for cordova apps, so this really shouldn’t be an issue.<\/p>\n
But if you really need it, you could just skip the redirect and use a popup.<\/p>\n
Auth.$authWithOAuthPopup(authMethod).then(function(authData) {\r\n      console.dir(authData);\r\n    });<\/pre>\n
https:\/\/twitter.com\/HitmanHR\/status\/671222279121076224<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"
I’m a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%).\u00a0In this category (stackoverflow)\u00a0of posts, I will be posting my…<\/p>\n","protected":false},"author":1,"featured_media":2360,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[43,35],"tags":[],"class_list":["post-2351","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ionic","category-stack-overflow"],"_links":{"self":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/2351","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/comments?post=2351"}],"version-history":[{"count":3,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/2351\/revisions"}],"predecessor-version":[{"id":2362,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/2351\/revisions\/2362"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media\/2360"}],"wp:attachment":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media?parent=2351"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/categories?post=2351"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/tags?post=2351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}