I have an ajax-based login system. The user types in their username/password and submits. This is fired asynchronously to a php script that validates etc and then logs the user in or passes back an error message in json.
The issue is that the ajax call is returning an error for a few users but not most. Weirder, when I try to debug by logging in as those users, it works fine using my own system. It seems linked to their specific setup somehow.
To debug I have the jquery ajax error handler email me the error data when logging in fails (along with some browser info). But the ajax errors I'm seeing are 'undefined'.
I'm at a loss as to how to proceed fixing this or further debugging it. I've proven that this isn't linked to a specific version of a browser, or a same origin issue. Any insight into this would be appreciated. Here's my code:
UPDATE I've managed to narrow the problem down to an ajax status response of 0. Some browsers are just stopping the process before it sends, but it's not consistent, leading me to believe it is some sort of plugin or extension that's causing the issue. But it's none of the obvious culprits - noscript, adblocker, etc.
$('#loginMain').on('submit', '#loginForm, #resetForm', function(e){
e.preventDefault(); //don't submit the actual form
$('#loginExtra').addClass('ajaxloader-circle'); //loading spinner
var type = $(this).attr('id');
var submitType = type.replace('Form', '');
var uploadData = new FormData($("#" + submitType + "Form")[0]); //get the form data
uploadData.append('token', '<?php echo $_SESSION['token']; ?>'); //prevent csrf
jQuery.ajax({
url: 'https://www.example.com/ajaxfiles/loginProcess.php',
data: uploadData,
cache: false,
contentType: false,
processData: false,
type: 'POST',
dataType: 'json',
success: function(data) { //on success, reload or present error message
$('#loginExtra').removeClass('ajaxloader-circle');
if (data['state'] == false) { //show error data if it failed
$('#loginFeedback').html('<div style="color:red; text-align: center;">' + data['msg'] + '</div>'); //output any error messages
$('#loginProcessing').html('');
} else {
$('#signupDynamic').html('Success! Reloading...');
$('#signupFeedback').html('');
$('#signupProcessing').html('');
if (submitType == 'login') { //reload on successful login
var url = window.location.pathname;
var page = url.substr(url.lastIndexOf('/') + 1);
if (page != 'login') {
location.reload();
} else { //logging in on the login page
window.location.href = "https://www.example.com"; //redirect to home
}
} else { //output on succesful reset
$('#loginFeedback').html('<div style="color:green; text-align: center;">' + data['msg'] + '</div>'); //output any error messages
$('#resetForm').html('');
}
}
},
error: function(xhr, textStatus, errorThrown){ //on fail, email me what went wrong
var browser = '<?php echo $_SERVER['HTTP_USER_AGENT']; ?>';
var errorText = textStatus + '|' + xhr.responseText + '|' + xhr.statusText + '|' + xhr.readyState + '|' + errorThrown + '|' + browser;
$.post("https://www.example.com/ajaxfiles/errorTracker.php", {data: errorText, token: '<?php echo $_SESSION['token']; ?>'}, function(data) {
window.location.href = "https://www.example.com/login.php";
}, "text");
}
});
});