In this article, we’ll explore how to implement a simple login and logout pages with Spring MVC for a web application that uses Spring Security for authentication. We’ll cover error handling, message localization, and various customizations to enhance the user experience.
You will need to add the following themeleaf dependencies to display the errors on HTML pages.
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.thymeleaf.extras</groupId>
<artifactId>thymeleaf-extras-springsecurity6</artifactId>
</dependency>
<!-- Other dependencies -->
</dependencies>1. The Login Page
Let’s start by defining a simple login page:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Login Page</title>
</head>
<body>
<h1>Login</h1>
<form th:action="@{/login}" method="post">
<div th:if="${param.error}">
<p th:text="#{login.error}">Login error message</p>
</div>
<div>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit">Login</button>
</form>
</body>
</html>In this example, we’re using Thymeleaf as the template engine for rendering the login page. The th:action="@{/login}" attribute specifies the URL to submit the form for authentication.
We’re also displaying an error message using th:if="${param.error}" if the authentication fails. The th:text="#{login.error}" attribute retrieves the localized error message from a resource bundle (more on this later).
2. Localization
Spring Security provides built-in support for localization, allowing you to display messages in different languages based on the user’s locale.
2.1 Creating Resource Bundles
To localize messages, you need to create resource bundles containing the translations for each language you want to support. These resource bundles should be placed in the src/main/resources directory.
For example, to support English and Spanish languages, you would create the following files:
messages.properties(default language, English)messages_es.properties(Spanish translations)
Here’s an example of the messages.properties file:
login.error=Invalid username or password
login.title=Login PageAnd the messages_es.properties file:
login.error=Usuario o contraseña inválidos
login.title=Página de Inicio de Sesión2.2 Configuring Localization in Spring Security
To enable localization in Spring Security, you need to configure a MessageSource bean in your security configuration:
import org.springframework.context.MessageSource;
import org.springframework.context.support.ReloadableResourceBundleMessageSource;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.web.SecurityFilterChain;
@EnableWebSecurity
public class SecurityConfig {
@Bean
public MessageSource messageSource() {
ReloadableResourceBundleMessageSource messageSource = new ReloadableResourceBundleMessageSource();
messageSource.setBasename("classpath:messages");
messageSource.setDefaultEncoding("UTF-8");
return messageSource;
}
@Bean
public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
http
.authorizeHttpRequests(authz -> authz
.anyRequest().authenticated()
)
.formLogin(form -> form
.loginPage("/login")
.permitAll()
);
return http.build();
}
}In this configuration, we create a ReloadableResourceBundleMessageSource bean and set the base name (classpath:messages) to load the resource bundles messages.properties and messages_es.properties.
3. Displaying Error Messages
3.1 Login Validation Errors
You can use JavaScript to validate the login form before submitting it to the server. This helps provide a better user experience by displaying localized error messages without requiring a round-trip to the server.
<script th:inline="javascript">
function validate() {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
if (username === '' && password === '') {
alert([[#{login.username.required}]] + ' and ' + [[#{login.password.required}]]);
return false;
}
if (username === '') {
alert([[#{login.username.required}]]);
return false;
}
if (password === '') {
alert([[#{login.password.required}]]);
return false;
}
return true;
}
</script>In this script, we’re using Thymeleaf’s th:inline="javascript" to inline the localized messages from the resource bundles. The [[#{login.username.required}]] and [[#{login.password.required}]] expressions retrieve the corresponding localized messages.
3.2 Authentication Errors
If the authentication fails, Spring Security automatically redirects to the login page with an error parameter in the query string. You can display an error message based on this parameter using Thymeleaf:
<div th:if="${param.error}">
<p th:text="#{login.error}">Login error message</p>
</div>4. Handling logout errors in a Spring Security
Handling logout errors in a Spring Security web application is relatively straightforward. Here’s how you can do it:
- Create a Logout Page
First, create a dedicated logout page (e.g., logout.html) where you can display any logout errors. Here’s an example using Thymeleaf:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Logout Page</title>
</head>
<body>
<h1>Logout</h1>
<div th:if="${param.logoutError}" class="error">
<p th:text="#{logout.error}">Logout error message</p>
</div>
<div th:unless="${param.logoutError}">
<p th:text="#{logout.success}">Logout success message</p>
</div>
<a th:href="@{/login}">Login</a>
</body>
</html>In this example, we’re displaying a logout error message using th:if="${param.logoutError}". If no logout error occurred, we display a success message using th:unless="${param.logoutError}". The messages are retrieved from resource bundles using th:text="#{...}".
- Configure Logout in Spring Security
Next, configure the logout handler in your Spring Security configuration:
import org.springframework.security.web.authentication.logout.LogoutSuccessHandler;
@EnableWebSecurity
public class SecurityConfig {
@Bean
public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
http
.logout(logout -> logout
.logoutSuccessHandler(logoutSuccessHandler())
.logoutSuccessUrl("/logout")
);
// Other configurations...
return http.build();
}
@Bean
public LogoutSuccessHandler logoutSuccessHandler() {
return new CustomLogoutSuccessHandler();
}
}In this configuration, we’re setting the logoutSuccessUrl to /logout, which is the URL of our logout page. We’re also using a custom LogoutSuccessHandler implementation to handle any logout errors.
- Implement the Custom LogoutSuccessHandler
Create a custom LogoutSuccessHandler implementation to handle logout errors:
import java.io.IOException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.security.core.Authentication;
import org.springframework.security.web.authentication.logout.SimpleUrlLogoutSuccessHandler;
public class CustomLogoutSuccessHandler extends SimpleUrlLogoutSuccessHandler {
@Override
public void onLogoutSuccess(HttpServletRequest request, HttpServletResponse response,
Authentication authentication) throws IOException, ServletException {
String refererUrl = request.getHeader("Referer");
if (refererUrl != null && refererUrl.contains("/error")) {
String logoutErrorUrl = refererUrl + "?logoutError=true";
response.sendRedirect(logoutErrorUrl);
} else {
super.onLogoutSuccess(request, response, authentication);
}
}
}In this example, we’re extending the SimpleUrlLogoutSuccessHandler and overriding the onLogoutSuccess method. If the user is being redirected from an error page (determined by checking the Referer header), we append a logoutError=true parameter to the URL and redirect the user to the logout page with the error parameter. Otherwise, we defer to the default behavior of the SimpleUrlLogoutSuccessHandler.
- Add Logout Error Messages to Resource Bundles
Finally, add the logout error and success messages to your resource bundles:
# messages.properties
logout.error=An error occurred during logout
logout.success=You have been logged out successfully# messages_es.properties
logout.error=Se produjo un error durante el cierre de sesión
logout.success=Ha sido desconectado con éxitoWith these changes in place, any errors that occur during the logout process will be displayed on the logout page, along with the appropriate localized message based on the user’s locale.
By following these steps, you can provide a user-friendly and localized logout experience in your Spring Security web application, ensuring that users are informed of any errors that may occur during the logout process.
5. Conclusion
In this article, we explored how to handle login errors and enable localization for error messages in a Spring Security web application. We created a basic login page using Thymeleaf, configured Spring Security to handle the login process, and created resource bundles to store localized messages. By following these steps, you can provide a user-friendly and localized login experience for your web application users.