Click here to share this article on LinkedIn »

An application I’ve been building has some very robust security requirements, one of which is a client side session expiration. This is a feature you’ve likely noticed when logging into mobile banking. You log into your account, switch to another tab, and return to that tab several minutes later to find that you’ve been logged out for inactivity. This helps prevent sensitive information from remaining on an idle user’s screen and reduces the likelihood of a malicious user from accessing the application.

The use case seemed common enough. I started scouring the internet for a solution using Angular 2+ and Ngrx. Alas, I struggled to find a clean solution and went on trying to roll my own. It turned out that implementing this is stupid simple and I wanted to share it with the interwebs.

This solution uses the dependency versions:

Angular 5.2.0

Ngrx ≥ 5.0.0

Rxjs 5.5.6

Demo

For those of you who want to skip ahead to the code, you can check out the full Github repository. This walkthrough assumes that you have a basic understanding of ngrx for state management. Those who are unfamiliar with ngrx and build angular applications should definitely check it out here. Anyways… back to our regularly scheduled program.

Solution

The requirements of our auto logout application are quite simple. After a certain period of inactivity, the application must log the user out of the application.

Let’s focus on our state management files.

actions.ts

First we define our application actions. For this demo we have three simple actions: LogIn, LogOut, and ExtendLogoutTimer. Now let’s look at our reducers.

reducers.ts

The reducers contain our initial state and handlers for our application actions. Our state tracks just one variable, isLoggedIn, and that value is initialized to false. The LOG_OUT reducer sets isLoggedIn to false while LOG_IN sets it to true. We don’t explicitly handle the ExtendLogoutTimer action type. Rather it gets implicitly handled in the effects module.

effects.ts

This is where the magic happens. We have one side-effect here called extendApplicationTimeout. This effect gets invoked for ALL event types. It creates an observable timer that emits after 5000 milliseconds, our predefined “timeout” period. Once that time has expired, we return a new action of type logout.

Another important part of this solution is the use of switchMap. When an action is invoked, switchMap cancels the execution of any unfinished prior effect executions and recreates an Observable with a fresh timer. That way we simply extend the logout timer every time an action is invoke and prevent the prior action timer from counting down.

Conclusion

And that is it! With a pretty small amount of code you’ve added a big security enhancement to your Angular application. In a production application, you’ll want to add an logout action side effect to implement a proper logout by deleting access tokens from local storage, delete cookies, etc. Otherwise this is about all you’ll need to implement client side timeout.

If you have any questions, feel free to drop a line in the comments section. I did not go through the component based code in the tutorial but you can find the implementation linked in the introduction above. I hope this was helpful!