Login doesn’t work in custom login page for Spring Security

I am having an issue where the custom login page doesn’t appear to be working properly. It sends me to the login?error url, rather than the index page. When using the default Spring Security page, it works exactly as intended. I have placed the code below for the html page and the code dealing with the security and custom page in general.

I’m also using a postgresql database if that’s somehow involved here.

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org">
    <head>
        <title>Index</title>
        <link href="webjars/bootstrap/5.1.0/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
         <div class="container col-xl-10 col-xxl-8 px-4 py-5">
            <div class="row align-items-center g-lg-5 py-5">
              <div class="col-lg-7 text-center text-lg-start">
                <h1 class="display-4 fw-bold lh-1 mb-3">Twitter-Clone</h1>
                <p class="col-lg-10 fs-4">You must sign in before accessing the website. THYMELEAF</p>
              </div>
              <div class="col-md-10 mx-auto col-lg-5">
                <form class="p-4 p-md-5 border rounded-3 bg-light" th:action="@{/login}" method="post" name="f">
                  <div class="form-floating mb-3">
                    <input type="text" class="form-control" id="floatingInput username" placeholder="username">
                    <label for="floatingInput">User Name</label>
                  </div>
                  <div class="form-floating mb-3">
                    <input type="password" class="form-control" id="floatingPassword password" placeholder="Password" name="password">
                    <label for="floatingPassword">Password</label>
                  </div>
                  <div class="checkbox mb-3">
                    <label>
                      <input type="checkbox" value="remember-me"> Remember me
                    </label>
                  </div>
                  <button class="w-100 btn btn-lg btn-info" type="submit">Login</button>
                  <hr class="my-4">
                  <small class="text-muted">If you don't have an account, <a href="signup">sign up</a>.</small>
                </form>
              </div>
            </div>
          </div>
        <script src="webjars/jquery/3.6.0/jquery.min.js"></script>
        <script src="webjars/bootstrap/5.1.0/js/bootstrap.min.js"></script>
    </body>
</html>

SecurityConfiguration.java

package com.example.demo;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.security.crypto.factory.PasswordEncoderFactories;
import org.springframework.security.crypto.password.DelegatingPasswordEncoder;
import org.springframework.security.crypto.password.PasswordEncoder;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;

@EnableWebSecurity
@Configuration
public class SecurityConfiguration extends WebSecurityConfigurerAdapter{
    
    @Bean(name = "pwdEncoder")
    public PasswordEncoder getPasswordEncoder() {
        DelegatingPasswordEncoder delPasswordEncoder = (DelegatingPasswordEncoder) PasswordEncoderFactories
                .createDelegatingPasswordEncoder();
        BCryptPasswordEncoder bcryptPasswordEncoder = new BCryptPasswordEncoder();
        delPasswordEncoder.setDefaultPasswordEncoderForMatches(bcryptPasswordEncoder);
        return delPasswordEncoder;
    }
    
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            .authorizeRequests()
                .antMatchers("/webjars/**", "/signup").permitAll() 
                .anyRequest().authenticated()
                .and()
            .formLogin()
                .loginPage("/login")
                .permitAll()
                .and()
            .logout()                                    
                .permitAll();
    }
}

Answer

You forgot to include the name attribute on your username input.

Advertisement

Answer