Tell browser to store different passwords for each path under the same domain individually

Question

I'm writing a browser application that has multiple login forms under the same domain but at different paths.

domain.tld/foo/login domain.tld/bar/login domain.tld/bar/boo/login

At the moment all form elements look the same, with no attributes and with only a simple password input with the same name for all pathes and a submit button I attached an on-submit listener to. Password entered is fetched when the listener is called and default submit behavior is prevented. The actual login then happens via AJAX request in the background.

HTML:

<form method="dialog">
  <input name="password" type="password">
  <button type="submit">Login</button>
</form>

Javascript:

form.addEventListener('submit', e => {
  login(); // Do the ajax login request
  e.preventDefault();
  return false;
});

All tested browsers (FF, FFM, C, CM, O, OM) do allow to save the password then which is nice. Sadly the password is saved per subdomain and not per path, causing passwords for previous visited pathes under the same domain to be overwritten.

What is the best way to tell the browsers to save passwords for each URL path individually?

Answer 1

This is not possible in most browsers. For example Mozilla decided 15 years ago that they won't support this feature.

You could implement your own path based "Keep me logged in" system through cookies.

Or you use HTTP authentication with different realms. As described in this post.

location /gabinete-rivera {
    auth_basic "Hijos de Rivera";
    auth_basic_user_file /home/www/public/gabinete-rivera-app/.htpasswd;
    index  index.php index.html;
    try_files $uri $uri/ /index.php?$query_string;
}

location /gabinete-gases {
    auth_basic "Gases Fluorados";
    auth_basic_user_file /home/www/public/gabinete-gases-app/.htpasswd;
    index  index.php index.html;
    try_files $uri $uri/ /index.php?$query_string;
}