diff --git a/client/src/App.tsx b/client/src/App.tsx index bf125c9..653e17f 100644 --- a/client/src/App.tsx +++ b/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 = 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 ( diff --git a/client/src/components/pages/Register/collection.tsx b/client/src/components/pages/Register/collection.tsx index 70be071..70ab9ea 100644 --- a/client/src/components/pages/Register/collection.tsx +++ b/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(); const [view, setView] = useState(

Loading...

); 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(

Hi, {user.firstname}! Great to meet you.

diff --git a/client/src/components/ui/Widgets/FriendSearchWidget.tsx b/client/src/components/ui/Widgets/FriendSearchWidget.tsx index e2ec89b..d35d308 100644 --- a/client/src/components/ui/Widgets/FriendSearchWidget.tsx +++ b/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(); const [userPool, setUserPool] = useState([]); const [friendResults, setFriendResults] = useState([]); - 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); })(); diff --git a/client/src/context/AuthContext.tsx b/client/src/context/AuthContext.tsx index 7e511d5..32b3dac 100644 --- a/client/src/context/AuthContext.tsx +++ b/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> | VoidFunction - token?: string + token: string | undefined setToken: Dispatch> | VoidFunction } diff --git a/client/src/util/API.ts b/client/src/util/API.ts index f820f16..bf55e63 100644 --- a/client/src/util/API.ts +++ b/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 = { + 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 { - constructor() { - super(Settings.getAPISTRING() + "/app/users"); + constructor(token: string) { + super(Settings.getAPISTRING() + "/app/users", token); } } export class Friendship extends RestController { - 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 { - constructor() { - super(Settings.getAPISTRING() + "/app/recipes"); + constructor(token: string) { + super(Settings.getAPISTRING() + "/app/recipes", token); } } export class Ingredient extends RestController { - 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 { - constructor() { - super(Settings.getAPISTRING() + "/app/collection"); + constructor(token: string) { + super(Settings.getAPISTRING() + "/app/collection", token); } } export class GroceryList extends RestController { - constructor() { - super(Settings.getAPISTRING() + "/app/grocery-list") + constructor(token: string) { + super(Settings.getAPISTRING() + "/app/grocery-list", token) } } } diff --git a/client/src/util/handleToken.ts b/client/src/util/handleToken.ts new file mode 100644 index 0000000..7f764c7 --- /dev/null +++ b/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 = 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; +} \ No newline at end of file diff --git a/server/routes/index.ts b/server/routes/index.ts index 0c9743d..039b797 100644 --- a/server/routes/index.ts +++ b/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);