Ticket 200 pr

apps/frontend/src/app.tsx

@@ -7,26 +7,55 @@
 import ApplicationDetailPage from '@features/applications/pages/ApplicationDetailPage';
 import LoginContext from '@features/auth/components/LoginPage/LoginContext';
 import ProtectedRoutes from '@features/auth/components/ProtectedRoutes';
-import LoginPage from '@features/auth/components/LoginPage';
 import AdminRoutes from '@features/auth/components/AdminRoutes';
 import HomePage from '@shared/pages/HomePage';
 
 export const App: React.FC = () => {
-  const [token, setToken] = useState<string>('');
+  const [token, setToken] = useState<string>(() => {
+    const storedToken = localStorage.getItem('token');
+    return storedToken ? JSON.parse(storedToken) : '';
+  });
+
   return (
     <LoginContext.Provider value={{ setToken, token }}>
       <BrowserRouter>
         <Routes>
-          <Route path="/login" element={<LoginPage />} />
+          <Route path="/login" element={<HomePage />} />
           <Route path="/home" element={<HomePage />} />
 
-          <Route element={<ProtectedRoutes token={token} />}>
+          <Route element={<ProtectedRoutes />}>
             <Route element={<AdminRoutes />}>
-              <Route path="/" element={<ApplicationsPage />} />
-              <Route path="/applications" element={<ApplicationsPage />} />
+              <Route
+                path="/"
+                element={
+                  <Navigation>
+                    <DashboardPage />
+                  </Navigation>
+                }
+              />
+              <Route
+                path="/applications"
+                element={
+                  <Navigation>
+                    <ApplicationsPage />
+                  </Navigation>
+                }
+              />
               <Route
                 path="/applications/:userId"
-                element={<ApplicationDetailPage />}
+                element={
+                  <Navigation>
+                    <ApplicationDetailPage />
+                  </Navigation>
+                }
+              />
+              <Route
+                path="/settings"
+                element={
+                  <Navigation>
+                    <SettingsPage />
+                  </Navigation>
+                }
               />
             </Route>
 

apps/frontend/src/features/applicant/components/ApplicantView/user.tsx

@@ -16,8 +16,8 @@
 import { useFullName } from '@shared/hooks/useUserData';
 import FileUploadBox from '../FileUploadBox';
 import {
   Application,
   ApplicationStage,
 } from '@sharedTypes/types/application.types';
 import { FilePurpose } from '@sharedTypes/types/file-upload.types';
 
@@ -125,8 +125,7 @@
                 </Box>
                 {!isLoading &&
                   selectedApplication &&
-                  String(selectedApplication.stage) ===
-                    ApplicationStage.PM_CHALLENGE && (
+                  String(selectedApplication.stage) === 'PM_CHALLENGE' && (
                     <FileUploadBox
                       accessToken={accessToken}
                       applicationId={applicationId}

apps/frontend/src/features/auth/components/LoginPage/index.tsx

@@ -2,19 +2,15 @@ import { useEffect } from 'react';
 import apiClient from '@api/apiClient';
 import useLoginContext from './useLoginContext';
 import { useNavigate } from 'react-router-dom';
-import { Box, CircularProgress, Typography } from '@mui/material';
+import { Button, Stack } from '@mui/material';
+import { CognitoJwtVerifier } from 'aws-jwt-verify';
+
+const verifier = CognitoJwtVerifier.create({
+  userPoolId: import.meta.env.VITE_COGNITO_USER_POOL_ID as string,
+  tokenUse: 'access',
+  clientId: import.meta.env.VITE_COGNITO_CLIENT_ID as string,
+});
 
-/**
- * LoginPage - Handles Cognito OAuth callback only
- *
- * This page is responsible for:
- * 1. Receiving the auth code from Cognito redirect
- * 2. Exchanging it for access/refresh tokens
- * 3. Storing tokens and redirecting to dashboard
- *
- * This is NOT a landing page - users should not visit this directly.
- * They arrive here only after authenticating with Cognito.
- */
 export default function LoginPage() {
   const { setToken } = useLoginContext();
   const navigate = useNavigate();
@@ -23,12 +19,23 @@ export default function LoginPage() {
     const urlParams = new URLSearchParams(window.location.search);
     const authCode = urlParams.get('code');
 
-    async function handleCognitoCallback() {
-      if (authCode) {
+    async function getToken() {
+      const localToken = localStorage.getItem('token');
+
+      if (localToken) {
+        try {
+          const token = JSON.parse(localToken);
+          await verifier.verify(token);
+          setToken(token);
+          navigate('/');
+        } catch (error) {
+          console.log('Error verifying token:', error);
+          localStorage.removeItem('token');
+        }
+      } else if (authCode) {
         try {
           const tokenResponse = await apiClient.getToken(authCode);
 
-          // Store both tokens in localStorage for persistence
           localStorage.setItem(
             'auth_tokens',
             JSON.stringify({
@@ -37,47 +44,35 @@ export default function LoginPage() {
             }),
           );
 
-          // Keep backward compatibility - store access token for existing code
-          sessionStorage.setItem(
+          localStorage.setItem(
             'token',
             JSON.stringify(tokenResponse.access_token),
           );
 
           setToken(tokenResponse.access_token);
-
-          // Redirect to dashboard after successful login
-          navigate('/');
+          window.location.href = '/';
         } catch (error) {
           console.error('Error fetching token:', error);
-          // Redirect to home page on error
-          navigate('/home');
         }
-      } else {
-        // No auth code - redirect to home page
-        navigate('/home');
       }
     }
-
-    handleCognitoCallback();
+    getToken();
   }, [navigate, setToken]);
 
   return (
-    <Box
-      sx={{
-        width: '100vw',
-        height: '100vh',
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        alignItems: 'center',
-        gap: 3,
-        backgroundColor: '#181818',
-      }}
+    <Stack
+      width="100vw"
+      height="100vh"
+      justifyContent="center"
+      alignItems="center"
     >
-      <CircularProgress size={60} sx={{ color: '#4a5fa8' }} />
-      <Typography variant="h6" sx={{ color: '#ffffff' }}>
-        Logging you in...
-      </Typography>
-    </Box>
+      <Button
+        variant="contained"
+        color="primary"
+        href="https://scaffolding.auth.us-east-2.amazoncognito.com/login?client_id=4c5b8m6tno9fvljmseqgmk82fv&response_type=code&scope=email+openid&redirect_uri=http%3A%2F%2Flocalhost%3A4200%2Flogin"
+      >
+        Login
+      </Button>
+    </Stack>
   );
 }

apps/frontend/src/features/auth/components/ProtectedRoutes/index.tsx

@@ -5,7 +5,10 @@ import { Navigate, Outlet } from 'react-router-dom';
  * if the user is authenticated (i.e if an access token exists).
  * If the user is not authenticated, it redirects to the login page.
  */
-function ProtectedRoutes({ token }: { token: string }) {
+function ProtectedRoutes() {
+  const storedToken = localStorage.getItem('token');
+  const token = storedToken ? JSON.parse(storedToken) : '';
+
   return token ? <Outlet /> : <Navigate to="/login" />;
 }