Spring Top

Get started with Spring 5 and Spring Boot 2, through the reference Learn Spring course:

>> LEARN SPRING

It’s just plain hard to get true, real-time visibility into a running auth flow.

Parts of the process can be completely hidden from us; if the complete authorization process requires a redirect from a remote OAuth production server, then every debugging effort must go through the production server.

It’s practically unfeasible to debug this locally. There’s no way to reproduce the exact state and no way to inspect what is actually happening under the hood. Not ideal.

Knowing these types of challenges, we built Lightrun - a real-time production debugging tool - to allow you to understand complicated flows with code-level information. Add logs, take snapshots (virtual breakpoints), and instrument metrics without a remote debugger, without stopping the running service, and, most importantly - in real-time and without side effects.

Learn more with this 5-minute tutorial focused on debugging these kinds of scenarios using Lightrun:

>> Debugging Authentication and Authorization Using Lightrun

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.

3. Reading the Cookie on Login Form

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.

Spring bottom

Get started with Spring 5 and Spring Boot 2, through the Learn Spring course:

>> THE COURSE
Security bottom

I just announced the new Learn Spring Security course, including the full material focused on the new OAuth2 stack in Spring Security 5:

>> CHECK OUT THE COURSE
Security footer banner
Comments are closed on this article!