From aa6578d1760d1dfd180c66d44bc49dba84dd2224 Mon Sep 17 00:00:00 2001
From: stevepodell <steve@podell.com>
Date: Fri, 14 Feb 2025 17:06:38 -0800
Subject: [PATCH] Sign in via email/password with email verification roughly
 working. Apis are not yet protected from access without cookie/sessionID
 Didn't want to get too diverged from other development. Put most Routes in
 App behind the ProtectRoute -- If that causes problems in testing, you can
 disable it by taking Routes out of ProtectedRoutes. Cleared some lint
 warnings and console errors in PersonSummaryHeader and PersonSummaryRow --
 the boolean variables do get through to the StyledComponent and change the
 styles. Added a sign in/out buttonm to the HeaderBar. Added
 VerifySecretCodeModal with styling same as in the WebApp. Commented out more
 code we won't be using to make searching easier.  Cleared more lint warnings.

---
 package-lock.json                             |   6 +-
 src/App.jsx                                   |  19 +-
 src/js/auth.js                                |  34 --
 src/js/common/dispatcher/Dispatcher.js        |  36 --
 src/js/common/utils/apiCalming.js             |  78 ++--
 .../components/Drawers/EditQuestionDrawer.jsx |   2 +-
 .../Drawers/EditTaskGroupDrawer.jsx           |   2 +-
 src/js/components/Navigation/HeaderBar.jsx    | 118 +++---
 .../Person/EditPersonDrawerMainContent.jsx    |   1 +
 .../components/Person/PersonSummaryHeader.jsx |  20 +-
 src/js/components/Person/PersonSummaryRow.jsx |  37 +-
 src/js/components/PrivateRoute.jsx            |  28 +-
 src/js/components/VerifySecretCodeModal.jsx   | 362 ++++++++++++++++++
 src/js/contexts/ConnectAppContext.jsx         |  14 +-
 src/js/pages/Login.jsx                        | 117 ++++--
 src/js/pages/Teams.jsx                        |  26 +-
 src/js/react-query/WeConnectQuery.js          |  10 +-
 src/js/react-query/mutations.jsx              |  22 +-
 src/js/test/ReactQuerySaveReadTest.jsx        | 110 ++++++
 19 files changed, 754 insertions(+), 288 deletions(-)
 delete mode 100644 src/js/auth.js
 delete mode 100644 src/js/common/dispatcher/Dispatcher.js
 create mode 100644 src/js/components/VerifySecretCodeModal.jsx
 create mode 100644 src/js/test/ReactQuerySaveReadTest.jsx

diff --git a/package-lock.json b/package-lock.json
index 11a8da5..f41d9df 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19756,9 +19756,9 @@
       }
     },
     "node_modules/undici": {
-      "version": "6.21.0",
-      "resolved": "https://registry.npmjs.org/undici/-/undici-6.21.0.tgz",
-      "integrity": "sha512-BUgJXc752Kou3oOIuU1i+yZZypyZRqNPW0vqoMPl8VaoalSfeR0D8/t4iAS3yirs79SSMTxTag+ZC86uswv+Cw==",
+      "version": "6.21.1",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-6.21.1.tgz",
+      "integrity": "sha512-q/1rj5D0/zayJB2FraXdaWxbhWiNKDvu8naDT2dl1yTlvJp4BLtOcp2a5BvgGNQpYYJzau7tf1WgKv3b+7mqpQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
diff --git a/src/App.jsx b/src/App.jsx
index 9458772..e8e3f1a 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -72,18 +72,19 @@ function App () {
                   <Drawers />
                   <Routes>
                     <Route path="/answers/:questionnaireId/:personId" element={<QuestionnaireAnswers />} />
+                    <Route path="/login" element={<Login />} />
                     <Route element={<PrivateRoute />}>
                       <Route path="/faq" element={<FAQ />} />
+                      <Route path="/login" element={<Login />} />
+                      <Route path="/q/:questionnaireId/:personId" element={<AnswerQuestions />} />
+                      <Route path="/questionnaire/:questionnaireId" element={<QuestionnaireQuestionList />} />
+                      <Route path="/system-settings" element={<SystemSettings />} />
+                      <Route path="/tasks" element={<Tasks />} />
+                      <Route path="/task-group/:taskGroupId" element={<TaskGroup />} />
+                      <Route path="/teams" element={<Teams />} />
+                      <Route path="/team-home/:teamId" element={<TeamHome />} />
+                      <Route path="/" element={<Teams />} />
                     </Route>
-                    <Route path="/login" element={<Login />} />
-                    <Route path="/q/:questionnaireId/:personId" element={<AnswerQuestions />} />
-                    <Route path="/questionnaire/:questionnaireId" element={<QuestionnaireQuestionList />} />
-                    <Route path="/system-settings" element={<SystemSettings />} />
-                    <Route path="/tasks" element={<Tasks />} />
-                    <Route path="/task-group/:taskGroupId" element={<TaskGroup />} />
-                    <Route path="/teams" element={<Teams />} />
-                    <Route path="/team-home/:teamId" element={<TeamHome />} />
-                    <Route path="/" element={<Teams />} />
                     <Route path="*" element={<PageNotFound />} />
                   </Routes>
                   {/* <Footer /> has problems */}
diff --git a/src/js/auth.js b/src/js/auth.js
deleted file mode 100644
index e701ce1..0000000
--- a/src/js/auth.js
+++ /dev/null
@@ -1,34 +0,0 @@
-// import React from 'react';
-// import { Navigate, Outlet, useLocation } from 'react-router';
-// import { useConnectAppContext } from './contexts/ConnectAppContext';
-//
-// import webAppConfig from './config';
-//
-//
-// /* global $  */
-//
-// eslint-disable-next-line import/prefer-default-export
-// export async function getAuthentication () {
-//   if (window.$) {
-//     console.log(`${webAppConfig.STAFF_API_SERVER_API_ROOT_URL}getAuth`);
-//     $.get(`${webAppConfig.STAFF_API_SERVER_API_ROOT_URL}auth/`,
-//       {},
-//       (data, status) => {
-//         console.log(`/auth response -- status: '${status}',  data: ${JSON.stringify(data)}`);
-//         localStorage.setItem('isAuthenticated', data.userId);
-//         return data.authenticated;
-//       });
-//   } else {
-//     console.log('jquery not yet defined in getAuthentication');
-//   }
-// }
-
-// Routes in App.jsx wrapped with PrivateRoute require authentication to access
-// eslint-disable-next-line import/prefer-default-export
-// export const PrivateRoute = () => {
-//   const { getAppContextValue } = useConnectAppContext();
-//   console.log('========= PrivateRoute =========== isAuth: ', localStorage.getItem('isAuthenticated'));
-//   const location = useLocation();
-//   const isAuthenticated = getAppContextValue('isAuthenticated');
-//   return isAuthenticated ? <Outlet /> : <Navigate to="/login" state={{ from: location }} replace />;
-// };
diff --git a/src/js/common/dispatcher/Dispatcher.js b/src/js/common/dispatcher/Dispatcher.js
deleted file mode 100644
index 6da4117..0000000
--- a/src/js/common/dispatcher/Dispatcher.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/* eslint-disable prefer-destructuring */
-/* eslint-disable func-names */
-import { httpLog } from '../utils/logging';
-import $ajax from '../../utils/service';
-
-const Dispatcher = require('flux').Dispatcher;
-
-Dispatcher.prototype.$ajax = $ajax;
-
-Dispatcher.prototype.loadEndpoint = function (endpoint, data = {}) {
-  if (!(this.$ajax instanceof Function)) throw new Error('$ajax handler not initialized');
-
-  // Making single pure actions, to work around existing actions where multiple requests are fired
-  // often from Actions fired from within stores (we really need to avoid that)
-  let endpointAdjusted = endpoint;
-  if (endpoint === 'voterAddressOnlyRetrieve') {
-    endpointAdjusted = 'voterAddressRetrieve';
-  }
-
-  // console.log(`Ajax request in Dispatcher: ${endpoint}`);
-  return this.$ajax({
-    endpoint: endpointAdjusted,
-    data,
-    success: (res) => {
-      httpLog(`AJAX Response to endpoint: ${endpoint}`);
-      this.dispatch({ type: endpoint, res });
-    },
-
-    error: (err) => {
-      httpLog(`AJAX ERROR Response to endpoint: ${endpoint}`);
-      this.dispatch({ type: `error-${endpoint}`, err });
-    },
-  });
-};
-
-export default new Dispatcher();
diff --git a/src/js/common/utils/apiCalming.js b/src/js/common/utils/apiCalming.js
index 5d5e459..35a4958 100644
--- a/src/js/common/utils/apiCalming.js
+++ b/src/js/common/utils/apiCalming.js
@@ -1,39 +1,39 @@
-import { httpLog } from './logging';
-
-/*
-If we were building the app from scratch, every API query would be conditioned by logic
-to make certain the query is necessary.
-
-Important: adding new queries "just to be safe" without proactively determining that they are necessary
-will damage the hard earned performance of the WebApp.
-
-This function stops identical queries from being fired within the specified duration in milliseconds
-*/
-export default function apiCalming (name, duration = 1000) {
-  const { apiCalmingDict } = window;
-  if (!apiCalmingDict) {
-    window.apiCalmingDict = {};
-  }
-  if (!window.apiCalmingDict[name]) {
-    window.apiCalmingDict[name] =  {
-      duration,
-      timeStamp: Date.now(),
-    };
-    httpLog(`== apiCalming for ${name}, make the API call: true, no dict entry yet for this API`);
-    return true;
-  }
-
-  const entry =  window.apiCalmingDict[name];
-  if (entry.timeStamp + duration < Date.now()) {
-    window.apiCalmingDict[name] = {
-      duration,
-      timeStamp: Date.now(),
-    };
-    httpLog(`== apiCalming for ${name}, make the API call: true, duration: ${duration}, previous dict entry has expired`);
-    return true;
-  }
-  const apiCalmingMessageFalse = `== apiCalming for ${name}, make the API call: false, duration: ${duration}, previous calming entry still in force`;
-  // console.log(apiCalmingMessageFalse);
-  httpLog(apiCalmingMessageFalse);
-  return false;
-}
+// import { httpLog } from './logging';
+//
+// /*
+// If we were building the app from scratch, every API query would be conditioned by logic
+// to make certain the query is necessary.
+//
+// Important: adding new queries "just to be safe" without proactively determining that they are necessary
+// will damage the hard earned performance of the WebApp.
+//
+// This function stops identical queries from being fired within the specified duration in milliseconds
+// */
+// export default function apiCalming (name, duration = 1000) {
+//   const { apiCalmingDict } = window;
+//   if (!apiCalmingDict) {
+//     window.apiCalmingDict = {};
+//   }
+//   if (!window.apiCalmingDict[name]) {
+//     window.apiCalmingDict[name] =  {
+//       duration,
+//       timeStamp: Date.now(),
+//     };
+//     httpLog(`== apiCalming for ${name}, make the API call: true, no dict entry yet for this API`);
+//     return true;
+//   }
+//
+//   const entry =  window.apiCalmingDict[name];
+//   if (entry.timeStamp + duration < Date.now()) {
+//     window.apiCalmingDict[name] = {
+//       duration,
+//       timeStamp: Date.now(),
+//     };
+//     httpLog(`== apiCalming for ${name}, make the API call: true, duration: ${duration}, previous dict entry has expired`);
+//     return true;
+//   }
+//   const apiCalmingMessageFalse = `== apiCalming for ${name}, make the API call: false, duration: ${duration}, previous calming entry still in force`;
+//   // console.log(apiCalmingMessageFalse);
+//   httpLog(apiCalmingMessageFalse);
+//   return false;
+// }
diff --git a/src/js/components/Drawers/EditQuestionDrawer.jsx b/src/js/components/Drawers/EditQuestionDrawer.jsx
index b4cc990..f153698 100644
--- a/src/js/components/Drawers/EditQuestionDrawer.jsx
+++ b/src/js/components/Drawers/EditQuestionDrawer.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { renderLog } from '../../common/utils/logging';
 import { useConnectAppContext } from '../../contexts/ConnectAppContext';
 import EditQuestionDrawerMainContent from '../Questionnaire/EditQuestionDrawerMainContent';
diff --git a/src/js/components/Drawers/EditTaskGroupDrawer.jsx b/src/js/components/Drawers/EditTaskGroupDrawer.jsx
index 6a6cf5d..cee36bc 100644
--- a/src/js/components/Drawers/EditTaskGroupDrawer.jsx
+++ b/src/js/components/Drawers/EditTaskGroupDrawer.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { renderLog } from '../../common/utils/logging';
 import { useConnectAppContext } from '../../contexts/ConnectAppContext';
 import EditTaskGroupDrawerMainContent from '../Task/EditTaskGroupDrawerMainContent';
diff --git a/src/js/components/Navigation/HeaderBar.jsx b/src/js/components/Navigation/HeaderBar.jsx
index b158ca0..d7f0754 100644
--- a/src/js/components/Navigation/HeaderBar.jsx
+++ b/src/js/components/Navigation/HeaderBar.jsx
@@ -1,4 +1,4 @@
-import { Tab, Tabs } from '@mui/material';
+import { Button, Tab, Tabs } from '@mui/material';
 import { withStyles } from '@mui/styles';
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router';
@@ -7,28 +7,41 @@ import standardBoxShadow from '../../common/components/Style/standardBoxShadow';
 import { hasIPhoneNotch } from '../../common/utils/cordovaUtils';
 import { normalizedHrefPage } from '../../common/utils/hrefUtils';
 import { renderLog } from '../../common/utils/logging';
+import { useConnectAppContext } from '../../contexts/ConnectAppContext';
+import { useLogoutMutation } from '../../react-query/mutations';
+import weConnectQueryFn, { METHOD } from '../../react-query/WeConnectQuery';
 import { displayTopMenuShadow } from '../../utils/applicationUtils';
 import { TopOfPageHeader, TopRowOneLeftContainer, TopRowOneMiddleContainer, TopRowOneRightContainer, TopRowTwoLeftContainer } from '../Style/pageLayoutStyles';
 import HeaderBarLogo from './HeaderBarLogo';
-// import { handleResize } from '../../common/utils/isMobileScreenSize';
 
 
-const HeaderBar = () => {
-  renderLog('HeaderBar');  // Set LOG_RENDER_EVENTS to log all renders
-  // eslint-disable-next-line no-unused-vars
-  const [scrolledDown, setScrolledDown] = useState(false);
-  const [tabsValue, setTabsValue] = useState('1');
-  // eslint-disable-next-line no-unused-vars
-  const [showTabs, setShowTabs] = useState(true);
+// eslint-disable-next-line no-unused-vars
+const HeaderBar = (classes) => {
+  renderLog('HeaderBar');
   const navigate = useNavigate();
+  const { setAppContextValue, getAppContextValue } = useConnectAppContext();
+  const { mutate: mutateLogout } = useLogoutMutation();
+
+  const [scrolledDown] = useState(false);
+  const [tabsValue, setTabsValue] = useState('1');
+  const [showTabs] = useState(true);
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
 
+  const isAuth = getAppContextValue('isAuthenticated');
+  useEffect(() => {
+    if (isAuth !== null) {
+      console.log('----------- isAuthenticated changed =', isAuth);
+      setIsAuthenticated(isAuth);
+    }
+  }, [isAuth]);
 
-  // This does not do anything
-  // const handleResizeLocal = () => {
-  //   if (handleResize('HeaderBar')) {
-  //     // this.setState({});
-  //   }
-  // };
+  const logoutApi = async () => {
+    const data = await weConnectQueryFn('logout', {}, METHOD.POST);
+    console.log(`/logout response in HeaderBar -- status: '${'status'}',  data: ${JSON.stringify(data)}`);
+    setAppContextValue('isAuthenticated', false);
+    navigate('/login');
+    mutateLogout();
+  };
 
   const initializeTabValue = () => {
     // console.log('initializeTabValue normalizedHrefPage():', normalizedHrefPage());
@@ -60,7 +73,6 @@ const HeaderBar = () => {
     // setTabsValue(newValue);
     switch (newValue) {
       case '1':
-        // window.history.pushState({}, '', '/tasks'); Only changes the url, does not change the page render
         navigate('/tasks');
         break;
       case '2':
@@ -80,23 +92,6 @@ const HeaderBar = () => {
     initializeTabValue();
   }, []);
 
-  // This does not look like it does anything, except always return true
-  // const showTabs = () => {
-  //   // console.log('showTabs normalizedHrefPage():', normalizedHrefPage());
-  //   switch (normalizedHrefPage()) {
-  //     case 'q':
-  //       return false;
-  //     default:
-  //       break;
-  //   }
-  //   return true;
-  // };
-
-  // const onAppObservableStoreChange = () => {
-  //   // console.log('------ HeaderBar, onAppObservableStoreChange received: ', msg);
-  //   setScrolledDown(false);
-  // };
-  // console.log('tabs value ==== ', tabsValue);
   return (
     <HeaderBarWrapper
       $hasNotch={hasIPhoneNotch()}
@@ -117,7 +112,14 @@ const HeaderBar = () => {
           )}
         </TopRowOneMiddleContainer>
         <TopRowOneRightContainer className="u-cursor--pointer">
-          &nbsp;
+          <Button
+            variant="outlined"
+            sx={{ border: 'none' }}
+            id="signInButton"
+            onClick={() => (isAuthenticated ? logoutApi() : navigate('/login'))}
+          >
+            {isAuthenticated ? 'Sign Out' : 'Sign In'}
+          </Button>
         </TopRowOneRightContainer>
         <TopRowTwoLeftContainer>
          &nbsp;
@@ -137,6 +139,24 @@ const styles = (theme) => ({
       width: '100%',
     },
   },
+  navButtonOutlined: {
+    height: 32,
+    borderRadius: 32,
+    color: 'white',
+    backgroundColor: 'yellow',
+    border: '1px solid white',
+    marginBottom: '1em',
+    fontWeight: '300',
+    width: '47%',
+    fontSize: 12,
+    padding: '5px 0',
+    marginTop: 8,
+  },
+  navClose: {
+    position: 'fixed',
+    right: 16,
+    cursor: 'pointer',
+  },
 });
 
 const HeaderBarWrapper = styled('div', {
@@ -147,35 +167,5 @@ const HeaderBarWrapper = styled('div', {
   border-bottom: ${(!scrolledDown || !hasSubmenu) ? '' : '1px solid #aaa'};
 `));
 
-// const TabsStyled = styled(Tabs)`
-// `;
 
 export default withStyles(styles)(HeaderBar);
-
-
-// {/* <TabsStyled */}
-// {/*   value={tabsValue} */}
-// {/*   indicatorColor="primary" */}
-// {/* > */}
-// {/*         <TabWithPushHistory */}
-// {/*           id="headerTabDashboard" */}
-// {/*           label="Dashboard" */}
-// {/*           change={handleTabChange} */}
-// {/*           to="/tasks" */}
-// {/*           value={0} */}
-// {/*         /> */}
-// {/*         <TabWithPushHistory */}
-// {/*           id="headerTabTeams" */}
-// {/*           label="Teams" */}
-// {/*           change={handleTabChange} */}
-// {/*           to="/teams" */}
-// {/*           value={1} */}
-// {/*         /> */}
-// {/*         <TabWithPushHistory */}
-// {/*           id="headerTabSettings" */}
-// {/*           label="Settings" */}
-// {/*           change={handleTabChange} */}
-// {/*           to="/system-settings" */}
-// {/*           value={2} */}
-// {/*         /> */}
-// </TabsStyled>
diff --git a/src/js/components/Person/EditPersonDrawerMainContent.jsx b/src/js/components/Person/EditPersonDrawerMainContent.jsx
index be1a4e4..217f0d2 100644
--- a/src/js/components/Person/EditPersonDrawerMainContent.jsx
+++ b/src/js/components/Person/EditPersonDrawerMainContent.jsx
@@ -14,6 +14,7 @@ const EditPersonDrawerMainContent = () => {
 
   useEffect(() => {  // Replaces onAppObservableStoreChange and will be called whenever the context value changes
     // console.log('EditPersonDrawerMainContent: Context value changed:', true);
+    // 2/14/25 warning  React Hook useEffect contains a call to 'setTeamId'. Without a list of dependencies, this can lead to an infinite chain of updates. To fix this, pass [getAppContextValue] as a second argument to the useEffect Hook  react-hooks/exhaustive-deps
     const teamIdTemp = getAppContextValue('editPersonDrawerTeamId');
     setTeamId(teamIdTemp);
   });
diff --git a/src/js/components/Person/PersonSummaryHeader.jsx b/src/js/components/Person/PersonSummaryHeader.jsx
index 55d4d53..d0fb52b 100644
--- a/src/js/components/Person/PersonSummaryHeader.jsx
+++ b/src/js/components/Person/PersonSummaryHeader.jsx
@@ -9,7 +9,7 @@ const PersonSummaryHeader = () => {
   return (
     <OnePersonHeader>
       {/* Width (below) of this PersonHeaderCell comes from the combined widths of the first x columns in PersonMemberList */}
-      <PersonHeaderCell largefont="true" titlecell="true" cellwidth={200}>
+      <PersonHeaderCell $largefont $titleCell cellwidth={200}>
         &nbsp;
       </PersonHeaderCell>
       <PersonHeaderCell cellwidth={300}>
@@ -31,19 +31,17 @@ const OnePersonHeader = styled('div')`
   margin-top: 10px;
 `;
 
-const PersonHeaderCell = styled('div', {
-  shouldForwardProp: (prop) => !['largefont', 'titlecell', 'cellwidth'].includes(prop),
-})(({ largefont, titlecell, cellwidth }) => (`
+const PersonHeaderCell = styled.div`
+  border-bottom: ${(props) => (props.$titlecell ? 'initial;' : '1px solid #ccc;')}
   align-content: center;
-  ${(titlecell) ? '' : 'border-bottom: 1px solid #ccc;'}
-  ${(largefont) ? 'font-size: 1.1em;' : 'font-size: .8em;'};
-  ${(titlecell) ? '' : 'font-weight: 550;'}
   height: 22px;
-  ${cellwidth ? `max-width: ${cellwidth}px;` : ''}
-  ${cellwidth ? `min-width: ${cellwidth}px;` : ''}
+  font-size: ${(props) => (props?.$largefont ? '1.1em;' : '.8em;')};
+  font-weight: ${(props) => (props?.$titleCell ? ';' : '550;')}
+  min-width: ${(props) => (props.cellwidth ? `${props.cellwidth}px;` : ';')};
+  max-width: ${(props) => (props.cellwidth ? `${props.cellwidth}px;` : ';')};
+  width: ${(props) => (props.cellwidth ? `${props.cellwidth}px;` : ';')};
   overflow: hidden;
   white-space: nowrap;
-  ${cellwidth ? `width: ${cellwidth}px;` : ''}
-`));
+`;
 
 export default PersonSummaryHeader;
diff --git a/src/js/components/Person/PersonSummaryRow.jsx b/src/js/components/Person/PersonSummaryRow.jsx
index 917632c..ba0c444 100644
--- a/src/js/components/Person/PersonSummaryRow.jsx
+++ b/src/js/components/Person/PersonSummaryRow.jsx
@@ -53,7 +53,10 @@ const PersonSummaryRow = ({ person, rowNumberForDisplay, teamId }) => {
   return (
     <OnePersonWrapper key={`teamMember-${person.personId}`}>
       {rowNumberForDisplay && (
-        <PersonCell id={`index-personId-${person.personId}`} cellwidth={15}>
+        <PersonCell
+          id={`index-personId-${person.personId}`}
+          cellwidth={15}
+        >
           <GraySpan>
             {rowNumberForDisplay}
           </GraySpan>
@@ -75,17 +78,15 @@ const PersonSummaryRow = ({ person, rowNumberForDisplay, teamId }) => {
       </PersonCell>
       <PersonCell
         id={`location-personId-${person.personId}`}
-        smallfont="true" // $smallfont gets rid of error message, but doesn't get passed to PersonCell styled div
-        // cellwidth="300"
         cellwidth={300}
+        $smallfont             // Fixed: $smallfont gets rid of error message, but doesn't get passed to PersonCell styled div
       >
         {person.location}
       </PersonCell>
       <PersonCell
         id={`jobTitle-personId-${person.personId}`}
-        smallestfont="true" // $smallestfont gets rid of error message, but doesn't get passed to PersonCell styled div
-        // cellwidth="225"
         cellwidth={225}
+        $smallestfont     // Fixed: $smallestfont gets rid of error message, but doesn't get passed to PersonCell styled div
       >
         {person.jobTitle}
       </PersonCell>
@@ -163,19 +164,27 @@ const OnePersonWrapper = styled('div')`
   justify-content: flex-start;
 `;
 
-const PersonCell = styled('div', {
-  shouldForwardProp: (prop) => !['smallfont', 'smallestfont', 'cellwidth'].includes(prop),
-})(({ smallfont, smallestfont, cellwidth }) => (`
+const fontSz = (smallfont, smallestfont) => {
+  if (smallfont && !smallestfont) {
+    return '.9em;';
+  } else if (smallestfont && !smallfont) {
+    return '.8em;';
+  }
+  return ';';
+};
+// ${(smallfont && !smallestfont) ? 'font-size: .9em;' : ''}
+// ${(smallestfont && !smallfont) ? 'font-size: .8em;' : ''}
+
+const PersonCell = styled.div`
   align-content: center;
   border-bottom: 1px solid #ccc;
-  ${(smallfont && !smallestfont) ? 'font-size: .9em;' : ''}
-  ${(smallestfont && !smallfont) ? 'font-size: .8em;' : ''}
+  font-size: ${(props) => (fontSz(props?.$smallfont, props?.$smallestfont))}
   height: 22px;
-  ${cellwidth ? `max-width: ${cellwidth}px;` : ''}
-  ${cellwidth ? `min-width: ${cellwidth}px;` : ''}
+  min-width: ${(props) => (props.cellwidth ? `${props.cellwidth}px;` : ';')};
+  max-width: ${(props) => (props.cellwidth ? `${props.cellwidth}px;` : ';;')};
+  width: ${(props) => (props.cellwidth ? `${props.cellwidth}px;` : ';')};
   overflow: hidden;
   white-space: nowrap;
-  ${cellwidth ? `width: ${cellwidth}px;` : ''}
-`));
+`;
 
 export default withStyles(styles)(PersonSummaryRow);
diff --git a/src/js/components/PrivateRoute.jsx b/src/js/components/PrivateRoute.jsx
index 9cc1940..fea29f6 100644
--- a/src/js/components/PrivateRoute.jsx
+++ b/src/js/components/PrivateRoute.jsx
@@ -1,15 +1,33 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Navigate, Outlet, useLocation } from 'react-router';
 import { authLog } from '../common/utils/logging';
 import { useConnectAppContext } from '../contexts/ConnectAppContext';
+import { METHOD, useFetchData } from '../react-query/WeConnectQuery';
 
 const PrivateRoute = () => {
-  const { getAppContextValue } = useConnectAppContext();
-  const isAuthenticated = getAppContextValue('isAuthenticated');
-  authLog('========= PrivateRoute =========== isAuthenticated: ', isAuthenticated);
   const location = useLocation();
+  const { getAppContextValue } = useConnectAppContext();
+
+  const [isAuthenticated, setIsAuthenticated] = useState(null);
+
+  const { data: dataAuth, isSuccess: isSuccessAuth } = useFetchData(['get-auth'], {}, METHOD.POST);
+  useEffect(() => {
+    if (isSuccessAuth) {
+      console.log('useFetchData in PrivateRoute useEffect dataAuth good:', dataAuth, isSuccessAuth);
+      setIsAuthenticated(dataAuth.isAuthenticated);
+      authLog('========= PrivateRoute =========== INNER isAuthenticated: ', dataAuth.isAuthenticated);
+    }
+  }, [dataAuth, isSuccessAuth]);
+
+  const isAuth = getAppContextValue('isAuthenticated');
+
+  authLog('========= PrivateRoute =========== OUTER isAuthenticated: ', isAuthenticated, ', isAuth: ', isAuth);
 
-  return isAuthenticated ? <Outlet /> : <Navigate to="/login" state={{ from: location }} replace />;
+  if (isAuthenticated || isAuth || isAuthenticated !== false) {
+    return <Outlet />;
+  } else {
+    return <Navigate to="/login" state={{ from: location }} replace />;
+  }
 };
 
 export default PrivateRoute;
diff --git a/src/js/components/VerifySecretCodeModal.jsx b/src/js/components/VerifySecretCodeModal.jsx
new file mode 100644
index 0000000..ed133be
--- /dev/null
+++ b/src/js/components/VerifySecretCodeModal.jsx
@@ -0,0 +1,362 @@
+import { Button, Dialog, Modal, OutlinedInput } from '@mui/material';
+import withStyles from '@mui/styles/withStyles';
+import withTheme from '@mui/styles/withTheme';
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import React, { useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+import { isIPhone4in } from '../common/utils/cordovaUtils';
+import { isCordova, isWebApp } from '../common/utils/isCordovaOrWebApp';
+import { renderLog } from '../common/utils/logging';
+import { useConnectAppContext } from '../contexts/ConnectAppContext';
+import { useGetAuthMutation } from '../react-query/mutations';
+import weConnectQueryFn, { METHOD } from '../react-query/WeConnectQuery';
+
+const VerifySecretCodeModal = ({ classes, person, openVerifyModalDialog }) => {
+  renderLog('VerifySecretCodeModal');
+  const { mutate: mutateAuth } = useGetAuthMutation();
+  const { getAppContextValue } = useConnectAppContext();
+
+  const d1FldRef = useRef('');
+  const d2FldRef = useRef('');
+  const d3FldRef = useRef('');
+  const d4FldRef = useRef('');
+  const d5FldRef = useRef('');
+  const d6FldRef = useRef('');
+  const buttonRef = useRef();
+
+  const [nextFocus, setNextFocus] = useState(1);
+  const [condensed] = useState(true);
+  const [voterPhoneNumber] = useState(undefined);
+  const [voterEmailAddress] = useState(true);
+  const [openDialog, setOpenDialog] = useState(true);
+
+  const digits = [[1, 'd1Id', d1FldRef], [2, 'd2Id', d2FldRef], [3, 'd3Id', d3FldRef], [4, 'd4Id', d4FldRef], [5, 'd5Id', d5FldRef], [6, 'd6Id', d6FldRef]];
+
+  useEffect(() => {
+    setOpenDialog(openVerifyModalDialog);
+  }, [openVerifyModalDialog]);
+
+  const handleClose = () => {
+    console.log('handleClose pressed');
+    setOpenDialog(false);
+  };
+
+  const voterVerifySecretCode = async () => {
+    console.log('voterVerifySecretCode pressed');
+    let code = '';
+    for (let i = 0; i < digits.length; i++) {
+      const digit = digits[i];
+      const refDigit = digit[2];
+      code += refDigit.current.value.toString();
+    }
+
+    const newPersonId = getAppContextValue('authenticatedPersonId');
+    const data = await weConnectQueryFn('verify-email-code', { personId: newPersonId, code }, METHOD.POST);
+    console.log(`/verify-email-code response: data: ${JSON.stringify(data)}`);
+    await mutateAuth();  // to propagate the invalidation to HeaderBar and Login (might be a better way to do this)
+    setOpenDialog(false);
+  };
+
+  useEffect(() => {
+    while (d1FldRef?.current) {
+      setTimeout(() => {
+        // See https://github.com/mui/material-ui/issues/33004#issuecomment-1455260156
+        d1FldRef.current?.focus();
+      }, 50);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (nextFocus <= 6) {
+      // eslint-disable-next-line no-unused-vars
+      const [index, id, refNext] = digits.find((dig) => dig[0] === nextFocus);
+      if (refNext && refNext.current) {
+        setTimeout(() => {
+          // See https://github.com/mui/material-ui/issues/33004#issuecomment-1455260156
+          refNext.current.focus();
+        }, 50);
+      }
+    }
+  }, [nextFocus]);
+
+  const onPaste = (event) => {
+    // console.log(ev.clipboardData.getData('Text'));
+    const clipboardData = event.clipboardData || window.clipboardData;
+    const pastedData = clipboardData.getData('text').trim();
+    console.log(pastedData);
+
+    for (let i = 0; i < pastedData.length; i++) {
+      const digit = digits[i];
+      const refDigit = digit[2];
+      refDigit.current.value = pastedData[i];
+    }
+
+    if (pastedData.length === 6) {
+      buttonRef.current.focus();
+    }
+  };
+
+
+
+  const onDigitChange = (event) => {
+    // eslint-disable-next-line no-unused-vars
+    const [index, id, refThis] = digits.find((dig) => dig[1] === event.target.id);
+    const ch = refThis.current.value[0];
+    if (ch && Number.isNaN(ch - '0')) {
+      refThis.current.value = '';
+    } else {
+      refThis.current.blur();
+      setNextFocus(index + 1);
+    }
+
+    console.log(event);
+  };
+
+  if (!(openDialog)) {
+    return null;
+  }
+
+  return (
+    <Modal
+      open={openDialog}
+      // onClose={handleClose}
+      aria-labelledby="parent-modal-title"
+      aria-describedby="parent-modal-description"
+    >
+      <Dialog
+        id="codeVerificationDialog"
+        open={openDialog}
+        // onClose={handleClose}
+        className="u-z-index-9030"
+        classes={{
+          paper: clsx(classes.dialogPaper, {
+            [classes.codeVerifyCordova]: isCordova(),
+          }),
+          root: classes.dialogRoot,
+        }}
+      >
+        <ModalTitleArea $condensed={condensed}>
+          <Button onClick={handleClose} id="emailVerificationBackButton">
+            [X]
+          </Button>
+        </ModalTitleArea>
+        <ModalContent $condensed={condensed} style={{ padding: `${isWebApp() ? 'undefined' : '37px 0 2px 0'}` }}>
+          <TextContainer>
+            <Title $condensed={condensed}>Code Verification</Title>
+            <Subtitle>A 6-digit code has been sent to</Subtitle>
+            <PhoneSubtitle>{person?.email}</PhoneSubtitle>
+
+            {(voterEmailAddress) ? (
+              <Subtitle>If you haven&apos;t received the code in 30 seconds, please check your spam folder and mark the email as &apos;Not Spam&apos;.</Subtitle>
+            ) : (
+              <>
+                {(voterPhoneNumber) && (
+                  <Subtitle>If you haven&apos;t received the code within 30 seconds, please verify the number you entered.</Subtitle>
+                )}
+              </>
+            )}
+            <InputContainer>
+              {digits.map((dig) => (
+                <OutlinedInput
+                  classes={{ root: classes.inputBase, input: classes.input }}
+                  id={dig[1]}
+                  inputProps={{ maxLength: 1 }}
+                  inputRef={dig[2]}
+                  key={dig[1]}
+                  label={false}
+                  notched={false}
+                  onChange={onDigitChange}
+                  type="tel"
+                  autoFocus={dig[0] === 0}
+                  // onFocus="this.select()"
+                  // maxLength={1}
+                  // value={this.state.digit1}
+                  // onBlur={this.handleBlur}
+                  onPaste={onPaste}
+                />
+              ))}
+            </InputContainer>
+          </TextContainer>
+          <ButtonsContainer $condensed={condensed}>
+            <Button
+              classes={{ root: classes.verifyButton }}
+              id="emailVerifyButton"
+              color="primary"
+              ref={buttonRef}
+              // disabled={this.state.digit1 === '' || this.state.digit2 === '' || this.state.digit3 === '' || this.state.digit4 === '' || this.state.digit5 === '' || this.state.digit6 === '' || voterMustRequestNewCode || voterSecretCodeRequestsLocked || voterVerifySecretCodeSubmitted}
+              fullWidth
+              onClick={voterVerifySecretCode}
+              variant="contained"
+            >
+              Verify
+              {/* {voterVerifySecretCodeSubmitted ? 'Verifying...' : 'Verify'} */}
+            </Button>
+          </ButtonsContainer>
+        </ModalContent>
+      </Dialog>
+    </Modal>
+  );
+};
+VerifySecretCodeModal.propTypes = {
+  classes: PropTypes.object,
+  person: PropTypes.object,
+  openVerifyModalDialog: PropTypes.bool,
+};
+
+const styles = (theme) => ({
+  dialogPaper: {
+    marginTop: 48, // hasIPhoneNotch() ? 68 : 48,
+    [theme.breakpoints.up('sm')]: {
+      maxWidth: '720px',
+      width: '85%',
+      minHeight: '90%',
+      maxHeight: '90%',
+      height: '90%',
+      margin: '0 auto',
+    },
+    [theme.breakpoints.down('sm')]: {
+      minWidth: '95%',
+      maxWidth: '95%',
+      width: '95%',
+      minHeight: '90%',
+      maxHeight: '90%',
+      height: '90%',
+      margin: '0 auto',
+    },
+  },
+  dialogRoot: {
+    zIndex: '9030 !important',
+  },
+  codeVerifyCordova: {
+    // top: '9%', Removed 12/13/23 to reduce vertical vibration on digit entry field advance
+    bottom: 'unset',
+    height: 'unset',
+    minHeight: 'unset',
+    margin: '5px',
+  },
+  inputBase: {
+    alignContent: 'center',
+    display: 'flex',
+    // flex: '0 0 1',
+    justifyContent: 'center',
+    margin: '0 4px',
+    // maintain aspect ratio
+    width: '10vw',
+    height: '10vw',
+    maxWidth: 53,
+    maxHeight: 53,
+    fontSize: 22,
+    '@media(min-width: 569px)': {
+      margin: '0 8px',
+      fontSize: 35,
+    },
+    '&:first-child': {
+      marginLeft: 0,
+    },
+    '&:last-child': {
+      marginRight: 0,
+    },
+    background: '#f7f7f7',
+  },
+  input: {
+    textAlign: 'center',
+    padding: '8px 0',
+
+  },
+  button: {
+    width: '100%',
+    border: '1px solid #ddd',
+    fontWeight: 'bold',
+    margin: '6px 0',
+  },
+  verifyButton: {
+    textAlign: 'center',
+    margin: '25px 0',
+    width: 200,
+  },
+});
+
+const InputContainer = styled('div', {
+  shouldForwardProp: (prop) => !['condensed'].includes(prop),
+})(({ condensed }) => (`
+  display: flex;
+  justify-content: space-between;
+  margin: auto;
+  width: 100%;
+  margin-top: ${condensed ? '16px' : '32px'};
+`));
+
+const ModalTitleArea = styled('div', {
+  shouldForwardProp: (prop) => !['condensed'].includes(prop),
+})(({ condensed }) => (`
+  width: 100%;
+  padding: ${condensed ? '8px' : '12px'};
+  box-shadow: 0 20px 40px -25px #999;
+  z-index: 999;
+  display: flex;
+  justify-content: flex-start;
+  position: absolute;
+  top: 0;
+`));
+
+const ModalContent = styled('div', {
+  shouldForwardProp: (prop) => !['condensed'].includes(prop),
+})(({ condensed }) => (`
+  display: flex;
+  flex-direction: column;
+  align-items: ${condensed ? 'flex-start' : 'space-evenly'};
+  height: ${isWebApp() ?  '100%' : 'unset'};
+  width: 80%;
+  max-width: 400px;
+  margin: 0 auto;
+  padding: ${condensed ? '66px 0 0 0' : '86px 0 72px 0'};
+`));
+
+const TextContainer = styled('div')`
+`;
+
+const ButtonsContainer = styled('div', {
+  shouldForwardProp: (prop) => !['condensed'].includes(prop),
+})(({ condensed }) => (`
+  margin-top: ${condensed ? '32px' : 'auto'};
+  display: flex;
+  display: flex;
+  justify-content: center;
+  width: 100%
+`));
+
+const Title = styled('h3', {
+  shouldForwardProp: (prop) => !['condensed'].includes(prop),
+})(({ condensed }) => (`
+  font-weight: bold;
+  font-size: ${() => (isIPhone4in() ? '26px' : '30px')};
+  padding: 0 10px;
+  margin-bottom: ${condensed ? '16px' : '36px'};
+  color: black;
+  text-align: center;
+  @media(min-width: 569px) {
+    font-size: 36px;
+  }
+`));
+
+const Subtitle = styled('h4')`
+  color: #424242;
+  text-align: center;
+`;
+
+const PhoneSubtitle = styled('h4')`
+  color: black;
+  font-weight: bold;
+  text-align: center;
+`;
+
+// const ErrorMessage = styled('div')`
+//   color: red;
+//   margin: 12px 0;
+//   text-align: center;
+//   font-size: 14px;
+// `;
+
+
+export default withTheme(withStyles(styles)(VerifySecretCodeModal));
diff --git a/src/js/contexts/ConnectAppContext.jsx b/src/js/contexts/ConnectAppContext.jsx
index b18042f..5d1b700 100644
--- a/src/js/contexts/ConnectAppContext.jsx
+++ b/src/js/contexts/ConnectAppContext.jsx
@@ -51,7 +51,12 @@ export const ConnectAppContextProvider = ({ children }) => {
 
   const getAppContextData = () => data;
 
-  const getAppContextValue = (key) => data[key];
+  const getAppContextValue = (key) => {
+    if (key in data) {
+      return data[key];
+    }
+    return null;   // requesting the value for a key that was never set
+  };
 
   const setAppContextValuesInBulk = (variableDict) => {
     const keysIn = Object.keys(variableDict);
@@ -99,11 +104,12 @@ export const ConnectAppContextProvider = ({ children }) => {
   useEffect(() => {
     if (isSuccessAuth) {
       console.log('useFetchData in ConnectAppContext useEffect dataAuth good:', dataAuth, isSuccessAuth, isFetchingAuth);
-      const isAuthenticated = dataAuth ? dataAuth.userId : false;
+      const { isAuthenticated } = dataAuth;
       setAppContextValue('isAuthenticated', isAuthenticated);
-      setAppContextValue('authenticatedUserId', dataAuth.userId || -1);  // TODO API should return this
+      setAppContextValue('authenticatedPersonId', dataAuth.personId);
+      setAppContextValue('authenticatedPerson', dataAuth.person);
 
-      console.log('======================================== isAuthenticated: "  ', isAuthenticated, ' =============================');
+      console.log('=============== ConnectAppContextProvider ======= isAuthenticated: ', isAuthenticated, ' ===========');
     }
   }, [dataAuth, isSuccessAuth]);
 
diff --git a/src/js/pages/Login.jsx b/src/js/pages/Login.jsx
index e0d3042..96828f2 100644
--- a/src/js/pages/Login.jsx
+++ b/src/js/pages/Login.jsx
@@ -1,7 +1,7 @@
 import { Button, TextField } from '@mui/material';
 import { withStyles } from '@mui/styles';
 import PropTypes from 'prop-types';
-import React, { useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Helmet } from 'react-helmet-async';
 import { useNavigate } from 'react-router';
 import styled from 'styled-components';
@@ -9,13 +9,21 @@ import validator from 'validator';
 import { renderLog } from '../common/utils/logging';
 import compileDate from '../compileDate';
 import { PageContentContainer } from '../components/Style/pageLayoutStyles';
+import VerifySecretCodeModal from '../components/VerifySecretCodeModal';
 import webAppConfig from '../config';
 import { useConnectAppContext } from '../contexts/ConnectAppContext';
-import weConnectQueryFn, { METHOD } from '../react-query/WeConnectQuery';
+import { getFullNamePreferredPerson } from '../models/PersonModel';
+import { useGetAuthMutation, useLogoutMutation } from '../react-query/mutations';
+import weConnectQueryFn, { METHOD, useFetchData } from '../react-query/WeConnectQuery';
+import ReactQuerySaveReadTest from '../test/ReactQuerySaveReadTest';
 
 
 const Login = ({ classes }) => {
-  const { setAppContextValue, getAppContextValue } = useConnectAppContext();
+  renderLog('Login');  // Set LOG_RENDER_EVENTS to log all renders
+  const navigate = useNavigate();
+  const { setAppContextValue } = useConnectAppContext();
+  const { mutate: mutateLogout } = useLogoutMutation();
+  const { mutate: mutateAuth } = useGetAuthMutation();
 
   const firstNameFldRef = useRef('');
   const lastNameFldRef = useRef('');
@@ -26,13 +34,33 @@ const Login = ({ classes }) => {
   // const stateFldRef = useRef('');
   const passwordFldRef = useRef('');
   const confirmPasswordFldRef = useRef('');
+
   const [showCreateStuff, setShowCreateStuff] = useState(false);
   const [warningLine, setWarningLine] = useState('');
-  const initialSuccess = getAppContextValue('isAuthenticated') ? `Signed in as ${getAppContextValue('authenticatedPerson')}` : 'Please sign in';
-  const [successLine, setSuccessLine] = useState(initialSuccess);
-  const navigate = useNavigate();
+  const [successLine, setSuccessLine] = useState('');
+  const [authPerson, setAuthPerson] = useState({});
+  // eslint-disable-next-line no-unused-vars
+  const [isAuth, setIsAuth] = useState(false);
+  const [openVerifyModalDialog, setOpenVerifyModalDialog] = useState(false);
 
-  renderLog('Login');  // Set LOG_RENDER_EVENTS to log all renders
+  const { data: dataAuth, isSuccess: isSuccessAuth, isFetching: isFetchingAuth } = useFetchData(['get-auth'], {}, METHOD.POST);
+  useEffect(() => {
+    if (isSuccessAuth) {
+      console.log('useFetchData in Login useEffect dataAuth good:', dataAuth, isSuccessAuth, isFetchingAuth);
+
+      const { isAuthenticated } = dataAuth;
+      setIsAuth(isAuthenticated);
+      const authenticatedPerson = dataAuth.person;
+      setAuthPerson(authenticatedPerson);
+      const success = isAuthenticated && authenticatedPerson ? `Signed in as ${getFullNamePreferredPerson(authenticatedPerson)}` : 'Please sign in';
+      setSuccessLine(success);
+      // if (isAuthenticated) {
+      //   setTimeout(() => {
+      //     navigate('/tasks');
+      //   }, 2000);
+      // }
+    }
+  }, [dataAuth, isSuccessAuth]);
 
   const loginApi = async (email, password) => {
     if (!validator.isEmail(email)) {
@@ -46,13 +74,17 @@ const Login = ({ classes }) => {
 
     const data = await weConnectQueryFn('login', { email, password }, METHOD.POST);
     console.log(`/login response -- status: '${'status'}',  data: ${JSON.stringify(data)}`);
-    if (data.userId > 0) {
+    if (data.personId > 0) {
       setWarningLine('');
-      setSuccessLine(`Cheers person #${data.userId}!  You are signed in!`);
+      setSuccessLine(`Cheers person #${data.personId}!  You are signed in!`);
       setAppContextValue('isAuthenticated', true);
-      setAppContextValue('authenticatedUserId', data.userId);
+      setAppContextValue('authenticatedPersonId', data.personId);
+      if (!data.emailVerified) {
+        setOpenVerifyModalDialog(true);
+      }
+      mutateAuth();  // to propagate the invalidation to HeaderBar (might be a better way to do this)
     } else {
-      setWarningLine(data.errors.msg);
+      setWarningLine(data.error.msg);
       setSuccessLine('');
     }
   };
@@ -66,9 +98,18 @@ const Login = ({ classes }) => {
     } else {
       setWarningLine('');
       setSuccessLine('You are signed out');
-      setAppContextValue('isAuthenticated', false);
-      setAppContextValue('isAuthenticatedId', -1);
+      mutateLogout();
+    }
+  };
+
+  const verifyYourEmail = async (personId) => {
+    console.log('verifyYourEmail ----------------');
+    if (!personId || personId < 1) {
+      console.error('Invalid personId found in verifyYourEmail');
     }
+    console.error('TESTING personId found in verifyYourEmail');
+    const data = await weConnectQueryFn('send-email-code', { personId }, METHOD.POST);
+    console.log(`/send-email-code response: data: ${JSON.stringify(data)}`);
   };
 
   const signupApi = async (firstName, lastName, location, emailPersonal, emailOfficial, password, confirmPassword) => {
@@ -83,9 +124,14 @@ const Login = ({ classes }) => {
       }
       setWarningLine(errStr);
       if (data.personCreated) {
-        setSuccessLine(`user # ${data.userId} created, and signedIn is ${data.signedIn}`);
-        setAppContextValue('isAuthenticated', true);
-        setAppContextValue('authenticatedUserId', data.userId);
+        setSuccessLine(`user # ${data.personId} created`);
+        // setAppContextValue('isAuthenticated', true);
+        setAppContextValue('authenticatedPersonId', data.personId);
+        verifyYourEmail(data.personId).then(() => {
+          setSuccessLine('A verification email has been sent to your address');
+          console.log('verifyYourEmail in signupApi then clause , setOpenVerifyModalDialog true');
+          setOpenVerifyModalDialog(true);
+        });
       }
     } catch (e) {
       console.log('signup error', e);
@@ -101,12 +147,14 @@ const Login = ({ classes }) => {
       setWarningLine('Enter a valid username and password');
     } else {
       setWarningLine('');
-      loginApi(email, password);
+      setAppContextValue('personIsSignedIn', true);
+      loginApi(email, password).then();
     }
   };
 
   const signOutPressed = () => {
-    logoutApi();
+    setAppContextValue('personIsSignedIn', false);
+    logoutApi().then();
   };
 
   const createPressed = () => {
@@ -141,13 +189,8 @@ const Login = ({ classes }) => {
     }
   };
 
-  const verifyYourEmail = async () => {
-    // const personId = 1; // TODO HACK
-    const data = await weConnectQueryFn('send-email-code', { personId: 1 }, METHOD.POST);
-    console.log(`/send-email-code response: data: ${JSON.stringify(data)}`);
-  };
-
 
+  // console.log(getAppContextData());
   return (
     <div>
       <Helmet>
@@ -239,11 +282,10 @@ const Login = ({ classes }) => {
               color="primary"
               variant="contained"
               onClick={showCreateStuff ? createPressed : loginPressed}
-              sx={{ paddingBottom: '15px', display: showCreateStuff ? 'none' : 'flex'  }}
+              sx={{ marginBottom: '15px', display: showCreateStuff ? 'none' : 'flex'  }}
             >
               Sign In
             </Button>
-            <button type="button" onClick={verifyYourEmail} style={{ display: showCreateStuff ? 'none' : 'flex'  }}>Verify your email (temporary)</button>
             <A style={{ display: showCreateStuff ? 'none' : 'flex'  }}>Forgot your password?</A>
           </span>
           <div style={{ paddingTop: '35px' }} />
@@ -256,15 +298,6 @@ const Login = ({ classes }) => {
             {showCreateStuff ? 'Save New Account' : 'Create Account'}
           </Button>
           <div style={{ paddingTop: '35px' }} />
-          <Button
-            classes={{ root: classes.buttonDesktop }}
-            color="primary"
-            variant="contained"
-            // onClick={() => historyPush('/faq')}
-            onClick={() => navigate('/faq')}
-          >
-            FAQ (Requires Authentication)
-          </Button>
           <div style={{ paddingTop: '35px' }} />
           <Button
             classes={{ root: classes.buttonDesktop }}
@@ -278,7 +311,19 @@ const Login = ({ classes }) => {
             <div>Compile Date:</div>
             <div style={{ paddingLeft: 10 }}>{compileDate}</div>
           </DateDisplay>
+          <Button
+            classes={{ root: classes.buttonDesktop }}
+            color="primary"
+            variant="contained"
+            onClick={() => navigate('/faq')}
+
+          >
+            FAQ (Requires Authentication) (This is a test button, that can be removed)
+          </Button>
         </div>
+        <VerifySecretCodeModal person={authPerson} openVerifyModalDialog={openVerifyModalDialog} />
+        {/* This following test can be deleted or converted to an automated test */}
+        <ReactQuerySaveReadTest personId="1" />
       </PageContentContainer>
     </div>
   );
@@ -308,7 +353,7 @@ const A = styled('a')`
 `;
 
 const DateDisplay = styled('div')`
-  padding-top: 50px; 
+  padding: 50px 0 50px 0; 
 `;
 
 export default withStyles(styles)(Login);
diff --git a/src/js/pages/Teams.jsx b/src/js/pages/Teams.jsx
index a85cc25..d5c3aae 100644
--- a/src/js/pages/Teams.jsx
+++ b/src/js/pages/Teams.jsx
@@ -40,30 +40,6 @@ const Teams = ({ classes, match }) => {
   }, [personListRetrieveResults, allPeopleCache, dispatch]);
 
   const teamListRetrieveResults = useFetchData(['team-list-retrieve'], {}, METHOD.GET);
-  // ///////////////////////////////////////////////////////
-  // Steve's approach to use data directly from react-query
-  // Requires using data directly from the specific API
-  // Has the problem that we had discussed refactoring team-list-retrieve to not include person data,
-  // so that team.teamMemberList would only include the personIds of team members, and not have the
-  // teamMemberList data when we render <TeamMemberList below
-  // const { data: dataTLR, isSuccess: isSuccessTLR, isFetching: isFetchingTLR } = teamListRetrieveResults;
-  // useEffect(() => {
-  //   // console.log('useFetchData team-list-retrieve in Teams useEffect:', dataTLR, isSuccessTLR, isFetchingTLR);
-  //   // console.log('effect of useFetchData in Teams useEffect:', dataTLR, isSuccessTLR, isFetchingTLR);
-  //   if (dataTLR !== undefined && isFetchingTLR === false) {
-  //     console.log('effect of useFetchData in Teams useEffect dataTLR is good:', dataTLR, isSuccessTLR, isFetchingTLR);
-  //     console.log('Successfully retrieved teams in Teams.jsx from dataTLR ...');
-  //     const teamListTemp = dataTLR.teamList;
-  //     setShowAllTeamMembers(true);
-  //     // Do it both ways
-  //     setTeamList(teamListTemp);
-  //     setAppContextValue('teamListNested', teamListTemp);
-  //     captureTeamListRetrieveData({ data: { teamList: teamListTemp }, isSuccess: isSuccessTLR }, apiDataCache, dispatch);
-  //   } else {
-  //     console.log('effect of useFetchData in Teams useEffect NO GO:', dataTLR, isSuccessTLR, isFetchingTLR);
-  //   }
-  // }, [dataTLR, isSuccessTLR]);
-
   // ////////////////////////////////////////////
   // Dale's approach to use organize incoming data and then use that data from apiDataCache
   // Allows us to organize incoming data independent of the specific API, potentially from multiple API or sources
@@ -146,7 +122,7 @@ const Teams = ({ classes, match }) => {
         </Button>
         <div style={{ padding: '100px 0 50px 0', fontWeight: '700' }}>
           <Link to="/login">
-            Sign in
+            Jump to the &quot;Sign in&quot; /login page (Temporary Link)
           </Link>
         </div>
       </PageContentContainer>
diff --git a/src/js/react-query/WeConnectQuery.js b/src/js/react-query/WeConnectQuery.js
index 93dce75..90792a1 100644
--- a/src/js/react-query/WeConnectQuery.js
+++ b/src/js/react-query/WeConnectQuery.js
@@ -16,10 +16,13 @@ const weConnectQueryFn = async (queryKey, params, isGet) => {
   if (isGet) {
     url.search = new URLSearchParams(params);
   }
-  // console.log(`weConnectQueryFn ${isGet ? 'GET' : 'POST'} url.href: ${url.href}`);
+  // 2/12/24 temporarily replaced:  httpLog(`weConnectQueryFn ${isGet ? 'GET' : 'POST'} url.href: ${url.href}`); // DO NOT REMOVE, this is the only way to see if we are hitting the API server unnecessarily
+  console.log(`weConnectQueryFn ${isGet ? 'GET' : 'POST'} url.href: ${url.href}`);
 
-  const response = isGet ? await axios.get(url.href) : await axios.post(url.href, params);
-  // console.log('weConnectQueryFn  response.data: ', JSON.stringify(response.data));
+  const response = isGet ?
+    await axios.get(url.href,  { withCredentials: true }) :
+    await axios.post(url.href, params, { withCredentials: true });
+  // if needed:  httpLog('weConnectQueryFn  response.data: ', JSON.stringify(response.data));
 
   return response.data;
 };
@@ -37,6 +40,5 @@ const useFetchData = (queryKey, fetchParams, isGet) => {
   return { data, isSuccess, isFetching, isStale, refetch };
 };
 
-
 export default weConnectQueryFn;
 export { useFetchData, METHOD };
diff --git a/src/js/react-query/mutations.jsx b/src/js/react-query/mutations.jsx
index 0068c6d..227de9c 100644
--- a/src/js/react-query/mutations.jsx
+++ b/src/js/react-query/mutations.jsx
@@ -79,7 +79,7 @@ const useGroupSaveMutation = () => {
   });
 };
 
-// Moved to /models/PersonModel.jsx
+// Moved to /models/PersonModel.jsx with a non-conflicting function name
 const usePersonSaveMutation = () => {
   const queryClient = useQueryClient();
 
@@ -100,9 +100,27 @@ const useSaveTaskMutation = () => {
   });
 };
 
+const useLogoutMutation = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: () => weConnectQueryFn('logout', {}, METHOD.POST),
+    onError: (error) => console.log('error in useLogoutMutation: ', error),
+    onSuccess: () => queryClient.invalidateQueries('get-auth'),
+  });
+};
+
+const useGetAuthMutation = () => {
+  console.log('entry to useGetAuthMutation');
+  return useMutation({
+    mutationFn: () => weConnectQueryFn('get-auth', {}, METHOD.POST),
+    onError: (error) => console.log('error in useGetAuthMutation: ', error),
+    onSuccess: () => console.log('useGetAuthMutation called to force refresh'),
+  });
+};
 
 
 export { useRemoveTeamMutation, useRemoveTeamMemberMutation, useAddPersonToTeamMutation,
   useQuestionnaireSaveMutation, useTaskDefinitionSaveMutation, useGroupSaveMutation,
-  useQuestionSaveMutation, usePersonSaveMutation, useSaveTaskMutation, useAnswerListSaveMutation };
+  useQuestionSaveMutation, usePersonSaveMutation, useSaveTaskMutation, useAnswerListSaveMutation,
+  useLogoutMutation, useGetAuthMutation };
 
diff --git a/src/js/test/ReactQuerySaveReadTest.jsx b/src/js/test/ReactQuerySaveReadTest.jsx
new file mode 100644
index 0000000..ab526f7
--- /dev/null
+++ b/src/js/test/ReactQuerySaveReadTest.jsx
@@ -0,0 +1,110 @@
+import { Button } from '@mui/material';
+import React, { useEffect, useState } from 'react';
+import { renderLog } from '../common/utils/logging';
+import makeRequestParams from '../react-query/makeRequestParams';
+import { usePersonSaveMutation } from '../react-query/mutations';
+import { METHOD, useFetchData } from '../react-query/WeConnectQuery';
+
+const ReactQuerySaveReadTest = (personId) => {
+  renderLog('ReactQuerySaveReadTest');
+  const { mutate } = usePersonSaveMutation();
+  const [personFromAPI, setPersonFromAPI] = useState(undefined);
+  const [personSentToMutation, setPersonSentToMutation] = useState(undefined);
+  const [misses, setMisses] = useState(0);
+  const [matches, setMatches] = useState(0);
+  const [loop, setLoop] = useState(-1);
+  const [startTest, setStartTest] = useState(false);
+  const [testButtonEnabled, setTestButtonEnabled] = useState(true);
+
+  const updatePersonViaMutation = (person) => {
+    const personMutable = structuredClone(person);
+    if (!personMutable.firstNamePreferred || personMutable.firstNamePreferred === 'NaN') {
+      personMutable.firstNamePreferred = '0';
+    }
+    personMutable.firstNamePreferred = (parseInt(person?.firstNamePreferred) + 1).toString();
+    setPersonSentToMutation(structuredClone(personMutable));  // Save off the sent value
+    mutate(makeRequestParams({ personId: personMutable.id }, { firstNamePreferred: personMutable.firstNamePreferred }));
+  };
+
+  const personListRetrieveResults = useFetchData(['person-list-retrieve'], {}, METHOD.GET);
+  const { data: dataP, isSuccess: isSuccessP } = personListRetrieveResults;
+  useEffect(() => {
+    // console.log('useFetchData person-list-retrieve in Teams useEffect:', personListRetrieveResults);
+    if (dataP && isSuccessP && startTest) {
+      const personListFromAPI = Object.values(dataP.personList);
+      const personFromAPITemp = personListFromAPI.find((per) => per.personId === parseInt(personId.personId));
+      setPersonFromAPI(structuredClone(personFromAPITemp));
+      // Do the compare
+      if (personFromAPITemp && personSentToMutation) {
+        const response = personFromAPITemp.firstNamePreferred;
+        const mutationValue = personSentToMutation.firstNamePreferred;
+        // console.log('sent: ', personSentToMutation);
+        // console.log('received: ', personFromAPITemp);
+        if (response !== mutationValue) {
+          console.log('ERROR: mutation vs response mismatch person from API: ', personFromAPITemp.firstNamePreferred, ', person sent to mutation: ', personSentToMutation.firstNamePerferred);
+          setMisses(misses + 1);
+        } else {
+          setMatches(matches + 1);
+        }
+      }
+      setLoop(loop + 1);
+      if (personFromAPITemp && loop < 499) {
+        updatePersonViaMutation(personFromAPITemp);
+      } else if (personFromAPITemp && loop >= 499) {
+        setTestButtonEnabled(false);
+      }
+    }
+  }, [dataP, isSuccessP]);
+
+  const onClickTest = () => {
+    setStartTest(true);
+    mutate(makeRequestParams({ personId: 1 }, { firstNamePreferred: 0 }));
+  };
+
+  return (
+    <div style={{ margin: 80, padding: 20, backgroundColor: 'rgb(233,239,248, 0.5)' }}>
+      <Button
+        color="primary"
+        variant="contained"
+        onClick={onClickTest}
+        disabled={!testButtonEnabled}
+      >
+        Do 500 Mutations and compare the received results
+      </Button>
+      {startTest ? (
+        <table style={{ paddingTop: 20 }}>
+          <tbody>
+            <tr>
+              <td style={{ paddingRight: 20, fontWeight: 700 }}>Mutating firstNamePreferred of person #{personId.personId}</td>
+            </tr>
+            <tr>
+              <td style={{ paddingRight: 20 }}>updated person sent to mutation:</td>
+              <td>{personSentToMutation?.firstName}</td>
+              <td>{personSentToMutation?.firstNamePreferred}</td>
+              <td>{personSentToMutation?.lastName}</td>
+            </tr>
+            <tr>
+              <td>person received from API:</td>
+              <td>{personFromAPI?.firstName}</td>
+              <td>{personFromAPI?.firstNamePreferred}</td>
+              <td>{personFromAPI?.lastName}</td>
+            </tr>
+            <tr>
+              <td>loop:</td>
+              <td>{loop}</td>
+            </tr>
+            <tr>
+              <td>matches:</td>
+              <td>{matches}</td>
+            </tr>
+            <tr>
+              <td>errors:</td>
+              <td>{misses}</td>
+            </tr>
+          </tbody>
+        </table>
+      ) : (' ')}
+    </div>
+  );
+};
+export default ReactQuerySaveReadTest;