API bug fixed, register flow worksgit add .

client/src/App.tsx

@@ -21,21 +21,27 @@ import GroceryList from './components/pages/GroceryList';
 import GroceryListCollection from './components/pages/GroceryListCollection';
 import { TokenType } from './util/types';
 import './sass/App.scss';
+import handleToken from './util/handleToken';
 
 function App() {
   const { setUser, token, setToken } = useAuthContext();
 
   useEffect(() => {
     if (document.cookie) {
-      const extractedToken: Partial<TokenType> = jwtDecode(document.cookie.split("=")[1]);
-      setToken(document.cookie.split("=")[1]);
-      setUser(extractedToken.user);
+      const response = handleToken();
+      if (response) {
+        setToken(response.token);
+        setUser(response.user);
+      }
     }
   }, [document.cookie]);
 
   useEffect(() => {
-    token && API.Settings.setToken(token);
-  }, [token])
+    if (token) {
+      const response = handleToken();
+      response && setUser(response.user);
+    }
+  }, [setToken])
 
   return (
     <BrowserRouter>

client/src/components/pages/Register/collection.tsx

@@ -9,15 +9,16 @@ import TextField from "../../ui/TextField";
 import { useAuthContext } from "../../../context/AuthContext";
 
 const InitialCollection: RegisterVariantType = ({ transitionDisplay, input }) => {
-    const { user, setUser } = useAuthContext();
+    const { user, token } = useAuthContext();
     const [collectionName, setCollectionName] = useState<string>();
     const [view, setView] = useState<JSX.Element>(<Page><h1>Loading...</h1></Page>);
     const now = useNow();
 
-    const collectionAPI = new API.Collection();
-
     const handleClick = async () => {
-        if (!user) return;
+        if (!user || !token) return;
+
+        const collectionAPI = new API.Collection(token);
+
         const collection: ICollection = {
             name: collectionName ?? (user.firstname + "'s Collection"),
             active: true,
@@ -35,7 +36,7 @@ const InitialCollection: RegisterVariantType = ({ transitionDisplay, input }) =>
     }
 
     useEffect(() => {    
-        if (user) {
+        if (user && token) {
             setView(
                 <Page>
                     <h1>Hi, {user.firstname}! Great to meet you.</h1>

client/src/components/ui/Widgets/FriendSearchWidget.tsx

@@ -4,14 +4,15 @@ import { TextField, UserCard } from "..";
 import { v4 } from "uuid";
 import { getAllUsers } from "../../../util/apiUtils";
 import API from "../../../util/API";
+import { useAuthContext } from "../../../context/AuthContext";
 
 const FriendSearchWidget: FC<{}> = () => {
+    const { token } = useAuthContext();
+
     const [searchTerm, setSearchTerm] = useState<string>();
     const [userPool, setUserPool] = useState<IUser[]>([]);
     const [friendResults, setFriendResults] = useState<IUser[]>([]);
 
-    const users = new API.User();
-
     // this isn't really working right now i don't think
     const handleRequestSent = useCallback((targetid: string | number) => {
         setUserPool((prev: IUser[]) => {
@@ -26,6 +27,9 @@ const FriendSearchWidget: FC<{}> = () => {
     // load available user pool on mount
     useEffect(() => {
         (async function() {
+            if (!token) return;
+            const users = new API.User(token);
+
             const result = await users.getAll();
             if (result) setUserPool(result);
         })();

client/src/context/AuthContext.tsx

@@ -2,9 +2,9 @@ import { createContext, Dispatch, SetStateAction, useContext } from "react";
 import { IUser } from "../schemas";
 
 export interface IAuthContext {
-    user?: IUser
+    user: IUser | undefined
     setUser: Dispatch<SetStateAction<IUser | undefined>> | VoidFunction
-    token?: string
+    token: string | undefined
     setToken: Dispatch<SetStateAction<string | undefined>> | VoidFunction
 }
 

client/src/util/API.ts

@@ -25,15 +25,14 @@ module API {
         protected endpoint: string;
         protected headers?: any
 
-        constructor(endpoint: string) {
+        constructor(endpoint: string, token: string) {
             this.endpoint = endpoint;
-
-            if (Settings.getToken()) {
             this.headers = {
+                headers: {
                     "Content-Type": "application/json",
-                    "Authorization": ("Bearer " + Settings.getToken())
-                };
+                    "Authorization": ("Bearer " + token)
                 }
+            };
         }
 
         async getAll() {
@@ -112,14 +111,14 @@ module API {
     }
 
     export class User extends RestController<IUser> {
-        constructor() {
-            super(Settings.getAPISTRING() + "/app/users");
+        constructor(token: string) {
+            super(Settings.getAPISTRING() + "/app/users", token);
         }
     }
 
     export class Friendship extends RestController<IFriendship> {
-        constructor() {
-            super(Settings.getAPISTRING() + "/app/friends");
+        constructor(token: string) {
+            super(Settings.getAPISTRING() + "/app/friends", token);
         }
 
         async getPendingFriendRequests() {
@@ -129,26 +128,27 @@ module API {
     }
 
     export class Recipe extends RestController<IRecipe> {
-        constructor() {
-            super(Settings.getAPISTRING() + "/app/recipes");
+        constructor(token: string) {
+            super(Settings.getAPISTRING() + "/app/recipes", token);
         }
     }
 
     export class Ingredient extends RestController<IIngredient> {
-        constructor() {
-            super(Settings.getAPISTRING() + "/app/ingredients");
+        constructor(token: string) {
+            if (!token) throw new Error("Missing required token");
+            super(Settings.getAPISTRING() + "/app/ingredients", token);
         }
     }
 
     export class Collection extends RestController<ICollection> {
-        constructor() {
-            super(Settings.getAPISTRING() + "/app/collection");
+        constructor(token: string) {
+            super(Settings.getAPISTRING() + "/app/collection", token);
         }
     }
 
     export class GroceryList extends RestController<IGroceryList> {
-        constructor() {
-            super(Settings.getAPISTRING() + "/app/grocery-list")
+        constructor(token: string) {
+            super(Settings.getAPISTRING() + "/app/grocery-list", token)
         }
     }
 }

client/src/util/handleToken.ts

@@ -0,0 +1,19 @@
+import jwtDecode from "jwt-decode";
+import { IUser } from "../schemas";
+import { TokenType } from "./types";
+
+export default function handleToken(): { token: string, user: IUser } | null {
+    try {
+        const extractedToken: Partial<TokenType> = jwtDecode(document.cookie.split("=")[1]);
+        if (extractedToken) {
+            return {
+                token: document.cookie.split("=")[1],
+                user: extractedToken.user as IUser
+            }
+        }
+      } catch(e: any) {
+        console.log(e.message);
+      }
+
+      return null;
+}

server/routes/index.ts

@@ -21,6 +21,7 @@ export const routes = async (app: Express) => {
     // middleware to check for auth on cookies on each request in protected routes
     app.use('/app', async (req, res, next) => {
         // pull jwt from request headers
+        console.log(req.headers);
         const token = req.headers['authorization']?.split(" ")[1];
         console.log(token);