197 & 278: Session Timeout

tdrs-backend/tdpservice/settings/common.py

@@ -42,6 +42,7 @@ class Common(Configuration):
         "django.contrib.messages.middleware.MessageMiddleware",
         "django.middleware.clickjacking.XFrameOptionsMiddleware",
         "corsheaders.middleware.CorsMiddleware",
+        "tdpservice.users.api.middleware.AuthUpdateMiddleware"
     )
 
     ALLOWED_HOSTS = ["*"]
@@ -199,6 +200,7 @@ class Common(Configuration):
     # Sessions
     SESSION_ENGINE = "django.contrib.sessions.backends.signed_cookies"
     SESSION_COOKIE_HTTPONLY = True
+    SESSION_TIMEOUT = 30
 
     # The CSRF token Cookie holds no security benefits when confined to HttpOnly.
     # Setting this to false to allow the frontend to include it in the header

tdrs-backend/tdpservice/settings/development.py

@@ -49,3 +49,6 @@ class Development(Common):
         "all_applications": True,
         "group_models": True,
     }
+
+    # Session Timeout
+    SESSION_TIMEOUT = 5

tdrs-backend/tdpservice/settings/local.py

@@ -22,3 +22,6 @@ class Local(Common):
     EMAIL_HOST = "localhost"
     EMAIL_PORT = 1025
     EMAIL_BACKEND = "django.core.mail.backends.console.EmailBackend"
+
+    # Session Timeout
+    SESSION_TIMEOUT = 5

tdrs-backend/tdpservice/users/api/middleware.py

@@ -0,0 +1,34 @@
+"""Handle authorization calls globally."""
+import datetime
+from django.conf import settings
+
+
+class AuthUpdateMiddleware:
+    """Update authorization cookie with new requests."""
+
+    def __init__(self, get_response):
+        self.get_response = get_response
+
+    def __call__(self, request):
+        """Update cookie."""
+        response = self.get_response(request)
+        now = datetime.datetime.now()
+        timeout = now + datetime.timedelta(minutes=settings.SESSION_TIMEOUT)
+
+        # if there is no user, the user is currently
+        # in the authentication process so we can't
+        # update the cookie yet
+        if request.user.is_authenticated:
+            id_token = request.COOKIES.get("id_token")
+            response.set_cookie(
+                "id_token",
+                value=id_token,
+                max_age=None,
+                expires=timeout,
+                path="/",
+                domain=None,
+                secure=True,
+                httponly=True,
+            )
+
+        return response

tdrs-backend/tdpservice/users/api/utils.py

@@ -4,6 +4,7 @@
 import os
 import secrets
 import time
+import datetime
 from urllib.parse import quote_plus, urlencode
 
 from django.core.exceptions import SuspiciousOperation
@@ -14,9 +15,12 @@
 from jwcrypto import jwk
 from rest_framework import status
 from rest_framework.response import Response
+from django.conf import settings
 
 logger = logging.getLogger()
 logger.setLevel(logging.INFO)
+now = datetime.datetime.now()
+timeout = now + datetime.timedelta(minutes=settings.SESSION_TIMEOUT)
 
 """
 Validate the nonce and state returned by login.gov API calls match those
@@ -154,7 +158,7 @@ def response_internal(user, status_message, id_token):
         "id_token",
         value=id_token,
         max_age=None,
-        expires=None,
+        expires=timeout,
         path="/",
         domain=None,
         secure=True,
@@ -175,7 +179,7 @@ def response_redirect(self, id_token):
         "id_token",
         value=id_token,
         max_age=None,
-        expires=None,
+        expires=timeout,
         path="/",
         domain=None,
         secure=True,

tdrs-backend/tdpservice/users/test/test_auth.py

@@ -6,6 +6,7 @@
 import secrets
 import pytest
 import jwt
+import datetime
 from rest_framework import status
 from django.core.exceptions import SuspiciousOperation
 from rest_framework.test import APIRequestFactory
@@ -83,6 +84,22 @@ def test_oidc_logout_with_token(api_client):
     response = view(request)
     assert response.status_code == status.HTTP_302_FOUND
 
+@pytest.mark.django_db
+def test_auth_update(api_client, user):
+    """Test session update."""
+    api_client.login(username=user.username, password="test_password")
+
+    api_client.get("/v1/auth_check")
+    c1 = api_client.cookies.get('id_token')
+    e1 = datetime.datetime.strptime(c1["expires"], "%a, %d %b %Y %H:%M:%S %Z")
+    time.sleep(1)
+
+    api_client.get("/v1/auth_check")
+    c2 = api_client.cookies.get('id_token')
+    e2 = datetime.datetime.strptime(c2["expires"], "%a, %d %b %Y %H:%M:%S %Z")
+
+    assert e1 < e2
+
 
 @pytest.mark.django_db
 def test_logout(api_client, user):

tdrs-frontend/.env.development

@@ -1,4 +1,7 @@
 REACT_APP_BACKEND_URL=http://localhost:8080/v1
+REACT_APP_TIMEOUT_TIME=6000
+REACT_APP_LOGOUT_TIME=10000
+REACT_APP_DEBOUNCE_TIME=1000
 
 # Setup SCSS:
 # The following makes it possible to import SASS modules

tdrs-frontend/package.json

@@ -7,7 +7,6 @@
     "@fortawesome/free-solid-svg-icons": "^5.15.1",
     "@fortawesome/react-fontawesome": "^0.1.12",
     "axios": "^0.20.0",
-    "axios-cookiejar-support": "^1.0.1",
     "babel-eslint": "10",
     "classnames": "^2.2.6",
     "concurrently": "^5.3.0",
@@ -21,6 +20,7 @@
     "prop-types": "^15.7.2",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
+    "react-idle-timer": "^4.5.0",
     "react-redux": "^7.2.2",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
@@ -29,7 +29,6 @@
     "redux-oidc": "^4.0.0-beta1",
     "redux-thunk": "^2.3.0",
     "seamless-immutable": "^7.1.3",
-    "tough-cookie": "^4.0.0",
     "typescript": "^3.9.7",
     "uswds": "^2.9.0"
   },

tdrs-frontend/src/assets/Button.scss

@@ -0,0 +1,5 @@
+.usa-button,
+.usa-button:hover {
+  font-size: 1rem;
+  background-color: $primary-medium-blue;
+}

tdrs-frontend/src/assets/EditProfile.scss

@@ -1,13 +1,3 @@
 .usa-combo-box__input--error {
   border: .25rem solid #b50909;
-}
-
-.request-access-button,
-.request-access-button:hover {
-  font-size: 1rem;
-  background-color: $primary-medium-blue;
-}
-
-.request-access-button:disabled {
-  color: $disabled-button-color;
 }

tdrs-frontend/src/assets/IdleTimer.scss

@@ -0,0 +1,72 @@
+.modal {
+  position: fixed; 
+  z-index: 1; 
+  left: 0;
+  top: 0;
+  width: 100%; 
+  height: 100%; 
+  overflow: auto;
+  background-color: rgb(0,0,0);
+  background-color: rgba(0,0,0,0.4); 
+}
+
+/* Modal Content/Box */
+.modal-content {
+  background-color: #fefefe;
+  margin: 15% auto;
+  padding: 20px;
+  border: 1px solid #888;
+  max-width: 670px;
+}
+
+/* The Close Button */
+.close {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+// .modal-header {
+//   padding: 2px 16px;
+//   background-color: $primary-light-pale-blue;
+//   color: $primary-acf-blue;
+// }
+
+/* Modal Body */
+// .modal-body {padding: 2px 16px;}
+
+/* Modal Footer */
+// .modal-footer {
+//   padding: 2px 16px;
+//   background-color: $primary-light-pale-blue;
+//   color: $primary-acf-blue;
+//   display: flex;
+//   justify-content: flex-end;
+// }
+
+/* Modal Content */
+.modal-content {
+  position: relative;
+  background-color: #fefefe;
+  margin: auto;
+  padding: 0;
+  border: 1px solid #888;
+  width: 80%;
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
+  animation-name: animatetop;
+  animation-duration: 0.4s
+}
+
+/* Add Animation */
+@keyframes animatetop {
+  from {top: -300px; opacity: 0}
+  to {top: 0; opacity: 1}
+}

tdrs-frontend/src/components/EditProfile/EditProfile.jsx

@@ -205,7 +205,7 @@ function EditProfile() {
             ))}
           </ComboBox>
         </div>
-        <Button type="submit" className="width-full request-access-button">
+        <Button type="submit" className="width-full">
           Request Access
         </Button>
       </form>

tdrs-frontend/src/components/Header/Header.jsx

@@ -53,33 +53,41 @@ function HeaderComp() {
                 </a>
               </li>
             </ul>
-            {user && user.email && (
-              <div className="usa-nav__secondary">
-                <ul className="usa-nav__secondary-links">
-                  <li className="usa-nav__secondary-item">
+            <div className="usa-nav__secondary">
+              <ul className="usa-nav__secondary-links">
+                <li
+                  className={`${
+                    user && user.email ? 'display-block' : 'display-none'
+                  } usa-nav__secondary-item`}
+                >
+                  {user && user.email && (
                     <a href="/">
                       <FontAwesomeIcon
                         className="margin-right-1"
                         icon={faUserCircle}
                       />
-                      {user.email}
-                    </a>
-                  </li>
-                  <li className="usa-nav__secondary-item">
-                    <a
-                      className="sign-out-link"
-                      href={`${process.env.REACT_APP_BACKEND_URL}/logout/oidc`}
-                    >
-                      <FontAwesomeIcon
-                        className="margin-right-1"
-                        icon={faSignOutAlt}
-                      />
-                      Sign Out
+                      {user && user.email}
                     </a>
-                  </li>
-                </ul>
-              </div>
-            )}
+                  )}
+                </li>
+                <li className="usa-nav__secondary-item">
+                  <a
+                    className="sign-out-link"
+                    href={
+                      user && user.email
+                        ? `${process.env.REACT_APP_BACKEND_URL}/logout/oidc`
+                        : `${process.env.REACT_APP_BACKEND_URL}/login/oidc`
+                    }
+                  >
+                    <FontAwesomeIcon
+                      className="margin-right-1"
+                      icon={faSignOutAlt}
+                    />
+                    {user && user.email ? 'Sign Out' : 'Sign In'}
+                  </a>
+                </li>
+              </ul>
+            </div>
           </div>
         </nav>
       </header>

tdrs-frontend/src/components/Header/Header.test.js

@@ -20,6 +20,7 @@ describe('Header', () => {
         <Header />
       </Provider>
     )
+
     const title = wrapper.find('a[title="Home"]')
     expect(title).toExist()
     expect(title).toIncludeText('TANF Data Portal')
@@ -108,9 +109,11 @@ describe('Header', () => {
     const secondaryLinks = wrapper.find('.usa-nav__secondary-item')
 
     expect(secondaryLinks.length).toEqual(2)
+    expect(secondaryLinks.first().text()).toEqual('test@test.com')
+    expect(secondaryLinks.last().text()).toEqual('Sign Out')
   })
 
-  it('should not have secondaryItems when user is logged out', () => {
+  it('should have one visible secondaryItem when user is logged out', () => {
     initialState = {
       ...initialState,
       auth: { user: {}, authenticated: false },
@@ -124,6 +127,7 @@ describe('Header', () => {
 
     const secondaryLinks = wrapper.find('.usa-nav__secondary-item')
 
-    expect(secondaryLinks.length).toEqual(0)
+    expect(secondaryLinks.first().hasClass('display-none')).toBeTruthy()
+    expect(secondaryLinks.last().text()).toEqual('Sign In')
   })
 })