Angular displaying flash message after failed login

The problem you're having is that you're always subscribing and you're only getting the "next" handler AKA the handler that will trigger when things go well.

Essentially what you want to do is add the error function to do extra handling over there since the Angular HTTP client sends the HTTP error codes over that function.

Your typescript component could look something like the following:

@Component({...})
export class LoginComponent implements OnInit {

  message : string = ''

  constructor(private auth: AuthService) {}

  ngOnInit() {}
  
  onSubmit() {
    this.authenticationService.login(credentials)
      .subscribe(
         (res: any) => {
           localStorage.setItem('token', res.token);
           this.router.navigateByUrl('/');
         }, 
         (error: any) => {
           // if your server responds with a 4XX or 5XX status code
           // this error handler will be called.
           // here you can have more logic than this
           this.message = 'Invalid username or password'
         }
      }
    });
  }

}

And then make sure you're returning the Observable and NOT the subscription:

@Injectable({ providedIn: 'root' })
export class AuthService {

  constructor(private http: HttpClient, private router: Router) {
    this.authUrl = Appdata.url + "/auth";
  }

  login(credentials): Observable<any> {
    return this.http.post<any>(this.authUrl+'/login', credentials)
  }
}

This should result in you seeing the errors on your (error: any) => {...} function