React-session-control NPM

React Session Control

React Session Control is a lib to provide session control to your application. It can help you to manage the inactivity time and token existence.

Features

Inactivity time

Using the component AuthenticatedSessionControl you can set the maximum time for the user stay inactive and use a callback to do some action after this time. The inactivity time is calculated using all tabs.

Sync tabs

Using the component AuthenticatedSessionControl and UnauthenticatedSessionControl you can syncronize authentication status between tabs. When one tab disconects or conects the other one follows the action.

If the inactivity modal is open on one or more tabs and if one of them is activated, only it will continue with the modal.

Getting started

Prerequisites

Just install and use!

Installing

npm install --save react-session-control

Using

Basicaly the lib provide two componentes:

UnauthenticatedSessionControl

Component to put in your unauthenticated area in your app to warn you when token is set by other tabs.

import { UnauthenticatedSessionControl } from  'react-session-control';

//Should render after authentication.
export function Login(){
	function handleSessionControlLogin(logoutType){
		//Do your logic here...
	
	}
	return ( 
		<>
		<UnauthenticatedSessionControl
			storageTokenKey="token"
			onLogin={handleSessionControlLogin}
		/>
		//your code... 
		</>	
	)
}

Props

storageToken

Key do check existence in local storage. If you dont pass this config the component will not check storage. Required

tokenChangeDebounceTime

The time in miliseconds to debounce token changes. default: 500

AuthenticatedSessionControl

Component to put in a authenticated area in your app to warn you when the inacitivity time is over, the user click in logout inside modal or if the token has been removed by other tabs.

import { AuthenticatedSessionControl, LogoutTypes } from  'react-session-control';

//Should render after authentication.
export function Layout(){

	function handleSessionControlLogout(logoutType){
		//Do yout logout logic here...
	}

	return ( 
		<>
		<AuthenticatedSessionControl
			inactivityTimeout={900}
			modalInactivityTimeout={30}
			storageTokenKey="token"
			onLogout={handleSessionControlLogout}
		/>
		//your code... 
		</>	
	)
}