Question

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

Answer 1

In case you haven’t read it:

How can I supress the browser's authentication dialog?

Doesn’t look too promising 🙂