---
# System prepended metadata

title: Session provider

---

# Session provider
Session provider is a custom context provider that tracks user session and acts based on user behavior. Notification provider designed to enrich user experience.
The code sample can be found in [SessionProvider.js](https://github.com/thecardeaproject/cardea-enterprise-health-ui/blob/0dba6bddb436ee0a46aa2a8cf0d9d3097969d235/src/UI/SessionProvider.js).

## Session
User session sets on user login and ends on expiration or user logout. Session is set by the backend using **passport** library. Session is critical to the app since it is responsible for both websockets and router to work properly.

## Session duration
Session duriation is set to 60 minutes. It will be reset to original 60 minutes and keep user logged-in in 2 conditions:
* The user is logged in and is activelly using the app. Here is the list of events it listens to:

```javascript=
const events = [
      'load',
      'mousemove',
      'mousedown',
      'click',
      'scroll',
      'keydown',
    ]
```
* The user is not actively using the app and the "inactivity" pop-up shows up and the user clicks "Ok".

Resetting session and local timer
```javascript=
  useEffect(() => {
    if (timer === 5 && keepAlive)
      Axios({
        method: 'GET',
        url: '/api/session',
      }).then((res) => {
        console.log(res)
        if (res.status) setTimer(60)
      })
  }, [timer])

  const closeModal = () => {
    setOpen(false)
  }
  
```
Setting logged-in user and session states on app mount/refresh
```javascript=
  useEffect(() => {
    console.log('refreshed')

    Axios({
      method: 'GET',
      url: '/api/session',
    }).then((res) => {
      console.log(res)
      if (res.status) {
        setSession(cookies.get('sessionId'))

        if (cookies.get('sessionId')) {
          setLoggedIn(true)
          setWebsocket(true)

          if (cookies.get('user')) {
            const userCookie = cookies.get('user')
            setLoggedInUserState(userCookie)
            setLoggedInUserId(userCookie.id)
            setLoggedInUsername(userCookie.username)
            console.log(userCookie.roles)
            setLoggedInRoles(userCookie.roles)
          } else setAppIsLoaded(true)
        } else setAppIsLoaded(true)
      }
    })
  }, [loggedIn])
```

## Session pop-up
When user is inactive for over 5 minutes a pop-up will show on the screen and a new countdown will start. The final countdown is set to 5 minutes. If the user won't confirm it's activity before the time runs out the user will be logged-out forcefully and the session will be destroyed. 
Note that all unsaved progress will be lost (but active connections should remain active).

Here is how the seconds are formated for the countdown timer:
```javascript=
// Format seconds
export function formatSeconds(secs) {
  function pad(n) {
    return n < 10 ? '0' + n : n
  }

  var m = Math.floor(secs / 60) - h * 60
  var s = Math.floor(secs - h * 3600 - m * 60)

  return pad(m) + ':' + pad(s)
}
```