Morioh
Login
Avav Smith

Avav Smith

3 years ago

React App with Sliding Global Session Timer

React App with Global Session Timer

Session Timer
This React app implements a sliding global session timer.

Correlating YouTube Video.

Included is a server.js Node.js file which runs on port 3030 and is hard-coded for simplicty. The server.js file is provided to demonstrate a fully functional app out of the box.

Run the app locally:
npm i to install NPM packages. npm start will start the React app.

In a new terminal window run node server.js and the dummy server will start running.

Tampering with the token results in an invalidation as displayed below: Session Timer

Notes:

  • The variable timerLength in src/utils.ts is hard-coded to 1200 seconds - 20 minutes of inactivity automatically signs a user out.
  • SessionExpirationModal.tsx contains configuration settings for modal display.
  • ProtectedPage.tsx calls the extendSession function - this extends (or slides) the user’s expiration time. Some use cases require user validation with every API request.
  • The app creates two localStorage items; token and member. Missing either one indicates tampering and signs the user out.

Download Details:

Author: aaronwht

Source Code: https://github.com/aaronwht/react-session-timer

#react #reactjs #javascript

React App with Sliding Global Session Timer
5.60 GEEK