How to use Spring Security to custom login page?

Issue

I am using Spring Security to my application and here is the security part which authenticates the user but the login page is given by Spring Security:

@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    public void configure(HttpSecurity httpSecurity) throws Exception {
        httpSecurity
            .authorizeRequests()
                .antMatchers("/home*").hasRole("USER")
                .and()
            .formLogin();

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

Instead of Spring’s login page I want to use my login page which is below:

login.html:

<html lang='en'>
    <head>
        <title>WebApp</title>
        <meta charset='utf-8' />

        <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
             <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
             <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
             <link rel="stylesheet" href="css/login.css" />  
    </head>

    <body>
        <div class="login-page">
            <img src='img/taxi_.jpg' style='width: 180px; margin-left: auto; margin-right: auto; display: block; padding-top: 20px; padding-bottom:20px;' />

            <div class="heading">
                <center>Dashboard</center>
            </div>
            <div class="form">
                <form action ="home.html" class="register-form">
                    <input type="text" placeholder="name"/>
                    <input type="password" placeholder="password"/>
                    <input type="text" placeholder="email address"/>
                    <button>create</button>
                    <p class="message">Already registered? <a href="#">Sign In</a></p>
               </form>
               <form action="home.html" class="login-form">
                    <input type="text" placeholder="username"/>
                    <input type="password" placeholder="password"/>
                    <button id="button_login">login</button>
                    <p class="message">Not registered? <a href="#">Create an account</a></p>
               </form>
            </div>
        </div>
    </body>
</html>

How can I use my custom login page to be shown instead of Spring Security’s login page?

Solution

See Spring Security Reference:

While the automatically generated log in page is convenient to get up and running quickly, most applications will want to provide their own log in page. To do so we can update our configuration as seen below:

protected void configure(HttpSecurity http) throws Exception {
  http
      .authorizeRequests()
          .anyRequest().authenticated()
          .and()
      .formLogin()
          .loginPage("/login") 1
          .permitAll();        2
}

1 The updated configuration specifies the location of the log in page.
2 We must grant all users (i.e. unauthenticated users) access to our log in page. The formLogin().permitAll() method allows granting access to all users for all URLs associated with form based log in.

Your modified code:

public void configure(HttpSecurity httpSecurity) throws Exception {
    httpSecurity
        .authorizeRequests()
            .antMatchers("/home*").hasRole("USER")
            .and()
        .formLogin()
            .loginPage("/login.html")
            .permitAll();
}

Answered By – dur

Answer Checked By – Clifford M. (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.