java - Spring Boot security shows Http-Basic-Auth popup after failed login -

i'm creating simple app school project, spring boot backend , angularjs frontend, have problem security can't seem solve.

logging in works perfectly, when enter wrong password default login popup shows up, kind of annoying. i've tried annotation 'basicwebsecurity' , putting httpbassic on disabled, no result (meaning, login procedure doesn't work @ anymore).

my security class:

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                             && !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;     } } 

does have idea on how prevent popup showing without breaking rest?

solution

added angular config:

myangularapp.config(['$httpprovider',   function ($httpprovider) {     $httpprovider.defaults.headers.common['x-requested-with'] = 'xmlhttprequest';   } ]); 

let's start problem

it not "spring boot security popup" browser popup shows up, if response of spring boot app contains following header:

www-authenticate: basic 

in security configuration .formlogin() shows up. should not required. though want authenticate through form in angularjs application, frontend independent javascript client, should use httpbasic instead of form login.

how security config like

i removed .formlogin() :

@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); } 

how deal browser popup

as mentioned popup shows if response of spring boot app contains header www-authenticate: basic. should not disabled in spring boot app, since allows explore api in browser easily.

spring security has default configuration allows tell spring boot app not add header in response. done setting following header request:

x-requested-with: xmlhttprequest 

how add header every request made angularjs app

you can add default header in app config that:

yourangularapp.config(['$httpprovider',   function ($httpprovider) {     $httpprovider.defaults.headers.common['x-requested-with'] = 'xmlhttprequest';   } ]); 

the backend respond 401-response have handle angular app (by interceptor example).

if need example how have @ shopping list app. done spring boot , angular js.