react-session-control
Version:
Component to provide session control. It controls how long the user can be inactive and observes the storage checking for token existence.
162 lines (125 loc) • 4.76 kB
Markdown
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.
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.
<p align="center">
<img src="gifs/inactivity.gif" />
</p>
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.
<p align="center">
<img src="gifs/tab-sync.gif" />
</p>
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.
<p align="center">
<img src="gifs/modal-sync.gif" />
</p>
Just install and use!
```
npm install --save react-session-control
```
Basicaly the lib provide two componentes:
Component to put in your unauthenticated area in your app to warn you when token is set by other tabs.
```js
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...
</>
)
}
```
Key do check existence in local storage. If you dont pass this config the component will not check storage. **Required**
The time in miliseconds to debounce token changes.
**default**: 500
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.
```js
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...
</>
)
}
```
Inictivity timeout in seconds. **Required**
Inictivity timeout when modal is open in seconds. **Required**
Callback to be called when user ends his inactivity time limit, click in logout button or lose his token. **Required**
Key do check existence in local storage. If you dont pass this config the component will not check storage.
**default**: ```undefined```
Title to display in modal header.
**default**: ```'Inactivity alert'```
Message to display in modal header.
**default**: ```'You have been inactive for a long time. Do you want to remain logged in?'```
Message to display before time count in modal.
**default**: ```'You will be disconnected in: '```
Text to display in continue button.
**default**: ```'Continue'```
Text to display in logout button.
**default**: ```'Logout'```
If should display document title alert.
**default**: ```true```
The text displayed as document title case showDocumentTitleAlert is true.
**default**: ```'INACTIVITY ALERT'```
The time in miliseconds to debounce token changes.
**default**: 500
The time in miliseconds to throttle user activity.
**default**: 500
If the component is in debug mode.
**default**: false
Callback to be called when inactivy ends.
Callback to be called when modal inactivy ends.
Modal element to render.
* **Felipe Laera** - *Software Engineer*
See also the list of [contributors](https://github.com/LaeraFelipe/react-session-control/contributors) who participated in this project.
This project is licensed under the MIT License - see the [LICENSE.md](https://github.com/LaeraFelipe/react-session-control/blob/master/LICENSE.md) file for details