1. Introduction
This article is a continuation of our ongoing registration with Spring Security series.
In this article, we are going to have a look at how to develop a custom login page for a user who is returning to our application. The user will be greeted with a standard “Welcome…” message.
2. Adding a Long Lived Cookie
One way to identify if the user is returning to our website is to add a long-lived cookie (e.g. 30 days) after the user has successfully logged in. To develop this logic, we need to implement our AuthenticationSuccessHandler which adds the cookie upon successful authentication.
Let’s create our custom MyCustomLoginAuthenticationSuccessHandler and implement the onAuthenticationSuccess() method:
@Override
public void onAuthenticationSuccess(final HttpServletRequest request,
final HttpServletResponse response, final Authentication authentication)
throws IOException {
addWelcomeCookie(gerUserName(authentication), response);
redirectStrategy.sendRedirect(request, response,
"/homepage.html?user=" + authentication.getName());
}
The focus here is the call to addWelcomeCookie() method.
Now, let’s have a look at the code to add the cookie:
private String gerUserName(Authentication authentication) {
return ((User) authentication.getPrincipal()).getFirstName();
}
private void addWelcomeCookie(String user, HttpServletResponse response) {
Cookie welcomeCookie = getWelcomeCookie(user);
response.addCookie(welcomeCookie);
}
private Cookie getWelcomeCookie(String user) {
Cookie welcomeCookie = new Cookie("welcome", user);
welcomeCookie.setMaxAge(60 * 60 * 24 * 30);
return welcomeCookie;
}
We have set a cookie with key “welcome” and a value that is the current user’s firstName. The cookie is set to expire after 30 days.
The final step is to read the cookie whenever the login form loads and if present, get the value to display the greeting message. We can do this easily with Javascript.
First, let’s add the placeholder “welcometext” to display our message on the login page:
<form name='f' action="login" method='POST' onsubmit="return validate();">
<span id="welcometext"> </span>
<br /><br />
<label class="col-sm-4" th:text="#{label.form.loginEmail}">Email</label>
<span class="col-sm-8">
<input class="form-control" type='text' name='username' value=''/>
</span>
...
</form>
Now, let’s have a look at the corresponding Javascript:
function getCookie(name) {
return document.cookie.split('; ').reduce((r, v) => {
const parts = v.split('=')
return parts[0] === name ? decodeURIComponent(parts[1]) : r
}, '')
}
function display_username() {
var username = getCookie('welcome');
if (username) {
document.getElementById("welcometext").innerHTML = "Welcome " + username + "!";
}
}
The first function simply reads the cookie that was set while the user was logged in. The second function manipulates the HTML document to set the welcome message if the cookie is present.
The function display_username() is invoked on the HTML <body> tag’s onload event:
<body onload="display_username()">
4. Conclusion
In this quick article, we have seen how simple it is to customize the user experience by modifying the default authentication flow in Spring. A lot of complex things can be done based on this simple setup.
The login page for this example can be accessed via /customLogin URL. The complete code for this article can be found over on GitHub.
