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.)