Login page frontend

apps/frontend/src/app.tsx

@@ -16,46 +16,127 @@ import FormRequests from '@containers/FormRequests';
 import PantryApplication from '@containers/pantryApplication';
 import { submitPantryApplicationForm } from '@components/forms/pantryApplicationForm';
 import ApprovePantries from '@containers/approvePantries';
+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)
+
+      {
+        path: '/pantry-application',
+        element: <PantryApplication />,
+        action: submitPantryApplicationForm,
+      },
+
+      // Private routes (protected by auth)
+
       {
         path: '/landing-page',
-        element: <LandingPage />,
+        element: (
+          <Authenticator components={components}>
+            <LandingPage />
+          </Authenticator>
+        ),
       },
       {
         path: '/pantry-overview',
-        element: <PantryOverview />,
+        element: (
+          <Authenticator components={components}>
+            <PantryOverview />
+          </Authenticator>
+        ),
       },
       {
         path: '/pantry-dashboard/:pantryId',
-        element: <PantryDashboard />,
+        element: (
+          <Authenticator components={components}>
+            <PantryDashboard />
+          </Authenticator>
+        ),
       },
       {
         path: '/pantry-past-orders',
-        element: <PantryPastOrders />,
+        element: (
+          <Authenticator components={components}>
+            <PantryPastOrders />
+          </Authenticator>
+        ),
       },
       {
         path: '/pantries',
-        element: <Pantries />,
-      },
-      {
-        path: '/pantry-application',
-        element: <PantryApplication />,
-        action: submitPantryApplicationForm,
+        element: (
+          <Authenticator components={components}>
+            <Pantries />
+          </Authenticator>
+        ),
       },
       {
         path: '/orders',
-        element: <Orders />,
+        element: (
+          <Authenticator components={components}>
+            <Orders />
+          </Authenticator>
+        ),
       },
       {
         path: '/request-form/:pantryId',
-        element: <FormRequests />,
+        element: (
+          <Authenticator components={components}>
+            <FormRequests />
+          </Authenticator>
+        ),
       },
+      {
+        path: '/approve-pantries',
+        element: (
+          <Authenticator components={components}>
+            <ApprovePantries />
+          </Authenticator>
+        ),
+      },
+
+      // Actions
+
       {
         path: '/food-request',
         action: submitFoodRequestFormModal,
@@ -64,10 +145,6 @@ const router = createBrowserRouter([
         path: '/confirm-delivery',
         action: submitDeliveryConfirmationFormModal,
       },
-      {
-        path: '/approve-pantries',
-        element: <ApprovePantries />,
-      },
     ],
   },
 ]);
@@ -78,7 +155,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/signOutButton.tsx

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

package.json

@@ -14,10 +14,11 @@
   },
   "private": true,
   "dependencies": {
+    "@aws-amplify/ui-react": "^6.9.3",
     "@aws-sdk/client-cognito-identity-provider": "^3.410.0",
-    "@chakra-ui/icons": "^2.2.4",
     "@aws-sdk/client-s3": "^3.735.0",
     "@aws-sdk/lib-storage": "^3.735.0",
+    "@chakra-ui/icons": "^2.2.4",
     "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
@@ -32,6 +33,7 @@
     "@types/google-libphonenumber": "^7.4.30",
     "@types/mongodb": "^4.0.7",
     "amazon-cognito-identity-js": "^6.3.5",
+    "aws-amplify": "^6.13.5",
     "axios": "^1.5.0",
     "class-transformer": "^0.5.1",
     "class-validator": "^0.14.0",