Facebook login button onlogin callback fires twice

facebook login tutorial
facebook authentication

Per documentation, the html attribute 'onlogin' can be used to run a callback function after a login is complete

However we're consistently getting the supplied function run twice, causing problems when it does actual work.

While we can catch this with a counter of how many times its run I'd rather have an understanding of why this happens and fix it than apply a workaround. The entirety of the code is below (won't run in snippet):

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>facebook login test</title>
	<script src="/Vendors/jQuery/jquery-3.2.1.min.js"></script>
</head>
	<body>
		<script>
		window.fbAsyncInit = function() {
			FB.init({
				appId      : 'foobar123456', // see https://developers.facebook.com/apps/
				cookie     : true,
				xfbml      : true,
				version    : 'v2.11' // see https://developers.facebook.com/docs/javascript/quickstart
			});
			
			FB.AppEvents.logPageView();   
			
		};

		(function(d, s, id){
			var js, fjs = d.getElementsByTagName(s)[0];
			if (d.getElementById(id)) {return;}
			js = d.createElement(s); js.id = id;
			js.src = "https://connect.facebook.net/en_US/sdk.js";
			fjs.parentNode.insertBefore(js, fjs);
		}(document, 'script', 'facebook-jssdk'));
		</script>

		<!-- LOGIN BUTTON scope at: https://developers.facebook.com/docs/facebook-login/permissions/ -->
		<div class="fb-login-button" data-width="250" data-max-rows="1" data-size="large" onlogin="fbLoginHandler" data-scope="public_profile,email" data-button-type="login_with" data-show-faces="false" data-auto-logout-link="true" data-use-continue-as="true"></div>

		<script>
			console.log("reached script tag");
			var timesfbLoginHandlerFired = 0;
			var fbLoginHandler = ()=>{
				timesfbLoginHandlerFired++;
				console.log("fbLoginHandler fired ["+timesfbLoginHandlerFired+"] times");
			};
		</script>
	</body>
</html>

My Faster workaround was as following:

I just set a variable called fblogin_done

fblogin_done = 0;

And in the function that is being executed twice i put a counter and a blocker with a timer

function CheckLoginState() {
    if (fblogin_done == 1) return; // avoid twice executions
    fblogin_done = 1;
    window.setTimeout(function(){
        fblogin_done = 0; // wait 1 second after a second execution
    }, 1000);
}

A second was enough to me to avoid more than 1 execution,

Event Subscription - Web SDKs, This is the callback function that is triggered when the event is fired. example shows how you can track these events with a simple Facebook Login button. This example will prevent a call to the console log from firing twice, if the button tied to the action is double clicked. The call to the console log will be used to check date information. In the UX Builder on the UX Controls page open the ‘Other Controls’ menu. Click on the [Button] option to add a button control to the component.

It seems to have to do with the data-auto-logout-link set to true.

Setting that to false, stops the button from firing the onlogin function twice.

Without seeing how the SDK handles it, my best guess is that when the button changes to become a logout button, it must be checking for login and triggering the onlogin function a second time.

Login Button - Facebook Login, The Login button is a simple way to trigger the Facebook Login process on The Continue with Facebook button replaces earlier versions of the Login button. onlogin. data-onlogin. A JavaScript function to trigger when the login process is use the Facebook SDK for JavaScript to make API calls on behalf of that person. TLDR: The Facebook API doesn't fire a callback at the FB.getLoginStatus function. This only happens on a small percentage of machines and i could only reproduce it with 2 machines (both on Chrome, different User Account, different OS).

I found this to be a clean way of handling the double call.

function mainLogin() {

   FB.getLoginStatus(function (response) {   // when connected, login, avoids double call                 
      if (response.status === 'connected') {                        
         fbLogin();
      };
   });
}

function fbLogin() {

   FB.api('/me?fields=name,id,email', function (response) {

      if (!jQuery.isEmptyObject(response)) {  //make certain we got a response object
         console.log(response);
         //todo: Get the FB data and process it...

       } else {
          //todo: err handling
       }                
    });
}

Login - Web SDKs, Calling FB.login() results in the JS SDK attempting to open a popup window. As such, this method should only be called after a user click event, otherwise the popup window FB.api('/me', function(response) { console.log('Good to see you,​  Create an account or log into Facebook. Connect with friends, family and other people you know. Share photos and videos, send messages and get updates.

On facebook login calls twice to track event fb_page_view · Issue , Hello, We are using angular4-social-login for manage our social the buttons are shown, it seems to track twice an event "fb_page_view", getLoginStatus ), we still can log in with FB account, get the user info, and the track event is not called twice. Contact GitHub · Pricing · API · Training · Blog · About. Manually Build a Login Flow. For mobile apps, use the Facebook SDKs for iOS and Android, and follow the separate guides for these platforms.. However, if you need to implement browser-based login for a web or desktop app without using our SDKs, such as in a webview for a native desktop app (for example Windows 8), or a login flow using entirely server-side code, you can build a Login flow for

onLogin called twice when app starts · Issue #1054 · aws-amplify , onLogin called twice when app starts #1054 I'm seeing the onLoginWithSignInProvider call back of AWSSignInDelegate called twice when my app starts. For Facebook and Cognito User Pools Sign In providers, the We have moved the code for authentication from this library to AWS iOS SDK  Log into Facebook to start sharing and connecting with your friends, family, and people you know.

Facebook social login shows conflicting information AND javascript , AFTER facebook Login Popup returns. function callback_afterLogin() { FB. <div class="fb-login-button" data-size="large" data-button-type="login_with" BUT the onlogin callback function (onlogin="callback_afterLogin") FIRES TWICE ! The simplest way to add Facebook Login to your app is to add LoginButton from the SDK. The LoginButton is a UI element that wraps functionality available in the LoginManager. When someone clicks on the button, the login is initiated with the permissions set in the LoginManager. The button follows the login state, and displays the correct text

Comments
  • I got the same problem, i think the best solution is to apply manual controls, but a faster solution may be a workaround... i will show you my workaround!