Login page frontend

apps/frontend/src/app.tsx

@@ -23,13 +23,51 @@ import DonationManagement from '@containers/donationManagement';
 import AdminDonation from '@containers/adminDonation';
 import { pantryIdLoader } from '@loaders/pantryIdLoader';
 import Homepage from '@containers/homepage';
+import '@aws-amplify/ui-react/styles.css';
+import { Authenticator } from '@aws-amplify/ui-react';
+import { Amplify } from 'aws-amplify';
+import CognitoAuthConfig from './aws-exports';
+import { Button } from '@chakra-ui/react';
+
+Amplify.configure(CognitoAuthConfig);
+
+const components = {
+  SignUp: {
+    Footer() {
+      return (
+        <>
+          <Button as="a" href="/pantry-application">
+            {' '}
+            Sign up to be pantry partner{' '}
+          </Button>
+          <Button> Log donation for one-time donors </Button>
+        </>
+      );
+    },
+  },
+
+  SignIn: {
+    Footer() {
+      return (
+        <>
+          <Button as="a" href="/pantry-application">
+            {' '}
+            Sign up to be pantry partner{' '}
+          </Button>
+          <Button> Log donation for one-time donors </Button>
+        </>
+      );
+    },
+  },
+};
 
 const router = createBrowserRouter([
   {
     path: '/',
     element: <Root />,
     errorElement: <NotFound />,
     children: [
+      // Public routes (no auth needed)
       {
         index: true,
         element: <Homepage />,
@@ -38,68 +76,114 @@ const router = createBrowserRouter([
         path: '/landing-page',
         element: <LandingPage />,
       },
+      {
+        path: '/pantry-application',
+        element: <PantryApplication />,
+        action: submitPantryApplicationForm,
+      },
+      {
+        path: '/pantry-application/submitted',
+        element: <PantryApplicationSubmitted />,
+      },
+      // Private routes (protected by auth)
       {
         path: '/pantry-overview',
-        element: <PantryOverview />,
+        element: (
+          <Authenticator components={components}>
+            <PantryOverview />
+          </Authenticator>
+        ),
       },
       {
         path: '/pantry-dashboard/:pantryId',
-        element: <PantryDashboard />,
+        element: (
+          <Authenticator components={components}>
+            <PantryDashboard />
+          </Authenticator>
+        ),
         loader: pantryIdLoader,
       },
       {
         path: '/pantry-past-orders',
-        element: <PantryPastOrders />,
+        element: (
+          <Authenticator components={components}>
+            <PantryPastOrders />
+          </Authenticator>
+        ),
       },
       {
         path: '/pantries',
-        element: <Pantries />,
-      },
-      {
-        path: '/pantry-application',
-        element: <PantryApplication />,
-        action: submitPantryApplicationForm,
-      },
-      {
-        path: '/pantry-application/submitted',
-        element: <PantryApplicationSubmitted />,
+        element: (
+          <Authenticator components={components}>
+            <Pantries />
+          </Authenticator>
+        ),
       },
       {
         path: '/food-manufacturer-order-dashboard',
-        element: <FoodManufacturerOrderDashboard />,
+        element: (
+          <Authenticator components={components}>
+            <FoodManufacturerOrderDashboard />
+          </Authenticator>
+        ),
       },
       {
         path: '/orders',
-        element: <Orders />,
+        element: (
+          <Authenticator components={components}>
+            <Orders />
+          </Authenticator>
+        ),
       },
       {
         path: '/request-form/:pantryId',
-        element: <FormRequests />,
+        element: (
+          <Authenticator components={components}>
+            <FormRequests />
+          </Authenticator>
+        ),
         loader: pantryIdLoader,
       },
       {
         path: '/donation-management',
-        element: <DonationManagement />,
+        element: (
+          <Authenticator components={components}>
+            <DonationManagement />
+          </Authenticator>
+        ),
       },
       {
-        path: '/food-request',
-        action: submitFoodRequestFormModal,
+        path: '/approve-pantries',
+        element: (
+          <Authenticator components={components}>
+            <ApprovePantries />
+          </Authenticator>
+        ),
       },
       {
-        path: '/confirm-delivery',
-        action: submitDeliveryConfirmationFormModal,
+        path: '/admin-donation',
+        element: (
+          <Authenticator components={components}>
+            <AdminDonation />
+          </Authenticator>
+        ),
       },
       {
-        path: '/approve-pantries',
-        element: <ApprovePantries />,
+        path: '/volunteer-management',
+        element: (
+          <Authenticator components={components}>
+            <VolunteerManagement />
+          </Authenticator>
+        ),
       },
+      // Actions
       {
-        path: '/admin-donation',
-        element: <AdminDonation />,
+        path: '/food-request',
+        action: submitFoodRequestFormModal,
       },
       {
-        path: '/volunteer-management',
-        element: <VolunteerManagement />,
+        path: '/confirm-delivery',
+        action: submitDeliveryConfirmationFormModal,
       },
     ],
   },
@@ -111,7 +195,11 @@ export const App: React.FC = () => {
     apiClient.getHello().then((res) => console.log(res));
   }, []);
 
-  return <RouterProvider router={router} />;
+  return (
+    <Authenticator.Provider>
+      <RouterProvider router={router} />
+    </Authenticator.Provider>
+  );
 };
 
 export default App;

apps/frontend/src/aws-exports.ts

@@ -0,0 +1,10 @@
+const CognitoAuthConfig = {
+  Auth: {
+    Cognito: {
+      userPoolClientId: '198bdfe995p1kb4jnopt3sk6i1',
+      userPoolId: 'us-east-1_StSYXMibq',
+      region: 'us-east-1',
+    },
+  },
+};
+export default CognitoAuthConfig;

apps/frontend/src/components/Header.tsx

@@ -1,7 +1,13 @@
 import React from 'react';
+import SignOutButton from './signOutButton';
 
 const Header = () => {
-  return <h1>Securing Safe Food</h1>;
+  return (
+    <div style={{ display: 'flex', gap: '16px' }}>
+      <h1>Securing Safe Food</h1>
+      <SignOutButton size="sm" variant="outline"></SignOutButton>
+    </div>
+  );
 };
 
 export default Header;

apps/frontend/src/components/signOutButton.tsx

@@ -0,0 +1,22 @@
+import { Button, ButtonProps } from '@chakra-ui/react';
+import { signOut } from 'aws-amplify/auth';
+import { useNavigate } from 'react-router-dom';
+
+type SignOutButtonProps = ButtonProps;
+
+const SignOutButton: React.FC<SignOutButtonProps> = (props) => {
+  const navigate = useNavigate();
+
+  const handleSignOut = async () => {
+    await signOut();
+    navigate('/');
+  };
+
+  return (
+    <Button onClick={handleSignOut} {...props}>
+      sign out
+    </Button>
+  );
+};
+
+export default SignOutButton;

package.json

@@ -17,11 +17,14 @@
   },
   "private": true,
   "dependencies": {
+    "@aws-amplify/ui-react": "^6.9.3",
     "@aws-sdk/client-cognito-identity-provider": "^3.410.0",
     "@aws-sdk/client-s3": "^3.735.0",
     "@aws-sdk/lib-storage": "^3.735.0",
+    "@chakra-ui/icons": "^2.2.4",
     "@chakra-ui/react": "^3.27.0",
     "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.13.0",
     "@nestjs/cli": "^10.1.17",
     "@nestjs/common": "^10.0.2",
     "@nestjs/config": "^3.2.3",
@@ -32,6 +35,7 @@
     "@nestjs/typeorm": "^10.0.0",
     "@types/google-libphonenumber": "^7.4.30",
     "amazon-cognito-identity-js": "^6.3.5",
+    "aws-amplify": "^6.13.5",
     "axios": "^1.8.2",
     "class-transformer": "^0.5.1",
     "class-validator": "^0.14.0",