I’m integrating Facebook login into my website using the Facebook JavaScript SDK. When users click on the “Login to Facebook” button, I’m getting the following exception:
SyntaxError: Unexpected token '', "{"user_id"... is not valid JSON
at String.parse (<anonymous>)
at b (sdk.js?hash=8acbe35817b4d0360dfcebc5a49d83b8:41:1617)
at Object.decodeObject (sdk.js?hash=8acbe35817b4d0360dfcebc5a49d83b8:84:1174)
at Object.a [as parse] (sdk.js?hash=8acbe35817b4d0360dfcebc5a49d83b8:85:183)
at sdk.js?hash=8acbe35817b4d0360dfcebc5a49d83b8:112:3924
at Object._xdRecv (sdk.js?hash=8acbe35817b4d0360dfcebc5a49d83b8:152:14710)
at sdk.js?hash=8acbe35817b4d0360dfcebc5a49d83b8:152:14123
at s (sdk.js?hash=8acbe35817b4d0360dfcebc5a49d83b8:149:2288)
at sdk.js?hash=8acbe35817b4d0360dfcebc5a49d83b8:149:2782
Here is the relevant part of my JavaScript code:
window.fbAsyncInit = function() {
FB.init({
appId : '844769960868801',
cookie : true,
xfbml : true,
version : 'v20.0'
});
FB.AppEvents.logPageView();
// Now that FB SDK is initialized, you can call FB.getLoginStatus
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
(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'));
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log('Response:', response);
if (response.status === 'connected') {
$('.fb-login-button').hide();
const src = $('.fb-login-button').data('src');
if (src == '') return false;
FB.api('/me?fields=id,name,email,picture.type(large),hometown', function(response) {
console.log("FB API Response:", response);
// Ensure the response is a valid object
if (typeof response !== 'object') {
console.error("Invalid response format:", response);
return;
}
// Convert response to JSON string and log it
try {
var jsonResponse = JSON.stringify(response);
console.log("JSON Stringified Response:", jsonResponse);
} catch (e) {
console.error("Error stringifying response:", e);
return;
}
// Ensure JSON string is valid
try {
JSON.parse(jsonResponse);
} catch (e) {
console.error("Invalid JSON string:", e);
return;
}
});
} else if (response.status === 'not_authorized') {
console.log('User is logged into Facebook but not authorized the app.');
FB.login(function(response) {
if (response.authResponse) {
statusChangeCallback(response);
} else {
console.log('User cancelled login or did not fully authorize.');
}
}, { scope: 'public_profile,email' });
} else {
console.log('User is not logged into Facebook.');
FB.login(function(response) {
if (response.authResponse) {
statusChangeCallback(response);
} else {
console.log('User cancelled login or did not fully authorize.');
}
}, { scope: 'public_profile,email' });
}
}
I’ve ensured that the response is logged before parsing, but I’m still encountering this error. Could someone please help me understand why this error is occurring and how to fix it?
Additional Details:
The error seems to point to an invalid JSON format in the response.
I’ve checked for any unexpected escape characters but couldn’t find any obvious issues.
Any guidance or suggestions would be greatly appreciated!
10