Angular exposes login and password in browser address bar

Question

I have an Angular 9 application. Sometimes (very rare) I face a problem when my auth data is exposed right in the browser address bar E.g. instead of

http://localhost:8080/#/application/48

it for some reason looks like

http://localhost:8080/?username=foo&password=bar#/application/48

It happence not very oftern but anyway. I use an ng-idle library in my app. It makes the application to returns back to login page after some idle timeout. And according to my observations the problem occurrs after the ng-idle job is done.

What is the problem? Is there any way to strictly prohibit the exposing?

Answer 1

Probably you have a login form that is being submitted with the username and password, This is the default behaviour of form, Here is how you can stop the submission of form and manually submit the form to API.

//HTML
<form (submit)="onSubmit($event)">
 <input type="text" name="username">
 <input type="password" name="password">
 <button>Submit</button>
</form>

//TS
onSubmit(evt) {
 evt.preventDefault();//Stops submitting form
 //Call API to login
}