Parse.com Facebook API logIn() method. Callback never gets called

Question

When my click handler calls logIn() function on a client, I see a FB popup and a record being created in User collection, but callback methods are never called. Instead, I see the following in JS console

Uncaught TypeError: Cannot read property 'getTime' of null parse-1.2.18.min.js:3

Here is the code on my page

Setting up FB API

 <script>
    window.fbAsyncInit = function() {
      Parse.FacebookUtils.init({
        appId      : 757503280935086,
        xfbml      : true,
        version    : 'v2.0'
      });
    };

    (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 = "//connect.facebook.net/en_US/sdk.js";
       fjs.parentNode.insertBefore(js, fjs);
     }(document, 'script', 'facebook-jssdk'));
</script>

Calling login method

$scope.signupFB = function() {
    Parse.FacebookUtils.logIn(null, {
      success: function(user) {
        //never get here
        $timeout(function() {
            $rootScope.theUser = user;
            $location.path("/properties");
         });
      },
      error: function(user, error) {
        $scope.error = "User cancelled the Facebook login or did not fully authorize.";
      }
    });
  }

The FB app has a website "Platform" enabled.

Next time I tried I saw

Uncaught Error: Setting authResponse is not supported 

in JS console.

Answer 1

The problem comes from using the v2 facebook api.

Switching to the old version with Timothy's fix works.

    window.fbAsyncInit = function() {
        Parse.FacebookUtils.init({
            appId      : '' // Facebook App ID
        });
    };
    (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 = "//connect.facebook.net/en_US/all.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

Notice including all.js not sdk.js

Answer 2

NOTE: This fix is no longer required (and instead will actually break it) as Facebook fixed the API call to return the date in the old string format.

Facebook added v2.0 of the API recently, unfortunately they broke Parse. In particular Parse uses a very strict rule for reading the date from the Facebook response.

A workaround is to download the parse-1.2.18.js file, and update the Parse._parseDate function, then load that JS file into your site and change your pages to use that instead of the current version:

Parse._parseDate = function(iso8601) {
    var regexp = new RegExp(
      "^([0-9]{1,4})-([0-9]{1,2})-([0-9]{1,2})" + "T" +
      "([0-9]{1,2}):([0-9]{1,2}):([0-9]{1,2})" +
      "(.([0-9]+))?" + "Z$");

Update it to this:

Parse._parseDate = function(iso8601) {
    var iso8601 = iso8601.split(“+”)[0] + “Z”;
    var regexp = new RegExp(
      "^([0-9]{1,4})-([0-9]{1,2})-([0-9]{1,2})" + "T" +
      "([0-9]{1,2}):([0-9]{1,2}):([0-9]{1,2})" +
      "(.([0-9]+))?" + "Z$");

Basically it is just stripping off any “+00:00” from the end and adding the “Z” back on so that it works again.

You could make it more robust (in case Facebook revert to the old date format) by using this instead:

var iso8601 = iso8601.split(“+”)[0].split(“Z”)[0] + “Z”;

That way if the “Z” gets put back on we grab everything before it and don’t break.

There’s a bug logged in the Facebook bug tracker that also shows an updated regexp that will work with both, I don’t have the link handy though.

UPDATE: Also ensure you're using the right version of the API.

If you follow the instructions on Facebook now, they want you to have a section like this:

(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 = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

Note that if you are using the sdk.js you'll need to pass a version parameter to the init call, which for Parse will end up looking like this:

window.fbAsyncInit = function() {
    Parse.FacebookUtils.init({
        appId      : yourAppId,
        xfbml      : true,
        version    : 'v1.0'
    });
};

We are explicitly setting the version to 1.0 until such time as Parse update their code to handle 2.0.