title: How to show "Login In failed.Please try again" message in angular when API returns the response?
body: <p>I have simple login screen in Angular as:</p>
  <p><a href="https://i.stack.imgur.com/51KdK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/51KdK.png" alt="enter image description here" /></a></p>
  <p>When the username and password is entered, it successfully hits the /login URL and if it is correct it goes to the userdashboard or admindashboard and when username and password is incorrect it shows me /403 forbidden page.</p>
  <p>The output in console comes like:</p>
  <p><a href="https://i.stack.imgur.com/XjU3Q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XjU3Q.png" alt="enter image description here" /></a></p>
  <p>However I want to show &quot;Login Failed Please enter correct Username and Password Message&quot; but the API is returning the response in the form</p>
  <pre><code>@PostMapping(value=&quot;/login&quot;)
      public ResponseEntity&lt;UserDTO&gt; login(@RequestBody User user,HttpServletRequest request,HttpServletResponse response){
          try {
              Authentication authentication= authenticationManager.authenticate(new UsernamePasswordAuthenticationToken(user.getEmail(), user.getPassword()));
              final JwtUser userDetails=(JwtUser) authentication.getPrincipal();
              System.out.println(userDetails.getAuthorities());
              SecurityContextHolder.getContext().setAuthentication(authentication);
              final String token=jwtTokenUtil.generateToken(userDetails);
              response.setHeader(&quot;Token&quot;,token);
              return new ResponseEntity&lt;UserDTO&gt;(new UserDTO(userDetails.getUser(), token),HttpStatus.OK);
          } catch(Exception e) {
              throw new UnauthorizedExcpetion(e.getMessage());
          }
      } 
  </code></pre>
  <p>If login is success it returns user object neither it returns the message &quot;Bad Credentials&quot;.</p>
  <p>And in my Angular I have tried to check the error condition and want to apply the message strategy but it is not printing in <code>console.log()</code> if the login is failed but if the login is success then response is printed in <code>console.log()</code>.</p>
  <pre><code>loginUser(user:any){
      this.userService.loginUser(user).subscribe((response) =&gt; {
          console.log(&quot;test&quot;);
          if (response) {
              console.log(response.token);
              if (response.token) {
                  localStorage.setItem('currentUser',JSON.stringify(response));
                  if(response.user.role==='ADMIN') {
                      this.router.navigate(['/admindashboard']);
                  } else {
                      this.router.navigate(['/userdashboard']);
                  }
              } else {
                  console.log(response.error.message);
              }    
          }
      })    
    }
  </code></pre>
  <p>userservice.ts</p>
  <pre><code>loginUser(user:any):Observable&lt;any&gt;{
      const headers=new HttpHeaders({'Access-Control-Allow-Origin':'*'});
      return this.http.post(&quot;http://localhost:8080/login&quot;,user,{headers:headers});
  } 
  </code></pre>