Completed 2FA with email sent code. (#144)

* debug and start of 2fa

* Finished 2FA with email sending

* feat: improved security of code verification

---------

Co-authored-by: Isaac Nguyen <isaachn@uci.edu>

Author: Nameless7631

client/src/App.tsx

@@ -14,7 +14,7 @@ import { ViewPage } from "./components/clientPage/ViewPage";
 import { LandingPage } from "./components/login/LandingPage";
 import { ChooseLogin } from "./components/login/ChooseLogin";
 import { ForgotPassword } from "./components/forgotPassword/ForgotPassword";
-import { AdminPin } from "./components/authentification/AdminPin";
+import { Authentification } from "./components/authentification/authentification";
 import { Dashboard } from "./components/dashboard/Dashboard";
 import { Donations } from "./components/donations/Donations"
 import { ExitSurvey } from "./components/exit_survey/ExitSurvey";
@@ -59,7 +59,7 @@ const App = () => {
     currentRoute === 'choose-login' ||
     currentRoute === 'signup' ||
     currentRoute === 'forgot-password' ||
-    currentRoute === 'admin-pin'
+    currentRoute === 'authentification'
   );
 
   return (
@@ -91,16 +91,16 @@ const App = () => {
                 element={<ForgotPassword />}
               />
                 <Route
-                path="/admin-pin/:userType?"
-                element={<AdminPin />}
+                path="/authentification/:userType?"
+                element={<Authentification />}
               />
               <Route
                 path="/exit-survey"
-                element={<ExitSurvey />}
+                element={<ProtectedRoute element={<ExitSurvey />}/>}
               />
               <Route
                 path="/success-story"
-                element={<SuccessStory />}
+                element={<ProtectedRoute element={<SuccessStory />}/>}
               />
               <Route
                 path="/settings"
@@ -112,23 +112,23 @@ const App = () => {
               />
               <Route
                 path="/client-interview-screening"
-                element={<ClientInterviewScreening />}
+                element={<ProtectedRoute element={<ClientInterviewScreening />} />}
               />
               <Route
                 path="/monthly-statistics"
                 element={<ProtectedRoute element={<CaseManagerMonthlyStats />} />}
               />
               <Route
                 path="/forms-hub"
-                element={<FormsHub />}
+                element={<ProtectedRoute element={<FormsHub />}/>}
               />
               <Route
                   path="/start-form"
-                  element={<StartForms />}
+                  element={<ProtectedRoute element={<StartForms />} />}
                 />
               <Route
                 path="/admin-client-list"
-                element={<AdminClientList />}
+                element={<ProtectedRoute element ={<AdminClientList />} />}
               />
               <Route
                 path="/accounts"
@@ -141,17 +141,17 @@ const App = () => {
               />
               <Route
                 path="/clientlist"
-                element={<ClientList />}
+                element={<ProtectedRoute element = {<ClientList />} />}
               />
 
               <Route
                 path="/clientdata"
-                element={<ClientData />}
+                element={<ProtectedRoute element={<ClientData />} />}
               />
 
                 <Route
                   path = "/donations"
-                  element = {<Donations />}
+                  element = {<ProtectedRoute element={<Donations />} />}
                 />
                 <Route
                   path = "/volunteer-tracking"
@@ -163,47 +163,47 @@ const App = () => {
                 />
                 <Route
                   path="/ViewClient/:id"
-                  element={<ViewPage />}
+                  element={<ProtectedRoute element = {<ViewPage />} />}
                 />
                 <Route
                   path="/casemanager"
-                  element={<CaseManager />}
+                  element={<ProtectedRoute element={<CaseManager />} />}
                 />
                 <Route
                   path="/random-client-survey"
-                  element={<RandomClientSurvey />}
+                  element={<ProtectedRoute element={<RandomClientSurvey />} />}
                 />
                 <Route
-                  path ="/frontDesk"
-                  element ={<FrontDeskMonthlyStats/>}
+                  path ="/frontDesk" 
+                  element ={<ProtectedRoute element={<FrontDeskMonthlyStats/>}/>}
                 />
                 <Route
                   path ="/intakeStats"
-                  element ={<IntakeStats/>}
+                  element ={<ProtectedRoute element= {<IntakeStats/>} />}
                 />
                   <Route
                     path ="/personal"
-                    element ={<PersonalInformation hidden={false}/>}
+                    element ={<ProtectedRoute element={<PersonalInformation hidden={false}/>}/>}
                   />
                   <Route
                     path ="/financial"
-                    element ={<FinancialInformation hidden={false}/>}
+                    element ={<ProtectedRoute element={<FinancialInformation hidden={false}/>} />}
                   />
                   <Route
                     path ="/health"
-                    element ={<HealthSocialInformation hidden={false}/>}
+                    element ={<ProtectedRoute element={<HealthSocialInformation hidden={false}/>}/>}
                   />
                   <Route
                     path ="/additional"
-                    element ={<AdditionalInformation hidden={false}/>}
+                    element ={<ProtectedRoute element={<AdditionalInformation hidden={false}/>}/>}
                   />
                   <Route
                     path ="/review"
-                    element ={<ReviewInformation/>}
+                    element ={<ProtectedRoute element={<ReviewInformation/>}/>}
                   />
                   <Route
                     path ="/success"
-                    element ={<Success/>}
+                    element ={<ProtectedRoute element={<Success/>} />}
                   />
                   <Route path="/playground" element={<Playground/>}/>
                   <Route

client/src/components/authentification/AdminPin.tsx renamed to client/src/components/authentification/authentification.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from "react";
+import { useCallback, useEffect, useState } from "react";
 import {
   Button,
   Center,
@@ -35,19 +35,54 @@ const resetPasswordSchema = z.object({
 
 type ResetPasswordFormValues = z.infer<typeof resetPasswordSchema>;
 
-export const AdminPin = () => {
+export const Authentification = () => {
   const navigate = useNavigate();
   const toast = useToast();
   const { userType } = useParams<{ userType: string }>();
   const userAbbreviation = userType === "Case Manager" ? "CM" : "AD";
 
-  const { resetPassword, handleRedirectResult } = useAuthContext();
+  const { handleRedirectResult, createCode, authenticate } = useAuthContext();
   const { backend } = useBackendContext();
-    // update when 2FA is integrated
-  const handlePinSubmit = () => {
-    navigate("/casemanager")
-  }
+  const [pin, setPin] = useState("");
 
+  const handlePinChange = (value: string) => {
+    setPin(value);
+  };
+  
+  const handlePinSubmit = async (event: React.FormEvent) => {
+    event.preventDefault();
+
+    try {
+      await authenticate({code: Number(pin)});
+      if (userType === "Case Manager") {
+        navigate("/clientlist");
+      }
+      else if (userType === "Admin") {
+        navigate("/admin-client-list");
+      }
+    } catch (error) {
+      toast({
+        title: "Authentication Failed",
+        description: "The entered PIN is incorrect. Please try again.",
+        status: "error",
+        duration: 5000,
+        isClosable: true,
+      });
+
+      setPin("");
+    }
+  };
+
+  useEffect( () => {
+    const generateCode = async () => {
+      try {
+        await createCode();
+      } catch (err) {
+        console.error('Error posting code: ', err);
+      }
+    };
+    generateCode();
+  }, [createCode]);
 
   useEffect(() => {
     handleRedirectResult(backend, navigate, toast);
@@ -100,7 +135,7 @@ export const AdminPin = () => {
 
               <FormControl w={"100%"} >
                 <HStack justify="center" m={3}>
-                <PinInput size="lg">
+                <PinInput size="lg" value={pin} onChange={handlePinChange}>
                     <PinInputField size="lg" />
                     <PinInputField size="lg" />
                     <PinInputField size="lg" />
@@ -111,7 +146,7 @@ export const AdminPin = () => {
                 </HStack>
 
               </FormControl>
-              <Text fontWeight="light" fontSize="sm" textAlign="center" mb={5}>Admin pins are sent to admins for confirmation. After pin is entered, a request is sent to that admin to verify your account. </Text>
+              <Text fontWeight="light" fontSize="sm" textAlign="center" mb={5}>An email has been sent with a 2FA code. Please input it here. </Text>
 
               <Button
                 type="submit"
@@ -122,7 +157,7 @@ export const AdminPin = () => {
                 mx={"auto"}
                 mb={4}
               >
-                Send Request
+                Confirm Code
               </Button>
             </Stack>
           </form>

client/src/components/login/ChooseLogin.tsx

@@ -6,7 +6,6 @@ export const ChooseLogin = () => {
 
     const handleUserSelection = (userType: string) => {
         navigate(`/login/${userType}`);
-        console.log("user type: ", userType);
     };
 
     return (

client/src/components/login/Login.tsx

@@ -73,8 +73,10 @@ export const Login = () => {
         email: data.email,
         password: data.password,
       });
-      if (userType === "Case Manager") navigate("/clientlist");
-      else if (userType === "Admin") navigate("/admin-client-list");
+  
+
+      if (userType === "Case Manager") navigate("/authentification/Case Manager");
+      else if (userType === "Admin") navigate("/authentification/Admin");
     } catch (err) {
       const errorCode = err.code;
       const firebaseErrorMsg = err.message;

client/src/components/signup/Signup.tsx

@@ -68,16 +68,9 @@ export const Signup = () => {
   });
 
   const handleSignup = async (data: SignupFormValues) => {
-    console.log("submitted");
+
     try {
-      console.log({
-        email: data.email,
-        password: data.password,
-        firstName: data.firstName,
-        lastName: data.lastName,
-        phoneNumber: data.phoneNumber,
-        role: userType === "Admin" ? "admin" : (userType === "Case Manager" ? "user" : "client"),
-      });
+
       const user = await signup({
         email: data.email,
         password: data.password,
@@ -86,9 +79,8 @@ export const Signup = () => {
         phoneNumber: data.phoneNumber,
         role: userType === "Admin" ? "admin" : (userType === "Case Manager" ? "user" : "client"),
       });
-      console.log(user);
       if (user) {
-        navigate(`/admin-pin/${userType}`);
+        navigate(`/clientlist`);
       }
     } catch (err) {
       if (err instanceof Error) {