Current Situation:
When authenticating the username and password in my Ionic 2 project using WebApi 2 token authentication, a token is returned if the credentials are correct. However, a 400 bad request error is returned if the credentials are incorrect. Upon receiving a response, I navigate to the next page, but if an error occurs, a custom error message is displayed.
Challenge:
One issue I am encountering is that when entering wrong credentials for the first time, only the custom error message is shown. But upon entering wrong credentials again, both the custom error message and the default Ionic error message are displayed.
Code Snippet:
login.ts
doLogin() {
if (this.Username !== undefined && this.Password !== undefined) {
this.loading.present();
this.authSrv.login(this.Username, this.Password).subscribe(data => {
this.navCtrl.setRoot('HomePage');
this.loading.dismiss();
}, (err) => {
this.errorMsg("Invalid Username/Password !" + err);
this.loading.dismiss();
});
}
else {
this.errorMsg("Please enter Username/Password");
}
}
auth-service.ts
login(username, password) {
let headers = new Headers();
headers.append('Content-Type', 'application/x-www-form-urlencoded');
let urlSearchParams = new URLSearchParams();
urlSearchParams.append('username', username);
urlSearchParams.append('password', password);
urlSearchParams.append('grant_type', 'password');
let body = urlSearchParams.toString()
return this.http.post('http://' + this._api + '/postoken', body, { headers: headers }
)
.map(res => res.json())
.map((res) => {
if (res !== null) {
localStorage.setItem('acess_token', res["access_token"]);
localStorage.setItem('access_type', res["access_type"]);
localStorage.setItem('expires_in', res["expires_in"]);
this.loggedIn = true;
}
return res;
});
}
Screencast:
https://i.stack.imgur.com/GMFo4.gif
Error Screenshot:
https://i.stack.imgur.com/FZzg1.png
Any suggestions or advice would be greatly appreciated.