Login form autocompletion detection

Question

I am trying to create a web page with a login page. When a user logs in for the first time, the username and password will be saved by the browser if it checks "Stay logged in". When it logs in a second time, the browser will autofill the form, and I can enter it without having to interact with the page.

The problem is that I cannot get the password from the login form. Take a look at my code:

$(document).ready(setTimeout(function() { loginForm.form.submit(function(e) { // I don't have a onsubmit action defined on the login form console.log("Submit"); checkLogin(); // This function should get the username and password value and makes a credential check but I cant get the password here }); var username = $(".login-form__username").val(); var password = $(".login-form__password").val(); // This always is "", an empty string! if (username) { // If the username is set we assume its an autofill console.log("autofilled"); loginForm.form.submit(); // I manually fire the submit event when the browser autofills the username and password field } }, 100)); 

I clearly see that the username and password are being filled in the form, but for some reason I can’t get the password. Everything goes well. If I manually click the submit button. This, of course, will call checkLogin(); , and I can get the password here. But this will not work if I fire the event manually after the document ready event.

Does anyone know how to fix this, or why is this happening?

Thanks David

EDIT

I just realized that this problem only appears in Chrome for Mac , it works like the charm of Chrome for Windows and Firefox. This does not work in Safari because you need to select the user you want to log in to.

In addition, I also realized that the focus should be set on the web page itself, and not on the URL bar or on the refreshButton button

Answer 1

Stay signed in, and Autofill browsers are two pairs of shoes. Staying in the system is usually implemented using a cookie or local storage that contains current user information. A script running on your page validates and logs in the user or submits it to the login form.

Autofill is a browser feature in which the user is prompted to save the credentials in the browser. You do not know through javascript if something is stored. But you can try to check the length of the input content and blindly imagine it. If it works, the credentials were correct.

Answer 2

You can save the username and password in the local storage of the browser

 localStorage.setItem("username", "Danyial.com"); localStorage.setItem("password", "1234567901"); 

And get the value and enter the form

  var username =localStorage.getItem("username"); var password =localStorage.getItem("password"); $(".login-form__username").val(username); $(".login-form__password").val(password);