defined protect function for access control on front end

client/src/App.tsx

@@ -1,5 +1,8 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { IUser } from './schemas';
+import { checkCredientials } from './util/apiUtils';
+import { AuthContext, defaultValue, IAuthContext } from './context/AuthContext';
 import Browser from './components/pages/Browser';
 import Collection from './components/pages/Collection';
 import Login from './components/pages/Login';
@@ -7,18 +10,16 @@ import Profile from './components/pages/Profile';
 import Recipe from './components/pages/Recipe';
 import Register from './components/pages/Register';
 import Welcome from './components/pages/Welcome';
-import { useAuthContext } from './context/AuthContext';
 import './sass/App.scss'
-import { IUser } from './schemas';
-import { checkCredientials } from './util/apiUtils';
 
 function App() {
-  const authContext = useAuthContext();
+  const [user, setUser] = useState<IAuthContext>({ user: undefined });
 
   useEffect(() => {
     const wrapper = async () => {
-      const result = await checkCredientials();
-      authContext.user = result;
+      const result: IAuthContext | undefined = await checkCredientials();
+      if (result == undefined) setUser({ user: undefined });
+      setUser(result!);
     }
 
     wrapper();
@@ -26,17 +27,19 @@ function App() {
 
   return (
     <BrowserRouter>
-      <div className="App">
-        <Routes>
-          <Route path="/"               element={<Welcome />} />
-          <Route path="/register"       element={<Register />} />
-          <Route path="/login"          element={<Login />} />
-          <Route path="/profile"        element={<Profile />} />
-          <Route path="/collection"     element={<Collection />} />
-          <Route path="/explore"        element={<Browser />} />
-          <Route path="/recipe/:id"     element={<Recipe />} />
-        </Routes>
-      </div>
+      <AuthContext.Provider value={ user }>
+        <div className="App">
+          <Routes>
+            <Route path="/"               element={<Welcome />} />
+            <Route path="/register"       element={<Register />} />
+            <Route path="/login"          element={<Login />} />
+            <Route path="/profile"        element={<Profile />} />
+            <Route path="/collection"     element={<Collection />} />
+            <Route path="/explore"        element={<Browser />} />
+            <Route path="/recipe/:id"     element={<Recipe />} />
+          </Routes>
+        </div>
+      </AuthContext.Provider>
     </BrowserRouter>
   )
 }

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>
     )
 }

client/src/components/ui/Navbar.tsx

@@ -1,14 +1,14 @@
-import { useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { useAuthContext } from "../../context/AuthContext";
+import { AuthContext } from "../../context/AuthContext";
+import { IUser } from "../../schemas";
 import { attemptLogout } from "../../util/apiUtils";
 import Button from "./Button";
 import "/src/sass/components/Navbar.scss";
 
 const Navbar = () => {
-    const authContext = useAuthContext();
+    const { user } = useContext(AuthContext);
     const navigate = useNavigate();
-    const [user, setUser] = useState('Mikayla');
 
     const navbarLoggedIn = (
         <div id="navbar">
@@ -16,8 +16,10 @@ const Navbar = () => {
                 <a onClick={() => navigate('/')}>RECIPIN</a>
             </div>
             <div className="navbar-block">
-                <p>Hi, {authContext.user?.firstname}</p>
+                <p>Hi, {user?.firstname}</p>
                 <span id="search-icon"></span>
+                <Button onClick={() => console.log(user)}>Auth Context?</Button>
+                <Button onClick={() => navigate('/profile')}>Profile</Button>
                 <Button onClick={attemptLogout}>Log Out</Button>
             </div>
         </div>
@@ -40,16 +42,12 @@ const Navbar = () => {
                 <a onClick={() => navigate('/')}>RECIPIN</a>
             </div>
             <div className="navbar-block">
-                <p>Hi, {authContext.user?.firstname}</p>
+                <p>Hi, {user?.firstname}</p>
             </div>
         </div>
     )
 
-    if (authContext.user) {
-        return navbarLoggedIn;
-    } else {
-        return navbarNotLoggedIn;
-    }
+    return user ? navbarLoggedIn : navbarNotLoggedIn;
 }
 
 export default Navbar;

client/src/context/AuthContext.tsx

@@ -2,11 +2,11 @@ import { createContext, useContext } from "react";
 import { IUser } from "../schemas";
 
 
-interface IAuthContext {
+export interface IAuthContext {
     user?: IUser
 }
 
-const defaultValue: IAuthContext = {
+export const defaultValue: IAuthContext = {
     user: undefined,
 }
 

client/src/util/Protect.tsx

@@ -0,0 +1,29 @@
+import { useContext } from "react";
+import { useNavigate } from "react-router-dom";
+import { Button, Page } from "../components/ui";
+import Divider from "../components/ui/Divider";
+import { AuthContext } from "../context/AuthContext";
+
+export default function Protect({ children = <></> }) {
+    const { user } = useContext(AuthContext);
+    const navigate = useNavigate();
+
+    if (!user) {
+        return (
+            <Page>
+                <div className="content-unauthorized">
+                    <h1>Hi there! You don't look too familiar.</h1>
+                    <p>To view the content on this page, please log in below:</p>
+                    <Divider />
+                    <Button onClick={() => navigate('/login')}>Log In</Button>
+                </div>
+            </Page>
+        )
+    } else {
+        return (
+            <Page>
+                { children }
+            </Page>
+        )
+    }
+}