[FIXED] 404 Page not found after login in custom login page

Issue

I am new in Spring and I'm trying to implement a custom login page. I am able to redirect to the custom login page but it goes to error 404 when I hit the Submit button in my page. The url went to : http://localhost:12345/login?username=abcd&password=qwer

Here is my code of the htm, controller and also the security config:

SecurityConfig.java

http
    .authorizeRequests()
    .antMatchers("/main",
            "/main#/home",
            "/login**",
            "/resources/**",
            "/css/**",
            "/images/**",
            "/js/**",
            "/std/**",
            "/system/**",
            "/favicon.ico",
            "/rest/**",
            "/rest/user/**" ).permitAll()
    .anyRequest().authenticated()
    .and().csrf().disable()
    .formLogin()
    .loginPage("/main#/login").permitAll()
    .defaultSuccessUrl("/main#/home")
    .failureUrl("/main#/page/b").permitAll();

LoginController.Java

@RestController
@RequestMapping(value = "/rest/user")
public class LoginController 
{
    
    @RequestMapping(value = "login")
    public String login(Model model, String error, String logout) {
        if (error != null)
            model.addAttribute("errorMsg", "Your username and password are invalid.");

        if (logout != null)
            model.addAttribute("msg", "You have been logged out successfully.");

        return "login";
    }
}

login-content.htm

<div class="col-md-6 col-md-offset-3">
<h2>Login</h2>
<form name="form" action="/login" ng-controller="LoginController" role="form">
    
    <div class="form-group" ng-class="{ 'has-error': form.username.$dirty && form.username.$error.required }">
        <label for="username">Username</label>
        <input type="text" name="username" id="username" class="form-control" ng-model="user.username" required />
        <span ng-show="form.username.$dirty && form.username.$error.required" class="help-block">Username is required</span>
    </div>
    <div class="form-group" ng-class="{ 'has-error': form.password.$dirty && form.password.$error.required }">
        <label for="password">Password</label>
        <input type="password" name="password" id="password" class="form-control" ng-model="user.password" required />
        <span ng-show="form.password.$dirty && form.password.$error.required" class="help-block">password is required</span>
    </div>

    <input type="submit" ng-click="login(user)" value="Submit">
</form>

Thanks!

Solution

At the end I have modified the "action" in the Login-content.htm to another word (e.g. perform_login) and also added .loginProcessingUrl("/perform_login").permitAll() in the SecurityConfig.java.

Besides, the another problem is Spring Security will need to have a specific POST method in order to authenticate it. I have added method="POST" in the HTM page.

Thanks!

Answered By - Khai Zhan YUONG