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.