0

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.

2
  • 1
    So if you request localhost:8080/login (by typing it in your browser) does it render? How are you mapping to the login.html page within your server side? Did you look at docs.spring.io/spring-security/site/docs/4.0.x/guides/html5/… Commented Jul 15, 2015 at 21:45
  • It does not render, I just get the same 404 error. I am not sure what you mean by mapping login.html on the server side, prior to trying Spring Security the Angular route mappings were sufficient for getting the expected page navigation and rendering. I have been referencing that Spring guide but it's possible I did not implement something essential in it. Commented Jul 16, 2015 at 12:56

1 Answer 1

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 (i.e. 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.

Sign up to request clarification or add additional context in comments.

2 Comments

I have a controller tagged with Spring's @RestController but that is only to handle my CRUD operations with the database. Are you saying I should be handling my page rendering with that as well somehow? I don't know a lot about this stuff so I have to plead some ignorance
Adding the html suffix was enough to get it to route to my login page. I assumed since I had in my Angular routing for /login to go to /login.html that it would get there and I'm not sure I understand why that doesn't work. But, going straight to the HTML works. Thanks!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.