Spring Security not routing to custom login page 404 error

Question

I am trying to implement a custom login page for Spring Security for an Angular web app, but cannot for the life of me get it to properly redirect to my custom login page. I have the following Spring Security config:

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Autowired
    public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception {
        auth.inMemoryAuthentication().withUser("user").password("pass").roles("USER");
    }

    @Override
    protected void configure(HttpSecurity http) throws Exception {

        http.formLogin().loginPage("/login").permitAll().and().authorizeRequests().anyRequest().authenticated();
    }
}

This is my routing logic in the controller:

app.config([ '$routeProvider', function($routeProvider) {

    $routeProvider.when('/', {
        templateUrl : '/admin/listing.html',
        controller : 'ListingCtrl'
    }).when('/create', {
        templateUrl : '/admin/create.html',
        controller : 'CreateCtrl'
    }).when('/edit/:id', {
        templateUrl : '/admin/edit.html',
        controller : 'EditCtrl'
    }).when('/details/:id', {
        templateUrl : '/admin/details.html',
        controller : 'DetailCtrl'
    }).when('/login', {
        templateUrl : '/login.html',
        controller : 'LoginCtrl'
    }).otherwise({
        redirectTo : '/'
    });
}]);

And my folder structure:

- public
  |- admin
     |- create.html
     |- details.html
     |- edit.html
     |- listing.html
  app.js
  index.html
  login.html

Currently when I try to access http://localhost:8080/ it does seem to route to http://localhost:8080/login but once there it gives me a 404 error. I've tried a few other http configurations in the SecurityConfig but haven't gotten anything that properly routes me to my login page, which would ideally happen when any resource in the admin folder is accessed.

Answer 1

If you make an unauthenticated request, you need something on the server side to respond to the URL /login. For example, your server side framework should render login.html.

Angular is client side, so changing your routes will have no impact. The easiest way to do this is to use the following:

http
    .formLogin()
        // NOTE removed .loginPage("/login")
        .permitAll()
        .and()
    .authorizeRequests()
        .anyRequest().authenticated();

The configuration above will tell Spring Security to render the log in page.

Without knowing what other frameworks you are using (ie are you using Spring MVC?), it is impossible to answer how to have your server side framework render login.html. If you are using Spring MVC, you can use the guide I mentioned in the comments.

A stab in the dark (since you haven't yet provided your server side technology), is you can change your configuration to be:

http
    .formLogin()
        // NOTE: added .html suffix
        .loginPage("/login.html")
        .permitAll()
        .and()
    .authorizeRequests()
        .anyRequest().authenticated();

The above configuration will expect a POST to /login.html with the parameters username and password to validate the user.