Detect Inactive User and Auto-Logout (Javascript)

today we will discuss how to implement Auto logger feature on your website using JavaScript webworkers and node.js along with socket IO when to use it generally used by Industries who want a higher security and their users are dealing with sensitive information on the website you will also see this kind of timeout or I should say Auto layout at adms you know after you withdraw the cash and if you're not interacting with the machine it will go back to a welcome page you know a welcome screen so that's that's what we are doing here um the exams will be banking definitely you know it's the most security we want on a banking website and second would be traveling this is not a not an auto log or feature to be Excel but more of an auto price update you know like if you're on a website like especially on a flight booking website um if you're on the same page for like more than an hour or two hours maybe three hours then after three years the price might change then um the the price you want it to auto update that there would be uh Financial websites like brokerage accounts bill payments hedge funds mutual funds Etc there are quite a few ways to implement let's see each scenario in detail do you want users to stay logged in as long as they are interacting with the website or you want the users to relog in after a certain timeout this case may provide a better security but will irritate the users since he or she has to keep on logging in so there is a trade-off in both the options I'm comfortable with the first one let's see how to implement it if you're a beginner then you might use Simple JavaScript function like time timeout I mean set timeout or set interval to track the time and Trigger auto logo but do you know the time tracker will not be in sync with the actual time if you navigate away from the Tava browser next time check it out so here we want to use webworkers they make sure the time tracker is in sync with their time in real world that's the second option you know simple JavaScript and web worker web workers are better at offloading the task without affecting the user's performance because they work on a separate thread on the background well I'm good right for now yes yes single page sure what if the user has opened multiple pages in multiple tabs then what we gonna do they all lager at different times right because each page executes JavaScript on its own so one page might log out now at the second page might not log out for another like maybe a couple couple minutes so at this point we want to use web sockets to trigger the auto logout from the server itself the server will trigger it but the problem here is keeping track of user socket info if your website get like millions of users then you need a robust database tracking all those users a definite nightmare right think about it see how big big companies like Google Facebook they all keep track of users you know all right for the sake of this tutorial let's keep it simple and see each scenario programmatically template and we will use set interval and see how we're going to do a auto logout with this let's do um elaps it times and then set integral action let's say 2000 lapse of time if elapsed and is greater than 10 this one actually will do one second we will change this after that we will our message equals document Dot okay logged in let's do three seconds if greater than 3 message dot inner inner text post logged out let's try here I just refreshed it one two three there you go locked out but the thing is this set interval keeps on going we wanted to stop it so what we can do is or timeout equals save it in this timeout variable if this is more than three seconds you should know there is a function clear interval we'll we'll clear this out so this way after we trigger the log out um this function will no longer exist so this is like much better uh gives a much better performance okay so now we have done this this is like really really simple one now we're going to modify this and see how we can track the users in activity and based on that we will um Auto log out so for that we have two options um let's track if the user is focusing on the web page windowed on Focus equals function if the user is focused we wanted to have the make the elapsed time zero that means resetting the the tracker similarly we will do on on click anywhere if the user clicks again that's um the user is interacting the page and set interval function [Music] okay again I'll have to time if elapse of time is greater than let's say three seconds then foreign text logged out after every one second let's try it again okay this is logged in I am clicking and I'm moving the mouse okay it's still showing it's locked in okay I'm not gonna do anything see now it locked out it has locked out so this is the mark this is modified version again this function keep on going we have to cancel it I mean uh clear the interval very similarly how we did last time our time lapse let's let's do timer this time because this is greater than that timer clear Interval Timer that should take care of it so this is done well I'm good so the problem here is the per uh when you're talking about performance see this function it will keep on going the minute the user gets out of this like this website this one for every one second this function keeps executing okay um you will not see any performance issues when you have like very small Pages like this but if you have like a huge page this might become an issue so we could modify this using a set timer function start tracking the elapsed time only when the user navigates away if he's not on the page then only we want this function to trigger so that way when the user is on the page the function is not triggering anymore so it has like better performance compared to this what we have so let's see how we could do that so this is set timer so once this function is done that's it we don't have to do clear set clear time mode and anything at this moment um we will cancel this actually um see if this is working they will just uh comment out this one and do that so it's logged in for after six seconds it should automatically log out we will see okay logged out okay so this is working fine but the thing is we want this enabled only when the user is not focusing on the on the page okay so we have two focuses here it should be blur that means use when the user is not on the web page this function should should be triggered so what we will do is function enable timeout and we will put it put that one here okay this looks good and we will bar actually frequency let's do a global variable frequency equals okay um variable frequency personal okay if not logged out then enable enable timeout when the user is navigated away from the page if user is not already logged out then we will enable the timeout that means this will start okay if the when the user comes back onto the website then what we will do is if frequency is not equals null let's do this makes it easy to read then clear clear timeout frequency and then click fancy course not okay we will do similarly for a click copy paste on click okay after six seconds if the user is not on the page then it will log out okay let's do this I am interacting I'm clicking okay so it stays logged in for six seconds you know I'm just clicking now I'm focusing on the page let me navigate away from the page and wait for like six seconds I should have put three seconds you know um but okay I'll just keep talking after let's see if the six seconds has done uh let me go back to the page see that logged out so this has better performance compared to the other one what we used set interval what will happen if the user has multiple Pages open see this this enable timeout will be triggered when the user is not on that page so we were creating a sort of a conflict here you know on one page he might look as logged in and the other page he might have not looked as logged in you know it's just I mean what I meant to say is still logged in so at this point we want to use socket IO and websockets take it a step further and implement the auto logger feature using JavaScript webworkers see I have already created a file called autolager.js which is actually a web worker so let's get ahead when start filling this it's very simple and it's very similar to to our last example the only difference here is we're going to use the on message inbuilt functionality of the web worker to communicate back and forth with the with the main page you can see now self Dot message we'll fill this in a bit timeout since we have it is as I said it's very similar to last one frequency equals set timeout function we will use let's say three seconds post message log out so this is the message we're sending up so um whenever this set timer triggers we are sending a message called logout using the post message inbuilt functionality so let's come back to this we will import the worker like this bar w u worker though logout.js we don't need this anymore so now we have created worker w dot on message equals to function event okay now you will see what is the message we want to we were sending out it's logout if event dot data equals logout on the worker to terminate okay and then we'll proceed to logout um let's do this console.log GED out okay but we need to start it you know um how do we start window dot on blur equals action post message this is where we're communicate communicating with the web workers saying okay the user is not present on the website I mean on the page and we want you to start the tracker it's post message enable timeout okay so this should do actually Windows dot on Focus function this is to disable it first post message disable timeout so this means the first one is where if the user is not on the page we want we want to enable timeout but if he comes back on the page we want to disable the timer okay we'll save this go back here this is where we'll fill this one if message sh dot data course enable timeout enable demo I'll says sh dot data close disable timeout we want to clear the set timeout but before that we need to check if frequency is not now we can see does not equals null here timeout frequency and she calls to know this should take care of it let me just else comes so loud not uh recorded specialty node.js and soccer dial these are the two things you need to achieve Auto logout feature that can trigger on all open pages two ways you can do this one have the initial trigger from your client side that means a user automatically sends hey I'm logged out you know and the server will receive that and then send sends back to all the open pages saying you need to force log out the second thing is have server do everything you know track time and all that this is a bit more complex but um the server has more control okay I'll give you a small clue on how to do it you need to keep track of users along with their socket IO IDs so that you can send a private message or even better make use of socket iOS in build rooms now that you have understand the concept give it a shot if you still can't think of how to do it go to my website links are in the description happy coding

Channel: Dbook Event Management

Views: 2,525

Keywords: Web development, web security, javascript

Id: zSOLF0vLSkw

Length: 19min 50sec (1190 seconds)

Published: Tue Nov 29 2022