To follow the CMS Acceptable Risk Safeguards (ARS) controls AC-11 Idle Session Timeout and AC-12(03) Timeout Warning Message, this change adds idle session timeout to the QuickStart sample application. The idle timer detects common user activity (mouse movements, clicks, etc.) and pops up a prompt after a configurable period of inactivity (the 'timeout'). If the user doesn't respond after a second period (the 'prompt timeout'), they are automatically logged out.
This change uses the react-idle-timer package to implement an idle timer. I chose this package because it is widely used (~100M downloads) and actively maintained.
The idle timer is defined as a React component, IdleTimer, that is a child of the App component and accepts the following props:
handleLogout (function): the function that performs session logout of the current user
timeout (number): the amount of idle time after which the 'Session Timeout' warning prompt will be displayed. Defaults to 15 minutes, as defined by AC-11 (see the attached document below).
promptTimeout (number): after displaying the 'Session Timeout' prompt, the amount of time after which the user will be automatically logged out. The user can override this manually by closing the prompt. Defaults to 10 seconds.
The timeout prop is customizable, but should follow the security requirements for the system. See ISPGBroadcast_AC11.docx for more information.
The prompt modal uses a CMS Design System component for consistent design with the rest of the app.
manual: I tested locally and in a deployed feature branch
automated: I wrote new Jest tests for the IdleTimer component
Pull Request Creator Checklist
[ ] This PR has an associated issue or issues.
[ ] The associated issue(s) are linked above.
[ ] This PR meets all acceptance criteria for those issues.
[ ] This PR and linked issue(s) are adequately documented
[ ] This PR and linked issues(s) are a complete description of the changeset; an individual or team should be able to understand the issue(s) and changes by reading through this PR and it's links, with no further interaction.
[ ] Someone has been assigned this PR.
[ ] At least one person has been marked as reviewer on this PR.
Pull Request Reviewer/Assignee Checklist
[ ] This PR has an associated issue or issues.
[ ] The associated issue(s) are linked above.
[ ] This PR meets all acceptance criteria for those issues.
[ ] This PR and linked issue(s) are adequately documented
[ ] This PR and linked issues(s) are a complete description of the changeset; an individual or team should be able to understand the issue(s) and changes by reading through this PR and it's links, with no further interaction.
Purpose
To follow the CMS Acceptable Risk Safeguards (ARS) controls
AC-11 Idle Session TimeoutandAC-12(03) Timeout Warning Message, this change adds idle session timeout to the QuickStart sample application. The idle timer detects common user activity (mouse movements, clicks, etc.) and pops up a prompt after a configurable period of inactivity (the 'timeout'). If the user doesn't respond after a second period (the 'prompt timeout'), they are automatically logged out.https://user-images.githubusercontent.com/25254258/186910249-8b409755-96d5-4c64-be41-2037e4f72744.mov
Linked Issues to Close
N/A
Approach
This change uses the
react-idle-timerpackage to implement an idle timer. I chose this package because it is widely used (~100M downloads) and actively maintained.The idle timer is defined as a React component,
IdleTimer, that is a child of theAppcomponent and accepts the following props:handleLogout(function): the function that performs session logout of the current usertimeout(number): the amount of idle time after which the 'Session Timeout' warning prompt will be displayed. Defaults to 15 minutes, as defined by AC-11 (see the attached document below).promptTimeout(number): after displaying the 'Session Timeout' prompt, the amount of time after which the user will be automatically logged out. The user can override this manually by closing the prompt. Defaults to 10 seconds.The
timeoutprop is customizable, but should follow the security requirements for the system. See ISPGBroadcast_AC11.docx for more information.The prompt modal uses a CMS Design System component for consistent design with the rest of the app.
Learning
Assorted Notes/Considerations
Testing:
IdleTimercomponentPull Request Creator Checklist
Pull Request Reviewer/Assignee Checklist