How to Prevent Save Password Prompt of Browser

Nowadays, almost every browser has functionality to save password whenever user input password form. It used to enhance user experience so that user doesn't need to remember their password.

However, in some cases such as company that has secured information, it leaks security vulnerability for them. So in this post, I'm going to show you how to prevent that dialog to pop-up.

Let's say you have password input that looks like this, App.tsx.

<input
  type="password"
  name="password"
  value={password}
  onChange={(e) => setPassword(e.target.value)}
/>

In order to prevent password save prompt to pop-up, you just need to change input type into free-text, then put a line of CSS to change text into bullets. It is going to look like this.

<input
  type="text"
  name="password"
  autoComplete="off"
  value={password}
  onChange={(e) => setPassword(e.target.value)}
  className="txtPassword"
/>

.txtPassword {
  -webkit-text-security: disc;
}

Here, I add auto-complete to off in order to prevent browser to remember field that we fill in.

That's all, thank you for reading this post. Hope this post helps your problem.