What is the best way to automatically log out a user in Angular if they have been inactive for a set

In my work with Angular, I encountered the need to log out users who are inactive. While I found a solution that worked for a particular page, it was not scalable as I have multiple pages where this feature is needed. Is there a way to globally monitor user inactivity in Angular?

I attempted to implement the following code, which successfully logs out inactive users but only on a specific page:

constructor() { 
    this.setTimeout();
    this.userInactive.subscribe(() => console.log('user has been inactive for 3s'));
  }

  userActivity:any;
  userInactive: Subject<any> = new Subject();
  
  setTimeout() {
    this.userActivity = setTimeout(() => this.userInactive.next(undefined), 3000);
  }

  @HostListener('window:mousemove') refreshUserState() {
    clearTimeout(this.userActivity);
    this.setTimeout();
  }

Answer №1

To address this issue, it is recommended to implement the solution at the module level or throughout the entire application. One approach is to include the logic in the AppComponent to verify if the user is logged in.

If the user remains inactive for a specified period of time, such as 1 or 2 minutes, you can trigger the logout service and redirect the user back to the Login Page.

There are also npm libraries available to assist with checking idle times. One example of such a library is:

NPM Library: angular-user-idle

Demo: Demo

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the method for obtaining the entire object as a response following a click?

I am working on a basic JavaScript snippet: var image = [{name: "Breakfast", age: 100, author: "Alice"},{name: "Dinner", age: 10, author: "Teddy"}]; function gallery(name, content) { this.name = name; this.c ...

Are you able to locate <td>s with identical classes using just a portion of the string?

There are multiple classes in the <td>s of my table. I am looking to identify each <td> that contains a specific string. For instance: <table> <tr> <td class="hello there">foo</td> <td class=" ...

Set a value to the variable "data" within the context of the $.ajax

I am currently working on my app and within the HTML, I have three links that belong to different categories. My goal is to load the current category when a user clicks on a specific link. However, I am facing an issue with capturing the selected category ...

Avoid displaying the div style when printing by utilizing CSS and JavaScript

How can I use Javascript and CSS to print content in a div? My main div has an id of 'preview' and the content is fetched from a database using PHP and MySQL. However, when I try to print the page, the style of the 'preview' div does no ...

Handling multiple Ajax requests while refreshing events in fullcalendar.io

Whenever I try to refetch events from fullcalendar after making an ajax request to insert the event, the ajax request ends up executing multiple times. This results in duplicate or even more entries of the same event in the database. Can someone explain ...

Allowing users to submit content in a textarea field by pressing the enter key in

<td> <textarea name="message" id="message" rows="1" style="padding: 10px;margin-left: 12px;border-radius: 10px; margin-right: 0px; width: 430px;"></textarea> <td style="padding-left:0px"> <a title="Send" id="sendB ...

Safari experiencing issues with Brightcove's chromeless video player controls

There seems to be an issue with BrightCove's Chromeless player. When hovering over the controls (pause, play, and move to a specific time in the video), they appear but clicking on them causes them to just disappear instead of pausing/playing or movi ...

Using ngModel to retrieve and display only the month, year, and date

Currently, I am working with an interface named Person which includes fields such as name, last name, birthday, and others. However, I am facing a confusion when it comes to the person's birthday format, as it contains some additional letters at the e ...

I am attempting to initiate a new window or tab with POST data, but for some reason, it is not functioning correctly

One of the PHP-generated calls is as follows: <script> var copyrecipient = []; var customhintcopy = []; copyrecipient.push('customer'); copyrecipient.push('healthinsurance'); customhintcopy.push('4'); custom ...

Populate an array with user input values and shuffle the content for random display

I am currently encountering a challenge. I am aiming to design a form that gathers 4 nicknames after submitting the form, and then exhibits them randomly in HTML code using JavaScript My 4 input values are stored in an array. I need to display them random ...

Encountering unmounted component error in React Native development

A cautionary error message: unable to update a state in React on an unmounted component. Although this may seem harmless, it could signify a memory leak in your application. To resolve this issue, be sure to cancel all subscriptions and synchronous tasks ...

Error encountered when trying to match routes in two separate Angular applications within an Express app: "Cannot find any routes that match

Greetings (please pardon any language errors as English is not my first language) Like many others, I have an Angular app running in Express and decided to create separate Angular apps for the admin and users (mainly because the navigation bar was becomin ...

Error: Unable to retrieve the length property of a null value in a React application

Everything in the code seems to be correct, but I keep encountering an error message that reads: TypeError: Cannot read property 'length' of null in my React Project. Below, you will find the code snippet that I am currently working on using Reac ...

Using a jQuery script, you can enable a back button functionality that allows users

I created a survey to assist individuals in determining where to go based on the type of ticket they have. However, I am currently facing difficulties with implementing a "Back" button that will display the previous screen or "ul" that the user saw. Initia ...

AWS CDK Pipeline not initiating on commit to Bitbucket

After configuring the connection in the pipeline settings, I applied the ARN as shown below: const pipeline = new CodePipeline(this,'SettingsPipeline' , { pipelineName: 'SettingsPipeline', synth: new CodeBuildSte ...

Loop through all the textarea fields within a designated class to remove emojis from a field that contains "Gift Message" in its name

I need a pure JavaScript solution for extracting the value of a textarea field with "Gift Message" in its name. I'm currently stuck and unable to achieve this. Can someone assist me in resolving this issue? Below is the HTML code snippet: <span cl ...

Filter documents by matching arrays of objects using MongoDB Aggregation

I am dealing with documents that contain arrays of nested objects. Some fields have been omitted for simplicity. Here is an example of how the documents are structured (2 documents): { title: 'abc', parts: [ { part: "verse&quo ...

Setting up Webpack for Node applications

My current challenge involves configuring Webpack for a node app that already exists. I am encountering various issues and struggling to find solutions or even know where to begin. Situation The project's folder structure is as follows: +---app +-- ...

Can commands be loaded directly into spec.js files in Cypress instead of support/index.js?

Whenever a new file containing Cypress custom commands is written, it is typically added using Cypress.Commands.add() and then imported into support/index.js. The issue arises when dealing with 100 such Custom command files, as loading all of them every t ...

Error: Material UI encountered a problem with type error - number 0 cannot be iterated (property Symbol(Symbol.iterator) cannot be read)

I am currently working with the MUI(Material UI) App bar. You can find it here. The version I am using is v6.1.1. In the sandbox environment, everything seems to work fine when testing. However, when implementing it into my project, I encounter the follo ...