Giter Club home page Giter Club logo

session-timeout's Introduction

Session Timeout

Warn users when their session is about to expire. Dependency-free.

When this function is called (usually each time a page is loaded), a timer starts in the background. When the timer goes off, a warning is displayed to the user that their session is about to expire. The user has two options: Log out now or stay connected. If they choose to log out, they are brought to your site's log out page. If they choose to stay connected, a keep-alive URL is requested in the background, the warning is hidden, and the timer resets.

This project is the successor to jquery-sessionTimeout. I built this new version to remove the dependency on jQuery and jQuery UI.

Animated demonstration

Installation

Method 1: CDN

Include the script on your page via UNPKG.

<script src="https://unpkg.com/@travishorn/session-timeout"></script>

Method 2: Download

Download dist/session-timeout.js.

Include it on your page.

<script src="session-timeout.js"></script>

Method 3: ES6 Module using npm and webpack (or similar)

Install via npm.

> npm install @travishorn/session-timeout

Include it in your scripts.

import sessionTimeout from '@travishorn/session-timeout';

Usage

Call it in JavaScript.

sessionTimeout();

Provide options as an object.

sessionTimeout({
  warnAfter: 60000,
  message: 'Are you still there?',
});

Options

appendTimestamp

If true, appends the a timestamp parameter to the end of the keep-alive URL with each request. This can prevent caching issues by guaranteeing the URL is unique.

Default: false

Example URL: /keep-alive?time=1551203965297

keepAliveMethod

The HTTP method to use when making the keep-alive request.

Default: POST

keepAliveUrl

When the user clicks the "Stay connected" button, this URL is requested in the background to keep their session alive.

Default: /keep-alive

logOutBtnText

The text on the log out button.

Default: Log out now

logOutUrl

When the user clicks the "Log out now" button, their browser is directed to this URL.

Default: /log-out

titleText

The text displayed at the top of the dialog.

Default: Session Timeout

message

The message to display when warning the user of inactivity.

Default: Your session is about to expire.

stayConnectedBtnText

The text on the "stay connected" button.

Default: Stay connected

timeOutAfter

The amount of time, in milliseconds, to wait until automatically timing out the user and redirecting their client to the time-out URL. You will usually want to set this to the same amount of time your server keeps sessions alive. This timer gets reset if the users clicks the "stay connected" button on the warning dialog.

Default: 1200000 (20 minutes)

timeOutUrl

Once the time out period has elapsed, the user's browser will be directed to this URL.

Default: /timed-out

warnAfter

The amount of time, in milliseconds, to wait until displaying a warning to the user. If the user clicks the "stay connected" button, the warning disappears, and the timer is reset. The warning will re-appear after the same amount of time after reset.

Default: 900000 (15 minutes)

session-timeout's People

Contributors

dependabot[bot] avatar leofreitas avatar travishorn avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

session-timeout's Issues

Redirect after timeout not working on iOS/iPadOS 14.4

Hello there! This package works great for all web browsers except for Safari on iOS and iPadOS. While the pop-up window asking about session expiration works, the actual timeout method to redirect to the /logout url does not seem to activate, leaving the pop up warning box up indefinitely. Is there any advice on how this can be fixed or a work around?

sessionTimeout({
  warnAfter: 300000,
  timeOutAfter: 480000,
  logOutUrl: '/logout',
  keepAliveUrl: '/keepalive',
  timeOutUrl: '/logout',
  titleText: 'Session Timeout',
  stayConnectedBtnText: 'Continue',
  message: 'Your session is about to expire. Continue?',
});

I have this so far that can be inserted into the html code and Safari does seem to accept this (redirects after 15 seconds):
<meta http-equiv="refresh" content="15;url=google.com"/>

Perhaps there is a way to have the meta attribute activate only if a timeout occurs? Otherwise, the redirect would happen regardless of whether the stayConnectedBtn is clicked.

Thank you for any help you can provide on this.

Request for the unminified session-timeout.js

@travishorn can you upload the unminified version of the session-timeout.js? This will help a lot in understanding the code behind the scene.

Btw, this is a wonderful script to notify session expiry and I highly appreciate the contributors' work for this script.

call JS Function before timeout?

We have an issue whereby if you timeout a user who has entered some data into a form the session won't actually redirect the users since the browser issues a leave page warning. It would be good to allow calling a function before timeout and before warn to clear the form or some other desirable function.

Does not reset timer when user interacts with page

After installation, I can click buttons and move the mouse around and the dialog will appear regardless.

My config:

sessionTimeout({
warnAfter: 5000,
message: 'Are you still there?',
keepAliveUrl: '/keep-alive',
logOutUrl: '/logout',
keepAliveMethod: 'GET'
});

The Options are wrong.

Your supplied Options are incorrect, it is not logOutUrl it is redirUrl, it is not titleText it is title, there are others also but I'm sure you get the idea.

Understanding keep-alive

Hello, I understand by default the script will call /keep-alive.

But I wasn't clear on if this file actually needs to exist and if so, does it need to be something like /keep-alive.php if using PHP. In addition, does session_start() need to be on this page? Anything else?

Thanks, plugin seems great for my needs.

Tom

Timout reset

Hello,
if I stay on a html page and do ajax requests (without reloading the page) the session timeout popup is shown. Is there a way to avoid this, for example, reset the timer ?

Timer not working for IE 11 users

For IE 11 only, our users see the message as soon as they load any page where the script is active (protected page). If they move from one protected page to another, they see the message again. It's acting as if the warnAfter value is zero.

The script works as expected on all other browsers I've tested.

Here are the only mods I've made:

  1. Wrapped sessionTimeout() in a jQuery document.ready (it didn't work without it)
    <script type="text/javascript">
    $(function() {
    sessionTimeout();
    });
    </script>
  2. Edited the session-timeout.js to use our default timeout values (30/25 min.) instead of passing them in
    timeOutAfter: 18e5,
    warnAfter: 15e5

Is this IE 11 bug reproducible on your end? Any suggestions?

Thanks for your time.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.