title: Spring Boot security shows Http-Basic-Auth popup after failed login
body: <p>I'm currently creating a simple app for a school project, Spring Boot backend and AngularJS frontend, but have a problem with security that I can't seem to solve.</p>
  
  <p>Logging in works perfectly, but when I enter a wrong password the default login popup shows up, which is kind of annoying. I've tried the annotation 'BasicWebSecurity' and putting httpBassic on disabled, but with no result (meaning, that the login procedure doesn't work at all anymore).</p>
  
  <p>My security class:</p>
  
  <pre><code>package be.italent.security;
  
  import org.springframework.beans.factory.annotation.Autowired;
  import org.springframework.boot.autoconfigure.security.SecurityProperties;
  import org.springframework.context.annotation.Configuration;
  import org.springframework.core.annotation.Order;
  import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
  import org.springframework.security.config.annotation.method.configuration.EnableGlobalMethodSecurity;
  import org.springframework.security.config.annotation.web.builders.HttpSecurity;
  import org.springframework.security.config.annotation.web.builders.WebSecurity;
  import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
  import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
  import org.springframework.security.core.userdetails.UserDetailsService;
  import org.springframework.security.web.csrf.CsrfFilter;
  import org.springframework.security.web.csrf.CsrfToken;
  import org.springframework.security.web.csrf.CsrfTokenRepository;
  import org.springframework.security.web.csrf.HttpSessionCsrfTokenRepository;
  import org.springframework.web.filter.OncePerRequestFilter;
  import org.springframework.web.util.WebUtils;
  
  import javax.servlet.Filter;
  import javax.servlet.FilterChain;
  import javax.servlet.ServletException;
  import javax.servlet.http.Cookie;
  import javax.servlet.http.HttpServletRequest;
  import javax.servlet.http.HttpServletResponse;
  import java.io.IOException;
  
  @Configuration
  @EnableGlobalMethodSecurity(prePostEnabled = true)
  @Order(SecurityProperties.ACCESS_OVERRIDE_ORDER)
  public class SecurityConfiguration extends WebSecurityConfigurerAdapter {
  
      @Autowired
      private UserDetailsService userDetailsService;
  
      @Autowired
      public void configure(AuthenticationManagerBuilder auth) throws Exception {
          auth.userDetailsService(userDetailsService);
      }
  
      @Override
      public void configure(WebSecurity web){
          web.ignoring()
          .antMatchers("/scripts/**/*.{js,html}")
          .antMatchers("/views/about.html")
          .antMatchers("/views/detail.html")
          .antMatchers("/views/home.html")
          .antMatchers("/views/login.html")
          .antMatchers("/bower_components/**")
          .antMatchers("/resources/*.json");
      }
  
      @Override
      protected void configure(HttpSecurity http) throws Exception {
          http.httpBasic()
                      .and()
                  .authorizeRequests()
                  .antMatchers("/user", "/index.html", "/", "/projects/listHome", "/projects/{id}", "/categories", "/login").permitAll().anyRequest()
                  .authenticated()
                      .and()
                  .csrf().csrfTokenRepository(csrfTokenRepository())
                      .and()
                  .addFilterAfter(csrfHeaderFilter(), CsrfFilter.class).formLogin();
      }
  
      private Filter csrfHeaderFilter() {
          return new OncePerRequestFilter() {
              @Override
              protected void doFilterInternal(HttpServletRequest request,
                                              HttpServletResponse response, FilterChain filterChain)
                      throws ServletException, IOException {
                  CsrfToken csrf = (CsrfToken) request.getAttribute(CsrfToken.class
                          .getName());
                  if (csrf != null) {
                      Cookie cookie = WebUtils.getCookie(request, "XSRF-TOKEN");
                      String token = csrf.getToken();
                      if (cookie == null || token != null
                              &amp;&amp; !token.equals(cookie.getValue())) {
                          cookie = new Cookie("XSRF-TOKEN", token);
                          cookie.setPath("/");
                          response.addCookie(cookie);
                      }
                  }
                  filterChain.doFilter(request, response);
              }
          };
      }
  
      private CsrfTokenRepository csrfTokenRepository() {
          HttpSessionCsrfTokenRepository repository = new HttpSessionCsrfTokenRepository();
          repository.setHeaderName("X-XSRF-TOKEN");
          return repository;
      }
  }
  </code></pre>
  
  <p>Does anybody have an idea on how to prevent this popup from showing without breaking the rest?</p>
  
  <p><strong>solution</strong></p>
  
  <p>Added this to my Angular config:</p>
  
  <pre><code>myAngularApp.config(['$httpProvider',
    function ($httpProvider) {
      $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
    }
  ]);
  </code></pre>