Prevent users from getting logged out while working on their local devices

My issue lies with the functionality of CookieAuthenticationOptions.ExpireTimeSpan in setting the user session timespan. While it works effectively, it may be a bit too efficient. The problem arises when a user is working on filling out textboxes and other fields without any server activity happening. This results in the user being signed out when they click "Save," causing them to lose all the entered data.

Is there a way for me to update the timestamp continuously to prevent the session from expiring while the user is actively working on the page?

I have brainstormed some possible solutions:

  • Implement JavaScript polling/pinging, but this might defeat the purpose of automatically signing out users after a period of inactivity.
  • Create a script to trigger a ping to the server upon keypress events, although this could be challenging due to multiple forms being used.
  • Possibly redirect the user back to the last form they were using to repost the data, if feasible.

It's worth mentioning that I am utilizing AngularJS 1.4.7 as my JavaScript framework.

javascriptangularjsasp.net-mvc-5

Answer №1

Is it a good idea to utilize a preprocessor directive for adjusting expiration time in debug mode?

var options = new CookieAuthenticationOptions {
#if DEBUG
    ExpireTimeSpan = System.Timespan.FromDays(1)
#else
    ExpireTimespan = System.Timespan.FromMinutes(20) //or any preferred timespan
#endif
}

Answer №2

If you are utilizing ng-model within your form, you have the ability to monitor any changes to the model and send a request to the server when it is modified.

$scope.$watch('formModel',function(){
   //send request to server
},true);

To prevent sending a request on every single keystroke or alteration, you can implement a timer.

var allowRequest = true;    
$scope.$watch('formModel',function(){
       if(allowRequest){
          allowRequest = false;
          //send request to server
          setTimeout(function(){allowRequest=true},10000);
    },true);

I have created a code snippet on CodePen demonstrating how this concept works: http://codepen.io/daveycakes/pen/mRewbJ

Answer №3

Utilize JavaScript to send a request to the server only during "form filling" mode. One approach is to initiate the request when the user begins editing and cease it once they save the information. It's unlikely for users to walk away from their computer while entering data into a form - and if they do, it's solely their responsibility.

Answer №4

If you're looking to handle ExpireTimespan timeouts and update or extend Expiretime, this resource might be of assistance. It provides guidance on how to manage timeouts effectively.

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

Using Jasmine to simulate an if/else statement in Angular/Typescript unit testing

After making a minor change to an existing function, it has been flagged as new code during our quality checks. This means I need to create a unit test specifically for the new 4 lines of code. The challenge is that there was never a unit test in place for ...

javascriptangulartypescriptunit-testingkarma-jasmine

Code snippets to reduce excess white space on a website using HTML and CSS

On my website, there are multiple tabs, each containing content from an HTML file. When a user clicks on Tab1, boxes with images are displayed. The layout can be seen in the following Code Demo: Code Demo here There seems to be extra space before and afte ...

javascripthtmlcss

How can I manage the transfer of items between lists in angular-ui sortable?

I am currently utilizing angular-ui sortable version 1.2 My goal is to manage the transfer of an item from one list to another and ensure that the back-end gets updated accordingly. The jquery-ui-sortable plugin offers various events, such as the receive ...

jquery-uiangularjsjquery-ui-sortableangular-ui

The process of generating an efficient build gets stuck and never finishes

I am currently facing an issue while attempting to build my React app. Whenever I execute "npm run build," the terminal gets stuck at "Creating and optimized production build..." and doesn't complete the process. I have tried running this on a system ...

javascriptnode.jsreactjsnpmnext.js

Sequelize cannot locate the specified column in the database

click here for image description I encountered an issue where a column was not recognized after migrating with sequelize-cli. Even though all the columns are defined in the migration file, this error keeps appearing. Additionally, when trying to create a ...

javascriptpostgresqlexpresssequelize.js

The property 1 cannot be added because the object is not extendable in React

Does anyone know what is causing the following issue? I am unable to insert a new object into a key object within my arrays of objects. For example, when I try to insert a new email at index 1 in the 'emails' array, it throws an error stating "ca ...

javascriptreactjstypescript

Creating a Node.JS application, developing an Express JS API, and handling errors

I am facing challenges while developing a REST API in Express.js and I am seeking assistance. Below is my Express.js code: router.get( '/apps/download/:downloadId', function ( req, res, next ) { const opts = Object.assign( {downloadId: re ...

javascriptjsonnode.jsapiexpress

Avoid duplicating content when using Ajax to retrieve data in jQuery

Is there a solution when you click the button to display content, then click the button to hide it, and then click the button again to show it repeatedly? I'm not sure how to solve this issue. Can anyone help me out? Thank you! Here is the HTML code: ...

javascriptjqueryajax

Guide on how to start the Bootstrap 4.6 collapse feature using JavaScript

The Bootstrap 4.6 documentation states that the collapse menu can be enabled/initialized using either data- attributes or JavaScript. It is assumed that data-target is still required to link a button to the collapsible element. This leaves us with data-tog ...

javascriptjquerytwitter-bootstrapbootstrap-4custom-data-attribute

I seem to be having trouble getting Vue to recognize my components. Could it be that I am not registering them

I am currently working on developing a simple blog application using Laravel with Vue.js. I have successfully created custom components, registered them in my app.js file, and referenced them in the views by their component names. However, upon loading the ...

javascriptlaravelvue.js

What is the best way to incorporate a string value from an external file into a variable in TypeScript without compromising the integrity of special characters?

I am encountering an issue with importing a variable from a separate file .ts that contains special characters, such as accents used in languages like French and Spanish. The problem I am facing is that when I require the file, the special characters are ...

javascripttypescriptwebpackcharacter-encoding

Guide to directing crawler requests to pre-rendered web pages with Amazon S3

Challenge I am facing an issue with my static SPA site created using Angular and hosted on Amazon S3. My main concern is making the pre-rendered pages accessible to web crawlers, but I am unable to redirect crawler requests due to the limitations of Amazo ...

angularjsamazon-web-servicesamazon-s3seosingle-page-application

Transform Python list into a JavaScript array

Seeking quick assistance from experts as I face an intriguing challenge that has me stumped. In a Python .psp file, I have a list mylist[] that is populated at runtime and a JavaScript function that requires a list to dynamically create a form object. The ...

javascriptpythonarraysmod-python

Vue: The enigmatic world of ghost properties?

During my project work, I encountered the following code snippet: Main component - <ParameterModal>: <template> <modal-wrapper props="..."> <!-- ... other similar templates are present... --> <template v-else-if="moda ...

javascripthtmlvue.js

Navigating the ngCordova Facebook plugin: A step-by-step guide

Currently, I am working on incorporating a Facebook login feature into my Ionic app. I have decided to utilize the ngCordova Facebook plugin and have carefully followed all provided instructions. However, I am encountering an issue where I receive an error ...

angularjscordovaionic-framework

There seems to be an issue with sending multiple parameters correctly in the get method when using Angular 5 with a Node.js backend

I have been working on creating an API with nodejs and trying to access it using the GET method by sending parameters through Angular 5 GET method. While testing the API with Postman, everything works fine, but when I try to send the GET request from Angul ...

javascriptnode.jsangularget

Issue encountered when implementing promise and await within a Vue method

I've implemented a function in the mounted() hook to fetch files from my Dropbox account using a promise. Once the promise is resolved successfully, I iterate through all the files and execute another promise function to retrieve additional informatio ...

javascriptvue.jsvuejs2

Logging to the console using an If/Else statement, with the Else block containing code that

I'm encountering a peculiar issue with my If statement. I'm modifying the state (true/false) of an object based on onMouseEnter and onMouseLeave. I can execute the code when it's true, but if I include any code in the else statement, it ma ...

javascriptreactjs

Instructions on how to insert a single parenthesis into a string using Angular or another JavaScript function

Currently, I am employing Angular JS to handle the creation of a series of SQL test scripts. A JSON file holds various test scenarios, each scenario encompassing a set of projects to be tested: $scope.tests = [ { "Date": "12/31/2017", "Project": ...

javascriptangularjsplsql

"Learn how to add up elements in an array based on their unique IDs and generate a new array using

There is an array called data that looks like this: const data = [ {"id": "One", "number": 100}, {"id": "One", "number": 150}, {"id": "One", "number": 200}, ...

javascriptreactjsarraysreact-nativesum