21 Dec

Mixing Basic Authentication and custom API Authentication

Today I ran into a problem that cost me about two hours, so I thought I want to share this if there is someone googling for the same problem.

The situation

I have a self built admin form that uses a RESTful api to retrieve and store data. The endpoint would be something like http://www.myserver.com/api/book and it’s listening to the obvious methods GET, POST, PUT, DELETE. The form was using the  jQuery.ajax() method to send requests.

This was developed locally and it worked without a problem, as it should.

The problem

When I deployed this to my test server at http://test.myserver.com/api/book something was not working right. Whenever I tried to save a new book, it would show this little window saying “Authentication Required”.

 

password_prompt

The test server is protected by a simple Basic .htaccess authentication. So this was something I’m used to. Unfortunately, entering the username and password didn’t work. It kept asking for the authentication until I clicked cancel. Then it would show that I got a 401 status response (Unauthorized)

Google to the rescue. The things I googled for were:

  • jquery ajax with credentials
  • jquery http post request basic authentication
  • jquery post keeps asking for credentials

Nobody seemed to have the same problem. Some posts on Stackoverflow said you could set an option like this:

That made the Authentication window disappear. So Basic Authentication  seemed to work now. What I found then in Chrome’s Network tab was that the POST request was now returning a response with a status of 403 (Forbidden).

The reason why it sent that, was because my API methods to delete, update or create things require authentication. This is sent as an access token as you can see in the code above.

The cause of the problem

When using basic authentication, the client has to send an HTTP header like this:

But my code was already setting a header for my own API’s authorization mechanism. And that header was set by this line.

Now we have located the problem. I am setting the Authentication header two times. Once for the API and once for the server’s basie http authentication.

The solution

According to some more googling and stackoverflow, it is not allowed to have two authentication headers in the same request. I found somebody else’s answer on StackOverflow that actually had the same problem: http://stackoverflow.com/a/32350368/1838774

Luckily my API was still in an early development phase and not actively used by other applications. This means that I could take the easy route and change my API’s authentication mechanism to look for a custom header instead. I went for a specific one that hopefully nobody else is using.

So my ajax code now looks like this.