Firefox asks for password saving even after login component is removed from page

user_9018271 0
Viewed 845

If we have component with login and password fields created in application, then after we navigate to other component through router Firefox asks for password saving. Answering "No" does not help, because notification appears again and again while we are navigating between pages.

But if we did not create component with login and password fields (did not open url with this component), then navigating does not invoke notifications.

Seems like, form with login and password appears in DOM and disappears at the same moment, so Firefox thinks that we have logged in successfully.

But it make no sense, because after we left the page with inputs, component is destroyed.

Chrome does not have such problems, so it's not clear if it is Angular bug or just Firefox bug.

Expected behavior is that Firefox should ask about saving password only once, but not each navigation between pages.

Plunker with demo http://embed.plnkr.co/SUcx1ZJMFVXMeI4aJZ41/

  1. Navigate to Page 1
  2. After that navigate to Password
  3. And after that navigate to Page 1 again. Notification will appear.
  4. Answer "No" and navigate to Page 2. Notification will appear again.

After that try same example, but without creating form with login and password

  1. Reload plunker (may be reload of all page is needed)
  2. Navigate to Page 1
  3. Navigate to Page 2
  4. Notification will not appear until we navigate to Password page.

Did anyone encounter such behavior and know how to solve it? The notification is very annoying.

UPD 18.04.2018: Previously we noticed, that the problem appeared only in JIT compilation. For production and AOT build everything worked fine - no prompt with password save proposal was shown. So there was the problem somewhere, but it was annoying only for developers.

Several days ago we upgraded Angular to version 5.2.10, NodeJS to version 8.11.1 (we used 7.10 before). After that the problem appears in production mode too.

Still there is no solution or clearness what is the cause.

plunker angular firefox authentication
3 Answers

I don't know if this will be helpful. I noticed this problem while using Vue.js when my password element was not enclosed in a <form> element. To remedy I surround my login fields with a <form> element on which I set the preventDefault directive for the submit event. It looks like this in Vue.js:

<form v-on:submit.prevent>
Username: <input v-model="username" />
Password: <input type="password" v-model="password" />
</form>

I should mention that you still do get asked to save the password when you submit the form, but subsequent navigations do not raise the prompt anymore.

user_569740

I just experienced the same issue in React.

The reason is that my login form was not a <form> but a simple <div>. I set it back to <form> and Firefox stopped asking to save credentials on each async call.

I don't know the exact reason though, Chrome has always been fine with it

user_19835320

Yes, that work. Wrapping field into form tag is a very good and simple idea. I did not try this before.

And it's seems very tenable that Firefox is doing in such way. Inputs actually should always be inside form, because in regular applications it's impossible to send data without form. Also placing inputs inside form resolved problem with automatic check of auto-filled form in Chrome. So the following the standards is the best way to avoid unexpected bugs.

user_90182710
Related