How to disable browser’s default login prompt on 401 response?

Last week I was working on client side caching of user’s auth info, to save one extra call to the server. May be I’m not able to make you understand my task, but at the end of the day, my issues was, the server was responding with 401 error code against an ajax call and that’s why my chrome browser was throwing an ugly login prompt box, before even my client side 401 handler was called.

I was using token based authentication, so even if the user enters his account’s login id and password it was getting rejected. And the ugly looking box stole my sleep that night.

I didn’t want to make the response code to 200 and handle it with some flags inside the response; because I was using a very convention based client side framework ember.js and going against the convention will require a lot of code there. So I had to disable the login prompt programmatically.
But, unfortunately chrome doesn’t provide any way to do that.

How I solved it

After reading more on this behavior of chrome I came to know it’s not actually the only 401 response which causes the login prompt box; but it’s the combination of 401 response and also the header WWW-Authenticate: Basic.

So all I did was I changed the Basic to xBasic. You can change it to anything else or even can remove that; but a response code 401 along with WWW-Authenticate header value as Basic will trigger the login prompt. I can understand it’s kind of a hack. But this is the most convenient solution I could find keeping the conventions right.

Another way of solving

Instead of header you can also change the response code. Some may change it to 200 which is OK, but better to change it to generic 400. In both cases you need to send some flags in your response object which you can use from the client side to handle the UI flow.

About This Author

Hello! I am Paul Shan, a JavaScript Expert, Full Stack and DevOps Engineer cum Consultant based out of Bengaluru, India.

  • Anubhav Srivastava

    This is not just chrome related. This is standard followed throughout. I couldn’t understand your authentication case, but there is no point of WWW-Authenticate if its value is changed to non standard allowed value. Thus, removing it all together would be the same;in case if server is under your control.
    Another point to understand of www-authenticate basic is notion of ‘realm’ to seperate authentication parts of different section of app.

    • Paul Shan

      The login prompt is chrome specific. The header is a standard I know and I also understand changing it to a non-standard will make it kinda unwanted junk. But sometimes changing the valu is easier than removing it. For an example in my case I was using `hapi-auth-basic` and it was easier to tweak the value instead removing it.
      However removing could be the best option if you can. Have added that in the article now. Thanks for pointing out 🙂