Disabling browser password saving in my Angular application

Question

I'm creating an Angular application with Devextreme components. The question is that I don't want that in my Login screen when I enter the username and password the browser suggests me to save the password:

I would like to know if from my angular application there is a way to make this not happen and that this solution will work for some of the browsers. I would also like to know a solution to prevent the password fields from suggesting passwords as shown below:

At the moment I have tried adding the following parameters to my text components:

autocomplete="off"
autocomplete="new-password"
autocomplete="chrome-off"

The autocomplete="new-password" option works fine for me so that it does not autocomplete the fields when I have the password saved in the browser. But it still suggests me what I have shown in the two images above.

I hope someone can help. Thank you very much!

I would agree with this answer stackoverflow.com/a/35244490/616535 that it is not a really good practice to try to prevent a browser on HTML/JavaScript level from prompting to save a password. If you're really need it probably there is a way to disable it on browser level settings. — Andrey
– Andrey, Commented Mar 17, 2022 at 9:12
Please have a look at this as well, stackoverflow.com/questions/32775342/… and the this to check which browsers are supported developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-security — Sydney_dev
– Sydney_dev, Commented Nov 4, 2022 at 8:35

cyan-kinesin · Accepted Answer · 2024-02-09 11:31:31Z

1

Currently, you can use autocomplete="one-time-code" to prevent password save prompts. It suggests autocompletion for single-use codes.

Refs:

answered Feb 9, 2024 at 11:31

cyan-kinesin

7541 gold badge6 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Fappy · Accepted Answer · 2024-02-13 10:30:03Z

1

If you're using Devextreme components like DxTextBox, this will resolve the issue:

<dx-text-box ...
    [inputAttr]="{ autocomplete: 'new-password' }">
</dx-text-box>

if using in DxForm:

<dx-form ...>
    <dxi-item ... editorType="dxTextBox" [editorOptions]="{inputAttr: {autocomplete: 'new-password'}}"></dxi-item>
</dx-form>

NOTE: the Chrome team now requires that each input should have a valid autocomplete attribute value. That's why the "chrome-off" and "none" values stopped working.

answered Feb 13, 2024 at 10:30

Fappy

1067 bronze badges

Collectives™ on Stack Overflow

Disabling browser password saving in my Angular application

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related