Logout in an OAuth Secured Application

1. Overview

In this quick tutorial, we’re going to show how we can add logout functionality to an OAuth Spring Security application.

We’ll see a couple of ways to do this. First, we’ll see how to logout our Keycloak user from the OAuth application as described in Creating a REST API with OAuth2, and then, using the Zuul proxy we saw earlier.

We’ll use the OAuth stack in Spring Security 5. If you want to use the Spring Security OAuth legacy stack, have a look at this previous article: Logout in an OAuth Secured Application (using the legacy stack).

2. Logout Using Front-End Application

As the Access Tokens are managed by the Authorization Server, they will need to be invalidated at this level. The exact steps to do this will be slightly different depending on the Authorization Server you’re using.

In our example, as per the Keycloak documentation, for logging out directly from a browser application, we can redirect the browser to http://auth-server/auth/realms/{realm-name}/protocol/openid-connect/logout?redirect_uri=encodedRedirectUri.

Along with sending the redirect URI, we also need to pass an id_token_hint to Keycloak’s Logout endpoint. This should carry the encoded id_token value.

Let’s recall how we’d saved the access_token, we’ll similarly save the id_token as well:

saveToken(token) {
  var expireDate = new Date().getTime() + (1000 * token.expires_in);
  Cookie.set("access_token", token.access_token, expireDate);
  Cookie.set("id_token", token.id_token, expireDate);
  this._router.navigate(['/']);
}

Importantly, in order to obtain the ID Token in the Authorization Server’s response payload, we should include openid in the scope parameter.

Now let’s see the logging out process in action.

We’ll modify our function logout in App Service:

logout() {
  let token = Cookie.get('id_token');
  Cookie.delete('access_token');
  Cookie.delete('id_token');
  let logoutURL = "http://localhost:8083/auth/realms/baeldung/protocol/openid-connect/logout?
    id_token_hint=" + token + "&post_logout_redirect_uri=" + this.redirectUri;

  window.location.href = logoutURL;
}

Apart from the redirection, we also need to discard the Access and ID Tokens that we’d obtained from the Authorization Server.

Hence, in the above code, first we deleted the tokens, and then redirected the browser to Keycloak’s logout API.

Notably, we passed in the redirect URI as http://localhost:8089/ – the one we’re using throughout the application – so we’ll end up on the landing page after logging out.

The deletion of Access, ID and Refresh Tokens corresponding to the current session is performed at the Authorization Server’s end. Our browser application had not saved the Refresh Token at all in this case.

3. Logout Using Zuul Proxy

In a previous article on Handling the Refresh Token, we have set up our application to be able to refresh the Access Token, using a Refresh Token. This implementation makes use of a Zuul proxy with custom filters.

Here we’ll see how to add the logout functionality to the above.

This time around, we’ll utilize another Keycloak API to log out a user. We’ll be invoking POST on the logout endpoint to log out a session via a non-browser invocation, instead of the URL redirect we used in the previous section.

3.1. Define Route for Logout

To start with, let’s add another route to the proxy in our application.yml:

zuul:
  routes:
    //...
    auth/refresh/revoke:
      path: /auth/refresh/revoke/**
      sensitiveHeaders:
      url: http://localhost:8083/auth/realms/baeldung/protocol/openid-connect/logout
    
    //auth/refresh route

In fact, we added a sub-route to the already existing auth/refresh. It’s important that we add the sub-route before the main route, otherwise, Zuul will always map the URL of the main route.

We added a sub route instead of a main one in order to have access to the HTTP-only refreshToken cookie, which was set to have a very limited path as /auth/refresh (and its sub-paths). We’ll see why we need the cookie in the next section.

3.2. POST to Authorization Server’s /logout

Now let’s enhance the CustomPreZuulFilter implementation to intercept the /auth/refresh/revoke URL and add the necessary information to be passed on to the Authorization Server.

The form parameters required for logout are similar to those of the Refresh Token request, except there is no grant_type:

@Component 
public class CustomPostZuulFilter extends ZuulFilter { 
    //... 
    @Override 
    public Object run() { 
        //...
        if (requestURI.contains("auth/refresh/revoke")) {
            String cookieValue = extractCookie(req, "refreshToken");
            String formParams = String.format("client_id=%s&client_secret=%s&refresh_token=%s", 
              CLIENT_ID, CLIENT_SECRET, cookieValue);
            bytes = formParams.getBytes("UTF-8");
        }
        //...
    }
}

Here, we simply extracted the refreshToken cookie and sent in the required formParams.

3.3. Remove the Refresh Token

When revoking the Access Token using the logout redirection as we saw earlier, the Refresh Token associated with it is also invalidated by the Authorization Server.

However, in this case, the httpOnly cookie will remain set on the Client. Given that we can’t remove it via JavaScript, we need to remove it from the server-side.

For that, let’s add to the CustomPostZuulFilter implementation that intercepts the /auth/refresh/revoke URL so that it will remove the refreshToken cookie when encountering this URL:

@Component
public class CustomPostZuulFilter extends ZuulFilter {
    //...
    @Override
    public Object run() {
        //...
        String requestMethod = ctx.getRequest().getMethod();
        if (requestURI.contains("auth/refresh/revoke")) {
            Cookie cookie = new Cookie("refreshToken", "");
            cookie.setMaxAge(0);
            ctx.getResponse().addCookie(cookie);
        }
        //...
    }
}

3.4. Remove the Access Token from the Angular Client

Besides revoking the Refresh Token, the access_token cookie will also need to be removed from the client-side.

Let’s add a method to our Angular controller that clears the access_token cookie and calls the /auth/refresh/revoke POST mapping:

logout() {
  let headers = new HttpHeaders({
    'Content-type': 'application/x-www-form-urlencoded; charset=utf-8'});
  
  this._http.post('auth/refresh/revoke', {}, { headers: headers })
    .subscribe(
      data => {
        Cookie.delete('access_token');
        window.location.href = 'http://localhost:8089/';
        },
      err => alert('Could not logout')
    );
}

This function will be called when clicking on the Logout button:

<a class="btn btn-default pull-right"(click)="logout()" href="#">Logout</a>

4. Conclusion

In this quick, but in-depth tutorial, we’ve shown how we can logout a user from an OAuth secured application and invalidate the tokens of that user.