I'm writing some browser side dynamic functionality and using HTTP Basic Auth to protect some resources. The user experience is very important and is highly customized.
Here's a simple test JQuery method that eventually will test if a user has supplied the right credentials in a form:
$(document).ready(function() {
$("#submit").click(function() {
var token = Base64.encode($('#username').val() + ':' + $('#password').val());
$.ajax({
url: '/private',
method: 'GET',
async: false,
beforeSend: function(req) {
req.setRequestHeader('Authorization', 'test:password');
},
error: function(request, textStatus, error) {
if (request.status == 401) {
alert('401');
}
}
});
return false;
});
});
If they are not allowed to access /private
, at the moment they should see just the alert box. However, on Firefox, a browser-provided login form pops up (to retry with new credentials). Safari does not do this.
We want to completely control the experience with custom forms, fades, transitions, etc. How can I keep Firefox's default box from being shown? (If this will be an issue when we test for IE, I'd love to hear solutions there, too.)