Why does Chrome sometimes ask for basic auth a second time and Firefox not?

Question

I am running a React frontend and a Laravel backend on a Nginx server (homestead Vagrant box) behind a basic auth, the Nginx configuration for that looks like:

server {
    ...
    location / {
        try_files $uri $uri/ /index.php?$query_string;
        auth_basic              "Restricted";
        auth_basic_user_file    /home/vagrant/Code/project/.htpasswd;
    }
}

This is basically running all right and Chrome (v52, Mac OS X) "sometimes" ask for the auth again on subsequent requests, for example to load a image which is defined as css-background on a button hover. This behaviour (at least for my research so far) is not consistent and I cant reproduce it regularly, it occurs from time to time, I can´t find a reason for the subsequent auth request.

In Firefox (v47.0, Max OS X) I get one auth prompt and then it is working like expected.

Do you have any idea how to debug the specific behaviour in Chrome or make sure that the first auth prompt will be the only one?

Note: The frontend send some further XHR calls to the backend which have also the "authorization" header set to fulfill the basic auth without showing the prompt.

Answer 1

I suspect the issue here is with how you're storing the authorization token locally and the amount of time for which it's valid. Browsers will handle local storage a little differently from one another, so if you're using local storage or session storage, it may simply be a difference in how the data is persisted.

I believe this SO post would probably help answer the question: How persistent is localStorage?

Basically Chrome allows the data to have a set a timeout period while in Firefox "it is not possible to specify an expiration period for any of your data".

If you're using Chrome frequently and clear your cache for other reasons, you're likely also clearing your auth token. If you're only using Firefox for testing, you likely have a cached auth token that's not expiring.