Sc-9563: improve certificate expiration error (#819)

* WIP: Improve Error Message certificate expiration * refact: set token exp in cookie & check token validity in dash layout * fix: token expiration from auth0 * remove unused console * file cleanup
trisacrypto · Oct 1, 2022 · 0d7b7f9 · 0d7b7f9
1 parent c989227
commit 0d7b7f9
Show file tree

Hide file tree

Showing 11 changed files with 108 additions and 42 deletions.
diff --git a/node_modules/.yarn-integrity b/node_modules/.yarn-integrity
diff --git a/web/gds-user-ui/src/components/Header/LandingHeader.tsx b/web/gds-user-ui/src/components/Header/LandingHeader.tsx
@@ -111,9 +111,21 @@ const LandingHeader = (props: FlexProps): JSX.Element => {
                   <MenuItem to={`${TRISA_BASE_URL}/${locale}`} color="white">
                     <Trans id="Documentation">Documentation</Trans>
                   </MenuItem>
-                  <MenuItem to="/auth/login" color="white">
-                    <Trans id="Login">Login</Trans>
-                  </MenuItem>
+                  <Stack>
+                    {!isLoggedIn ? (
+                      <NavLink to={'/auth/login'}>
+                        <Button variant="secondary">
+                          <Trans id="Login">Login</Trans>
+                        </Button>
+                      </NavLink>
+                    ) : (
+                      <NavLink to={'/dashboard/overview'}>
+                        <Button variant="secondary">
+                          <Trans id="Your dashboard">Your dashboard</Trans>
+                        </Button>
+                      </NavLink>
+                    )}
+                  </Stack>
                 </DrawerBody>
               </DrawerContent>
             </Drawer>

diff --git a/web/gds-user-ui/src/components/Loader/TransparentLoader.tsx b/web/gds-user-ui/src/components/Loader/TransparentLoader.tsx
@@ -2,6 +2,7 @@ import { Spinner, Flex, Text, VStack } from '@chakra-ui/react';
 
 interface LoaderProps {
   title?: string;
+  opacity?: 'md' | 'full';
 }
 // This loader is for containers that are loading
 const TransparentLoader: React.FC<LoaderProps> = (props) => {

diff --git a/web/gds-user-ui/src/components/Section/__tests__/__snapshots__/Membership.spec.tsx.snap b/web/gds-user-ui/src/components/Section/__tests__/__snapshots__/Membership.spec.tsx.snap
@@ -31,10 +31,15 @@ exports[`<MembershipGuide /> should match snapshot 1`] = `
                   <div
                     class="css-1p293e5"
                   >
-                    <img
-                      alt="Trisa logo"
-                      src="trisa_logo.svg"
-                    />
+                    <a
+                      href="/"
+                    >
+                      <img
+                        alt="Trisa logo"
+                        class="css-1czmu1r"
+                        src="trisa_logo.svg"
+                      />
+                    </a>
                   </div>
                 </a>
               </a>

diff --git a/web/gds-user-ui/src/hooks/useAuth.ts b/web/gds-user-ui/src/hooks/useAuth.ts
@@ -1,6 +1,6 @@
 import { useDispatch, useSelector } from 'react-redux';
 import { userSelector, login, logout, isLoggedInSelector } from 'modules/auth/login/user.slice';
-import { getCookie } from 'utils/cookies';
+import { getCookie, clearCookies } from 'utils/cookies';
 import useCustomAuth0 from './useCustomAuth0';
 const useAuth = () => {
   const dispatch = useDispatch();
@@ -12,6 +12,8 @@ const useAuth = () => {
     dispatch(login(u));
   };
   const getToken = getCookie('access_token') || '';
+  // get expiry time from cookie
+  const getExpiryTime: any = getCookie('expires_in') || '';
 
   const logoutUser = () => {
     dispatch(logout());
@@ -42,11 +44,20 @@ const useAuth = () => {
   const isUserAuthenticated = !!isLoggedIn;
 
   const isAuthenticated = () => {
-    if (isLoggedIn && !getToken) {
-      logoutUser();
-      return false;
+    // if token is expired then logout
+    if (getExpiryTime && isLoggedIn && getToken) {
+      const currentTime = new Date().getTime() / 1000;
+
+      if (currentTime > +getExpiryTime) {
+        console.log('token expired');
+        clearCookies();
+        logoutUser();
+        return false;
+      } else {
+        return isUserAuthenticated;
+      }
     }
-    return isUserAuthenticated;
+    return false;
   };
 
   return {

diff --git a/web/gds-user-ui/src/layouts/DashboardLayout.tsx b/web/gds-user-ui/src/layouts/DashboardLayout.tsx
@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import Sidebar from 'components/Sidebar';
 import { Box } from '@chakra-ui/react';
 import Loader from 'components/Loader';
 import { userSelector } from 'modules/auth/login/user.slice';
 import TransparentLoader from '../components/Loader/TransparentLoader';
+import { isTokenExpired } from 'utils/utils';
 type DashboardLayoutProp = {
   children: React.ReactNode;
 };
@@ -21,13 +22,31 @@ const AxiosErrorLoader = () => {
 
 const DashboardLayout: React.FC<DashboardLayoutProp> = (props) => {
   const { isFetching } = useSelector(userSelector);
+  const [isLoading, setIsLoading] = useState(false);
+
+  // const deps = window.location.pathname;
+  useEffect(() => {
+    // check if token is valid
+    // if not, redirect to login page
+    if (isTokenExpired()) {
+      setIsLoading(true);
+      setTimeout(() => {
+        window.location.href = `/auth/login?q=token_expired`;
+      }, 1000);
+    }
+  }, []);
 
   return (
     <>
       {isFetching ? (
         <Loader />
       ) : (
         <>
+          {isLoading && (
+            <Box>
+              <TransparentLoader title="Your session has expired..." />
+            </Box>
+          )}
           <AxiosErrorLoader />
           <Sidebar {...props} />
         </>

diff --git a/web/gds-user-ui/src/modules/auth/login/user.slice.ts b/web/gds-user-ui/src/modules/auth/login/user.slice.ts
@@ -59,8 +59,11 @@ export const getAuth0User: any = createAsyncThunk(
       // then login with auth0
       const getUserInfo: any = hasToken && (await auth0Hash());
       // console.log('[getUserInfo]', getUserInfo);
+      const updatedTime = new Date(getUserInfo?.idTokenPayload?.updated_at).getTime() / 1000;
+      const expiresTime = updatedTime + getUserInfo.expiresIn;
       setCookie('access_token', getUserInfo?.accessToken);
       setCookie('user_locale', getUserInfo?.idTokenPayload?.locale || 'en');
+      setCookie('expires_in', expiresTime);
       if (getUserInfo && getUserInfo?.idTokenPayload?.email_verified) {
         const getUser = await logUserInBff();
         // console.log('[getUser]', getUser);
@@ -72,6 +75,10 @@ export const getAuth0User: any = createAsyncThunk(
           // console.log('[newUserPayload]', newUserPayload);
           setCookie('access_token', newUserPayload?.accessToken);
           setCookie('user_locale', newUserPayload?.idTokenPayload?.locale || 'en');
+          // set expired time
+          const updated = new Date(newUserPayload?.idTokenPayload?.updated_at).getTime() / 1000;
+          const expires = updated + getUserInfo.expiresIn;
+          setCookie('expires_in', expires);
           const userInfo: TUser = {
             isLoggedIn: true,
             user: {

diff --git a/web/gds-user-ui/src/modules/dashboard/certificate/registration.tsx b/web/gds-user-ui/src/modules/dashboard/certificate/registration.tsx
@@ -112,6 +112,7 @@ const Certificate: React.FC = () => {
 
   async function handleNextStepClick() {
     if (hasErroredField()) {
+      console.log('has errored field');
       // i think we should not use alert here , but we need to find a way to display the error message
       // eslint-disable-next-line no-alert
       if (window.confirm('Some elements required for registration are missing; continue anyway?')) {
@@ -122,14 +123,6 @@ const Certificate: React.FC = () => {
         });
       }
     } else {
-      nextStep({
-        isFormCompleted: isFormCompleted(),
-        formValues: getCurrentFormValue(),
-        values: methods.getValues(),
-        registrationValues: registrationData,
-        isDirty: methods.formState.isDirty,
-        setRegistrationState: setRegistrationData
-      });
       if (isDirty) {
         await postRegistrationValue({
           ...methods.getValues(),
@@ -138,6 +131,14 @@ const Certificate: React.FC = () => {
           }
         });
       }
+      nextStep({
+        isFormCompleted: isFormCompleted(),
+        formValues: getCurrentFormValue(),
+        values: methods.getValues(),
+        registrationValues: registrationData,
+        isDirty: methods.formState.isDirty,
+        setRegistrationState: setRegistrationData
+      });
     }
   }
   const handlePreviousStep = async () => {

diff --git a/web/gds-user-ui/src/modules/verify/__snapshots__/verify.spec.tsx.snap b/web/gds-user-ui/src/modules/verify/__snapshots__/verify.spec.tsx.snap
@@ -31,10 +31,15 @@ exports[`<VerifyPage /> should match snapshot 1`] = `
                   <div
                     class="css-1p293e5"
                   >
-                    <img
-                      alt="Trisa logo"
-                      src="trisa_logo.svg"
-                    />
+                    <a
+                      href="/"
+                    >
+                      <img
+                        alt="Trisa logo"
+                        class="css-1czmu1r"
+                        src="trisa_logo.svg"
+                      />
+                    </a>
                   </div>
                 </a>
               </a>

diff --git a/web/gds-user-ui/src/utils/utils.ts b/web/gds-user-ui/src/utils/utils.ts
@@ -5,7 +5,7 @@ import auth0 from 'auth0-js';
 import getAuth0Config from 'application/config/auth0';
 import * as Sentry from '@sentry/react';
 import { getRegistrationDefaultValue } from 'modules/dashboard/registration/utils';
-
+import { getCookie } from 'utils/cookies';
 const DEFAULT_REGISTRATION_AUTHORITY = 'RA777777';
 export const findStepKey = (steps: any, key: number) =>
   steps?.filter((step: any) => step.key === key);
@@ -145,6 +145,14 @@ export const getRefreshToken = () => {
   });
 };
 export const handleError = (error: any, customMessage?: string) => {
+  // if error status code is 403 display transparent loader
+  if (error?.response?.status === 403) {
+    // get el axiosLoader id and set display to block
+    const el = document.getElementById('axiosLoader');
+    if (el) {
+      el.style.display = 'block';
+    }
+  }
   if (error) {
     Sentry.captureException(error);
   }
@@ -221,3 +229,16 @@ export const splitAndDisplay = (str: string, delimiter?: string, limit?: number)
   const limitWords = limit ? words.slice(0, limit) : words;
   return limitWords.join(' ');
 };
+
+// ceckisTokenExpired function get from cookies
+export const isTokenExpired = () => {
+  // get expires token from cookies
+  const expiresIn = getCookie('expires_in');
+  if (expiresIn) {
+    // get current time
+    const currentTime = new Date().getTime() / 1000;
+    // check if token is expired
+    return currentTime > expiresIn;
+  }
+  return false;
+};
diff --git a/yarn.lock b/yarn.lock