HTML Single Page Application, fill username and passwords with browser

Question

Is there a way to tell the browser that a login form has been displayed and that it should fill in the field with the saved credentials?

I have this SPA that loads the login view with ajax after the document has been loaded. I have managed to get Firefox to save the credentials after a successful login but when I try to login again the fields are not filled.

Also, I can't seem to get Chrome to prompt to save password since I cannot redirect the browser and Chrome seems to bind to that event.

Answer 1

Browser have their special default behaviors when it comes to recognizing forms and saving login data. What you are asking for is easily achievable when building out a form correctly.

Example 1:

Wrap your input elements in a form tag:

<form method="post" action="/form">
 <input type="password" id="name"></input>
  ect...
</form>

This is so the browser can recognize your form and associate default behaviors.

Example 2:

Make labels for your input elements and associate them with name/ids:

<form method="post" action="/form">
<label for="pssw-1" >Name : </label> 

 <input name="password" type="password" id="pssw-1" ></input>

  ect...
</form>

Example 3:

Apply autocomplete attribute if desired, on form and input elements:

<form method="post" action="/form" autocomplete="on">
<label for="pssw-1" >Name : </label> 

 <input name="password" type="password" id="pssw-1" autocomplete="password"></input>

  ect...
</form>

With autocomplete enabled the browser stores encrypted password/login data in session browser history often located in %APPDATA%\..\Local\Google\Chrome\User Data\Default\Login Data (for Chrome at least).

This native function is often called once user hits the submit button or once credentials are validated.

FYI: I have two spa desktop apps using this syntax and no trouble with autofill / autocomplete.

How browsers store login data:

http://raidersec.blogspot.com/2013/06/how-browsers-store-your-passwords-and.html

Best practices:

https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill?hl=en