defined protect function for access control on front end

client/src/components/pages/Profile.tsx

@@ -1,9 +1,21 @@
-import { Page } from "../ui";
+import { useContext, useEffect, useState } from "react";
+import { IUser } from "../../schemas";
+import { useNavigate } from "react-router-dom";
+import { AuthContext, useAuthContext } from "../../context/AuthContext";
+import { Button, Page } from "../ui";
+import Protect from "../../util/Protect";
 
 export default function Profile() {
+    const [message, setMessage] = useState<JSX.Element>();
+    const { user } = useContext(AuthContext);
+    const navigate = useNavigate();
+
     return (
-        <Page>
-            <h1>Mikayla Dobson</h1>
-        </Page>
+        <Protect>
+            <div className="profile-authenticated">
+                <h1>{user!.firstname}'s Profile</h1>
+                <p>Things and stuff!</p>
+            </div>
+        </Protect>
     )
 }