Issue
Currently, I'm developing an application using Angular and have successfully integrated Facebook login through Satellizer. The functionality works flawlessly on desktop browsers; however, when accessed from mobile devices, it tends to be unreliable. In some cases, the login pop-up fails to close, leaving the main screen in a state of limbo where it displays the home page within the login pop-up rather than returning to the original requesting screen. Any insights into what might be causing this inconsistency would be greatly appreciated.
Code Snippet
Snippet showcasing the authentication process with Facebook:
var commonConfig = {
popupOptions: {
location: 'no',
toolbar: 'yes',
width: window.screen.width,
height: window.screen.height
}
};
var permissions = ["public_profile","email"];
$authProvider.facebook(angular.extend({}, commonConfig, {
clientId: FacebookAppId,
url: ApiUrl+'api/v1/facebook/auth',
scope:permissions,
scopeDelimiter:','
}));
This code block is executed upon clicking "connect using Facebook":
$scope.loginSocial = function () {
$scope.disableSubmitBtn = true;
$scope.showSpinner = true;
$auth.authenticate('facebook')
.then(function (result) {
result = angular.fromJson(result.data.code)
return AuthServerProvider.loginFb(result.facebookCode);
},function (error) {
$scope.status = 'facebook-error';
$scope.disableSubmitBtn = false;
$scope.showSpinner = false;
})
.then(function(){
$scope.disableSubmitBtn = true;
$scope.showSpinner = true;
})
While this code segment functions correctly on desktop browsers, it encounters frequent failures when accessed from mobile browsers during the "$auth.authenticate('facebook')" step.