Question

I have a ‘Sign in with Facebook’ button that generates a popup which asks the user to enter FB credentials.

In the case where the user has already joined my app, left the app and then comes back (while still logged into Facebook), I’d like the user to be able to click ‘sign in with Facebook’ and not show the popup.

At the moment, given the situation in the paragraph above, the popup opens for a second and then the page redirects to the logged in state of the app.

I’ve implemented the following code below – I’m a complete noob when it comes to Javascript so whilst the answer might be obvious I don’t know what to do!

window.fbAsyncInit = function() {
     FB.init({
       appId  : '372191216164729',
       status : true, // check login status
       cookie : true, // enable cookies to allow the server to access the session
       xfbml  : true  // parse XFBML
     });
   };

   (function(d) {
     var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     d.getElementsByTagName('head')[0].appendChild(js);
   }(document));

   $(function() {
     $('#fb_connect').click(function(e) {
       e.preventDefault();

       FB.login(function(response) {                    
         if (response.authResponse) {
           // $('#connect').html('Connected! Hitting OmniAuth callback (GET /auth/facebook/callback)...');

                    //this might not be the best way to do this ...
                    $('#welcome_form').submit();
           // since we have cookies enabled, this request will allow omniauth to parse
           // out the auth code from the signed request in the fbsr_XXX cookie
           // $.getJSON('/auth/facebook/callback', function(json) {
           //             $('#connect').html('Connected! Callback complete.');
           //             $('#results').html(JSON.stringify(json));
           //           });
         }
       }, { scope: 'email, read_stream' });
     });
   });

Answer 1

When the page loads, after you then load and initialize the fb sdk use the FB.getLoginStatus method to check the user status.
If the user is already logged in and authorized your app then the response should have the access token, user id, etc.

For example:

FB.getLoginStatus(function(response) {
    if (response.status === "connected") {
        // use the response.authResponse
    }
    else if (response.status === "not_authorized") {
        FB.login(function(response) {
            ...
        }, { scope: "email, read_stream" });
    }
    else {
        // user not logged in to facebook
    }
});