Fix session timeout handler

maximilianoertel commented 2 months ago

Proposed changes

This PR fixes the faulty behaviour of the existing session idle detection timer, initially implemented using the useIdle composable.

The issues previously reported in the corresponding ticket were primarily caused by how browsers treat inactive tabs. More precisely, when a tab becomes inactives, browsers throttle JS execution, directly impact the timer set by useIdle. To circumvent this, useIdle supports the use of visible change event listeners. Unfortunately, when a user returns to the tab after being active on another site for a while, the useIdle timer treats the visible change as activity and resets the idle timer immediately.

To avoid these issues, this PR disables the visibility change listener and manually implements corresponding event listeners. Simultaneously, we store an internal last active timestamp when the user leaves the active tab to allow us to calculate the true idle time upon the user's return and trigger the desired business logic.

In order to facilitate development and testing, the timer can be configured using two environment variables:

VITE_AUTH_SESSION_TIMEOUT_IDLE_THRESHOLD The duration in ms until we consider a user to be idle, defaults to 15min.
VITE_AUTH_SESSION_TIMEOUT_COUNTDOWN_DURATION The duration of the countdown displayed in the dialog, defaults to 60 seconds.

Whilst previously only implemented on the Homepage, the session timer is now implemented at the root of the web application to ensure the timer runs on all pages.

Docs are updated in PR yeatmanlab/roar-docs/pull/14

Types of changes

[x] Bugfix (non-breaking change which fixes an issue)
[ ] New feature (non-breaking change which adds functionality)
[ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
[ ] Refactoring (non-breaking change that does not add functionality but makes code cleaner or more efficient)
[ ] Documentation Update
[x] Tests (new or updated tests)
[ ] Style (changes to code styling)
[ ] CI (continuous integration changes)
[ ] Repository Maintenance
[ ] Other (please describe below)

Checklist

[x] I have read the guidelines for contributing.
[x] The changes in this PR are as small as they can be. They represent one and only one fix or enhancement.
[x] Linting checks pass with my changes.
[x] Any existing unit tests pass with my changes.
[x] Any existing end-to-end tests pass with my changes.
[x] I have added tests that prove my fix is effective or that my feature works.
[x] If this PR fixes an existing issue, I have added a unit or end-to-end test that will detect if this issue reoccurs.
[x] I have added JSDoc comments as appropriate.
[ ] I have added the necessary documentation to the roar-docs repository.
[x] I have shared this PR on the roar-pr-reviews channel (if I have access)
[x] I have linked relevant issues (if any)

Justification of missing checklist items

n/a

Further comments

Additionally, this PR introduces these (minor out-of-scope) changes (that, if required, can be moved to a separate PR):

A .nvmrc file to facilitate local development practices
A .editorconfig file to enhance development experience

Finally, it might be worth considering adding a small alert / card within the sign-in page to inform a user they have been signed-out due to inactivity.

Fixes yeatmanlab/roar/issues/241

github-actions[bot] commented 2 months ago

Visit the preview URL for this PR (updated for commit 8de203a):

https://roar-staging--pr733-fix-241-session-time-hk3rg038.web.app

_{(expires Thu, 22 Aug 2024 14:44:30 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 2631e9c58fd0104ecbfddd72a62245ddac467460}

cypress[bot] commented 2 months ago

Test summary

26 • 0 • 0 • 0 • 0

Run details


Project	roar-dashboard-e2e
Status	Passed
Commit	8de203a474
Started	Aug 15, 2024 2:44 PM
Ended	Aug 15, 2024 2:48 PM
Duration	03:59 💡
OS	Linux Ubuntu -
Browser	Edge 127

View run in Cypress Cloud ➡️

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Cloud

Emily-ejag commented 2 months ago

Great solution, I have one question. When I tried in production (using the PR link) I noticed that after the 15 min it took me to this page:

Is this the correct behavior? Or should It take you to the signing page?

maximilianoertel commented 2 months ago

Great solution, I have one question. When I tried in production (using the PR link) I noticed that after the 15 min it took me to this page: […] Is this the correct behavior? Or should It take you to the signing page?

Thanks for catching this @Emily-ejag! Turns out there was a bit of an oversight here from my side – should be working as expected now

sentry-io[bot] commented 2 months ago

Suspect Issues

This pull request was deployed and Sentry observed the following issues:

‼️ TypeError: can't access property "grade", Ie.studentData is undefined checkConsent(src/pages/HomeParticipant) View Issue

_{Did you find this useful? React with a 👍 or 👎}

yeatmanlab / roar-dashboard