diagnosing problem with session storage

client/src/App.tsx

@@ -1,5 +1,5 @@
 // framework tools and custom utils
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useState } from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { AuthContext, IAuthContext, useAuthContext } from './context/AuthContext';
 import { attemptLogout, checkCredientials } from './util/apiUtils';
@@ -17,26 +17,26 @@ import Welcome from './components/pages/Welcome';
 import AddRecipe from './components/pages/AddRecipe';
 import CollectionBrowser from './components/pages/CollectionBrowser';
 import { Navbar } from './components/ui';
-import './sass/App.scss'
-import RichText from './components/ui/RichText';
 import GroceryList from './components/pages/GroceryList';
 import GroceryListCollection from './components/pages/GroceryListCollection';
+import './sass/App.scss';
 
 function App() {
-  const [user, setUser] = useState<IAuthContext>({ user: undefined });
+  const [user, setUser] = useState<any>();
-  const authContext = useAuthContext();
+  const parentState = { user, setUser };
 
-  const receiveChange = useCallback((change: IUser) => {
+  const receiveChange = (() => {});
-    console.log(change);
-    authContext.user = change;
-  }, [])
 
   useEffect(() => {
     const wrapper = async () => {
       try {
         const result: IAuthContext | undefined = await checkCredientials();
-        if (result == undefined) setUser({ user: undefined });
+        
-        setUser(result!);
+        if (result == undefined) {
+          setUser({ user: undefined });
+        } else {
+          setUser(result);
+        }
       } catch(e) {
         console.error(e);
       }
@@ -45,13 +45,9 @@ function App() {
     wrapper();
   }, [])
 
-  useEffect(() => {
-    console.log(authContext);
-  }, [authContext]);
-
   return (
     <BrowserRouter>
-      <AuthContext.Provider value={ user }>
+      <AuthContext.Provider value={ parentState }>
         <div className="App">
           <Navbar receiveChange={receiveChange} />
           <Routes>

client/src/components/pages/Login.tsx

@@ -1,13 +1,16 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useContext, useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
-import { useAuthContext } from "../../context/AuthContext";
+import { AuthContext, useAuthContext } from "../../context/AuthContext";
 import { attemptLogin } from "../../util/apiUtils";
 import { IUserAuth } from "../../schemas";
 import { Button, Form, Page, Panel } from "../ui";
 
 export default function Login() {
+    const params = new URLSearchParams(window.location.search);
+    const redirect = params.get("redirect");
+    const { user, setUser } = useContext(AuthContext);
+
     // setup and local state
-    const authContext = useAuthContext();
     const navigate = useNavigate();
     const [form, setForm] = useState<JSX.Element>();
     const [input, setInput] = useState<IUserAuth>({ email: '', password: '' });
@@ -20,14 +23,14 @@ export default function Login() {
 
     const handleLogin = async () => {
         if (!input.email || !input.password) return;
-        const result = await attemptLogin(input);
+        const { data, ok } = await attemptLogin(input);
-        authContext.user = result.user;
+        if (ok) setUser(data);
-        navigate('/');
+        navigate(`/${redirect ?? ''}`);
     }
 
     // check for logged in user and mount form
     useEffect(() => {
-        if (authContext.user) navigate('/');
+        if (user) navigate('/');
         setForm(
             new Form<IUserAuth>({
                 parent: 'login',

client/src/components/pages/Profile.tsx

@@ -12,7 +12,7 @@ export default function Profile() {
     const navigate = useNavigate();
 
     return (
-        <Protect>
+        <Protect redirect="profile">
             <div className="profile-authenticated">
                 <h1>{user?.firstname}'s Profile</h1>
                 <p>Things and stuff!</p>

client/src/components/pages/Welcome.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useAuthContext } from "../../context/AuthContext";
 import { attemptLogout, checkCredientials } from "../../util/apiUtils";
@@ -6,8 +6,8 @@ import { Button, Page, Panel } from "../ui"
 import Divider from "../ui/Divider";
 
 const Welcome = () => {
-    const authContext = useAuthContext();
     const navigate = useNavigate();
+    const { user, setUser } = useAuthContext();
 
     const authUserActions = (
         <Panel extraStyles="inherit-background c-papyrus uppercase flexrow">
@@ -41,11 +41,12 @@ const Welcome = () => {
 
             <Panel extraStyles="inherit-background c-papyrus uppercase">
                 <h2>Build Shopping Lists Directly from Your Recipes</h2>
+                <button onClick={checkCredientials}></button>
             </Panel>
 
             <Divider />
 
-            { authContext && authContext.user ? authUserActions : callToRegister }
+            { user ? authUserActions : callToRegister }
         </Page>
     )
 }

client/src/components/ui/Navbar/index.tsx

@@ -8,13 +8,17 @@ import "/src/sass/components/Navbar.scss";
 const Navbar: FC<{receiveChange: (change: IUser) => void}> = ({ receiveChange }) => {
     // setup and local state
     const navigate = useNavigate();
-    const authContext = useAuthContext();
+    const { user, setUser } = useAuthContext();
     const [received, setReceived] = useState<IUser | undefined>();
     const [displayed, setDisplayed] = useState<JSX.Element>();
 
     // lift and store state from navbar variants
     const liftChange = useCallback((newValue: IUser | undefined) => {
-        authContext.user = newValue;
+        if (!newValue) {
+            return;
+        }
+        
+        setUser(newValue);
         setReceived(newValue);
     }, [])
 
@@ -26,8 +30,8 @@ const Navbar: FC<{receiveChange: (change: IUser) => void}> = ({ receiveChange })
 
     // side effects for live rendering
     useEffect(() => {
-        authContext && setReceived(authContext.user);
+        user && setReceived(user);
-    }, [authContext])
+    }, [user])
 
     useEffect(() => {
         if (received) receiveChange(received);

client/src/components/ui/Page.tsx

@@ -1,3 +1,6 @@
+import { useEffect } from "react";
+import { useAuthContext } from "../../context/AuthContext";
+import { checkCredientials } from "../../util/apiUtils";
 import { PageComponent } from "../../util/types"
 import Navbar from "./Navbar";
 import "/src/sass/components/Page.scss";

client/src/context/AuthContext.tsx

@@ -3,10 +3,12 @@ import { IUser } from "../schemas";
 
 export interface IAuthContext {
     user?: IUser
+    setUser: Dispatch<SetStateAction<IUser>> | VoidFunction
 }
 
 export const defaultValue: IAuthContext = {
-    user: undefined
+    user: undefined,
+    setUser: () => {}
 }
 
 export const AuthContext = createContext<IAuthContext>(defaultValue);

client/src/util/Protect.tsx

@@ -4,7 +4,7 @@ import Divider from "../components/ui/Divider";
 import { useAuthContext } from "../context/AuthContext";
 import { ProtectPortal } from "./types";
 
-const Protect: ProtectPortal = ({ children }) => {
+const Protect: ProtectPortal = ({ children, redirect = '' }) => {
     const { user } = useAuthContext();
     const navigate = useNavigate();
 
@@ -15,7 +15,7 @@ const Protect: ProtectPortal = ({ children }) => {
                     <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>
+                    <Button onClick={() => navigate(redirect ? `/login?redirect=${redirect}` : '/login')}>Log In</Button>
                 </div>
             </Page>
         )

client/src/util/apiUtils.tsx

@@ -1,11 +1,8 @@
 import { ICollection, IUser, IUserAuth } from "../schemas";
-import { IAuthContext } from "../context/AuthContext";
+// import { IAuthContext } from "../context/AuthContext";
 import axios from "axios";
 const API = import.meta.env.APISTRING || "http://localhost:8080";
 
-axios.defaults.withCredentials = false;
-axios.defaults.headers['Content-Type'] = 'application/json';
-
 export const getBaseAPI = async () => {
     return fetch(API);
 }
@@ -26,14 +23,26 @@ export const checkCredientials = async () => {
 
 export const attemptLogin = async (data: IUserAuth) => {
     try {
-        const response = await axios({
+        const response = await fetch(API + '/auth/login', {
+            body: JSON.stringify(data),
             method: "POST",
-            url: API + '/auth/login',
+            headers: {
-            data: data
+                'Content-Type': "application/json"
+            }
         });
 
-        const result = Promise.resolve(response.data);
+        const json = await response.json();
-        return result;
+        console.log(json);
+        return json;
+        
+        // const response = await axios({
+        //     method: "POST",
+        //     url: API + '/auth/login',
+        //     data: data
+        // });
+
+        // const result = Promise.resolve(response.data);
+        // return result;
     } catch (e: any) {
         throw e;
     }
@@ -72,9 +81,11 @@ export const createNewCollection = async (body: ICollection) => {
         const response = await axios({
             method: "POST",
             url: API + '/collection',
-            data: body
+            data: JSON.stringify(body)
         })
 
+        console.log(response);
+
         return Promise.resolve(response.data);
     } catch (e: any) {
         throw e;

client/src/util/types.ts

@@ -4,7 +4,7 @@ import { Form } from "../components/ui";
 import { IUser } from "../schemas";
 
 export interface PortalBase {
-    children?: ReactNode
+    children?: ReactNode | ReactNode[]
     extraStyles?: string
 }
 
@@ -14,8 +14,8 @@ interface ButtonParams extends PortalBase {
     disabledText?: string
 }
 
-export interface MultiChildPortal extends PortalBase {
+export interface ProtectParams extends PortalBase {
-    children?: ReactNode | ReactNode[]
+    redirect?: string
 }
 
 interface UserCardProps extends PortalBase {
@@ -43,7 +43,7 @@ interface CheckboxProps {
 export type PageComponent = FC<PortalBase>
 export type PanelComponent = FC<PortalBase>
 export type ButtonComponent = FC<ButtonParams>
-export type ProtectPortal = FC<MultiChildPortal>
+export type ProtectPortal = FC<ProtectParams>
 export type UserCardType = FC<UserCardProps>
 export type NavbarType = FC<NavbarProps>
 export type CheckboxType = FC<CheckboxProps>

server/auth/index.ts

@@ -3,6 +3,8 @@ import { User } from "../models/user";
 import createError from "http-errors";
 import bcrypt from "bcrypt";
 import now from "../util/now";
+import ControllerResponse from "../util/ControllerResponse";
+import { StatusCode } from "../util/types";
 
 const UserInstance = new User();
 
@@ -46,13 +48,13 @@ export default class AuthService {
         const { email, password } = data;
 
         try {
-            const user = await UserInstance.getOneByEmail(email);
+            const response: IUser = await UserInstance.getOneByEmail(email);
-            if (!user) return { ok: false, user: null }
+            const match = await bcrypt.compare(password, response.password!);
-            const match = await bcrypt.compare(password, user.password);
+            const user = match ? response : null;
-            return {
+            const code = match ? StatusCode.OK : StatusCode.Forbidden;
-                ok: match,
+
-                user: match ? user : null
+            return new ControllerResponse(code, user, match);
-            }
+
         } catch (e: any) {
             throw new Error(e);
         }

server/auth/middlewares.ts

@@ -1,8 +1,12 @@
-import { NextFunction, Request, Response } from "express"
+import e, { NextFunction, Request, Response } from "express"
+import ControllerResponse from "../util/ControllerResponse";
 import { StatusCode } from "../util/types";
 
 export function restrictAccess(req: Request, res: Response, next: NextFunction) {
-    if (req.isAuthenticated()) {
+    if (req.session.user == undefined) {
+        console.log("restricted")
+        res.send(undefined);
+    } else {
         next();
     }
 }

server/controllers/RecipeCtl.ts

@@ -5,7 +5,7 @@ import { StatusCode } from "../util/types";
 const RecipeInstance = new Recipe();
 
 export default class RecipeCtl {
-    async getOne(id: string) {
+    async getOne(id: number) {
         try {
             const result = await RecipeInstance.getOneByID(id);
             const ok = result !== null;
@@ -16,7 +16,7 @@ export default class RecipeCtl {
         }
     }
 
-    async getAllAuthored(id: string) {
+    async getAllAuthored(id: number) {
         try {
             const result = await RecipeInstance.getAllAuthored(id);
             const ok = result !== null;
@@ -27,7 +27,7 @@ export default class RecipeCtl {
         }
     }
 
-    async getAllAccessible(id: string) {
+    async getAllAccessible(id: number) {
         try {
             const result = await RecipeInstance.getAllAccessible(id);
             const code = result !== null ? StatusCode.OK : StatusCode.NotFound;
@@ -37,7 +37,7 @@ export default class RecipeCtl {
         }
     }
 
-    async updateOne(id: string, data: IRecipe) {
+    async updateOne(id: number, data: IRecipe) {
         try {
             const result = await RecipeInstance.updateOneByID(id, data);
             const ok = result !== null;
@@ -48,7 +48,7 @@ export default class RecipeCtl {
         }
     }
 
-    async post(userid: string, data: IRecipe) {
+    async post(userid: number, data: IRecipe) {
         try {
             const result = await RecipeInstance.post(userid, data);
             const ok = result !== null;

server/loaders/express.ts

@@ -5,6 +5,13 @@ import morgan from 'morgan';
 import cors from 'cors';
 import session from 'express-session';
 import pgSessionStore from '../db/sessionStore';
+import { IUser } from '../schemas';
+
+declare module "express-session" {
+    interface SessionData {
+        user: IUser
+    }
+}
 
 export const expressLoader = async (app: Express) => {
     app.use(cors({
@@ -25,8 +32,10 @@ export const expressLoader = async (app: Express) => {
         res.cookie('name', 'express').send('cookie set');
     })
 
+    const secret = process.env.SESSIONSECRET as string;
+
     app.use(session({
-        secret: process.env.SESSIONSECRET || "",
+        secret: secret,
         cookie: {
             maxAge: 8 * 60 * 60 * 1000,
             secure: false

server/models/recipe.ts

@@ -7,7 +7,7 @@ import { CtlResponse } from "../util/types";
 const CollectionInstance = new CollectionCtl();
 
 export class Recipe {
-    async getOneByID(id: string) {
+    async getOneByID(id: number) {
         try {
             const statement = `SELECT * FROM recipin.recipe WHERE id = $1`;
             const values = [id];
@@ -19,7 +19,7 @@ export class Recipe {
         }
     }
 
-    async getAllAuthored(id: string) {
+    async getAllAuthored(id: number) {
         try {
             const statement = `SELECT * FROM recipin.recipe WHERE authoruserid = $1`;
             const result = await pool.query(statement, [id]);
@@ -30,7 +30,7 @@ export class Recipe {
         }
     }
 
-    async getAllAccessible(id: string) {
+    async getAllAccessible(id: number) {
         try {
             const statement = `
                 SELECT * FROM recipin.recipe
@@ -51,7 +51,7 @@ export class Recipe {
         }
     }
 
-    async fetchRecipesByCollection(collectionid: string) {
+    async fetchRecipesByCollection(collectionid: number) {
         try {
             
         } catch (e: any) {
@@ -59,7 +59,7 @@ export class Recipe {
         }
     }
 
-    async updateOneByID(id: string, data: IRecipe) {
+    async updateOneByID(id: number, data: IRecipe) {
         const { name, description, preptime } = data;
         try {
             const statement = `
@@ -79,7 +79,7 @@ export class Recipe {
         }
     }
 
-    async post(userid: string, data: IRecipe) {
+    async post(userid: number, data: IRecipe) {
         const { name, description, preptime } = data;
 
         try {

server/routes/auth.ts

@@ -6,19 +6,32 @@ import { UserCtl } from "../controllers";
 import now from "../util/now";
 import { restrictAccess } from "../auth/middlewares";
 import { Session } from "express-session";
+import ControllerResponse from "../util/ControllerResponse";
 const AuthInstance = new AuthService();
-const UserControl = new UserCtl();
+const UserInstance = new UserCtl();
 
 const router = Router();
 
 export const authRoute = (app: Express, passport: PassportStatic) => {
     app.use('/auth', router);
 
-    router.get('/', restrictAccess, (req, res, next) => {
+    // router.use((req, res, next) => {
-        if (!req.user) res.send({ user: undefined });
+    //     console.log(req.isAuthenticated());
+    //     console.log(req.session.user);
+    //     console.log(req.cookies);
+    //     console.log();
 
-        // @ts-ignore: does not recognize structure of req.user
+    //     next();
-        const { user } = req.user;
+    // })
+
+    router.use((req, res, next) => {
+        console.log(req.session);
+        next();
+    })
+
+    router.get('/', restrictAccess, (req, res, next) => {
+        if (req.session.user) {
+            const user = req.session.user;
             const userData = {
                 id: user.id,
                 firstname: user.firstname,
@@ -27,6 +40,9 @@ export const authRoute = (app: Express, passport: PassportStatic) => {
                 email: user.email
             }
             res.send({ user: userData });
+        } else {
+            res.send({ user: undefined })
+        }
     })
 
     router.get('/protected', restrictAccess, (req, res, next) => {
@@ -36,15 +52,24 @@ export const authRoute = (app: Express, passport: PassportStatic) => {
     router.post('/login', passport.authenticate('local'), async (req, res, next) => {
         try {
             const data: IUserAuth = req.body;
-            const response = await AuthInstance.login(data);
+            console.log(data);
+
+            const response: ControllerResponse<any> = await AuthInstance.login(data);
 
             if (response.ok) {
-                req.logIn(response.user, (error: any) => {
+                const user = response.data as IUser;
-                    if (error) throw error;
+
-                    console.log('login successful');
+                req.session.regenerate((err) => {
+                    if (err) next(err);
+                    req.session.user = user;
+
+                    req.session.save((err) => {
+                        if (err) return next(err);
+                    })
                 })
 
-                res.cookie('userid', response.user.id, { maxAge: 1000 * 60 * 60 * 24 });
+                res.cookie('userid', user.id, { maxAge: 1000 * 60 * 60 * 24 });
+
                 res.send(response);
                 res.end();
             } else {

server/routes/collection.ts

@@ -43,7 +43,7 @@ export const collectionRoute = (app: Express) => {
     // router.get('/subscriptions', restrictAccess, async (req, res, next) => {
     //     res.send('sanity check');
     //     // // @ts-ignore
-    //     // const { user } = req.user;
+    //     // const { user } = req.session.user;
     //     // if (!user) return;
 
     //     // try {
@@ -56,7 +56,7 @@ export const collectionRoute = (app: Express) => {
 
     // router.post('/subscribe', restrictAccess, async (req, res, next) => {
     //     // @ts-ignore
-    //     const { user } = req.user;
+    //     const { user } = req.session.user;
     //     const { collection } = req.query;
 
     //     try {

server/routes/friend.ts

@@ -1,6 +1,7 @@
 import { Express, Router } from 'express';
 import { restrictAccess } from '../auth/middlewares';
 import { UserCtl } from '../controllers';
+import { IUser } from '../schemas';
 
 const UserInstance = new UserCtl();
 const router = Router();
@@ -8,12 +9,23 @@ const router = Router();
 export const friendRouter = (app: Express) => {
     app.use('/friend', router);
 
+    router.use((req, res, next) => {
+        let test = req.session.user;
+
+        if (req.session.user == undefined) {
+            throw new Error("No session found");
+        } else {
+            const narrowed = req.session.user;
+            next();
+        }
+    })
+
     router.post('/:targetid', restrictAccess, async (req, res, next) => {
-        const { user }: any = req.user;
+        const user = req.session.user as IUser;
         const { targetid } = req.params;
 
         try {
-            const { code, data } = await UserInstance.addFriendship(user.id, targetid);
+            const { code, data } = await UserInstance.addFriendship(user.id as number, targetid);
             res.status(code).send(data);
         } catch(e) {
             next(e);
@@ -22,15 +34,15 @@ export const friendRouter = (app: Express) => {
 
     // get all friendships for a user
     router.get('/', async (req, res, next) => {
-        const { user }: any = req.user;
+        const user = req.session.user as IUser;
         const { pending } = req.query;
 
         try {
             if (pending) {
-                const { code, data } = await UserInstance.getPendingFriendRequests(user.id);
+                const { code, data } = await UserInstance.getPendingFriendRequests(user.id as number);
                 res.status(code).send(data);
             } else {
-                const { code, data } = await UserInstance.getFriends(user.id);
+                const { code, data } = await UserInstance.getFriends(user.id as number);
                 res.status(code).send(data);
             }
         } catch(e) {
@@ -41,10 +53,10 @@ export const friendRouter = (app: Express) => {
     // get one friendship by its id
     router.get('/:id', async (req, res, next) => {
         const { id } = req.params;
-        const { user }: any = req.user;
+        const user = req.session.user as IUser;
 
         try {
-            const { code, data } = await UserInstance.getFriendshipByID(id, user.id);
+            const { code, data } = await UserInstance.getFriendshipByID(id, user.id as number);
             res.status(code).send(data);
         } catch(e) {
             next(e);
@@ -64,10 +76,10 @@ export const friendRouter = (app: Express) => {
     router.put('/:id', async (req, res, next) => {
         const data = req.body;
         const { id } = req.params;
-        const { user }: any = req.user;
+        const user = req.session.user as IUser;
 
         try {
-            const response = await UserInstance.updateFriendship(id, user.id, data);
+            const response = await UserInstance.updateFriendship(id, user.id as number, data);
             res.status(response.code).send(response.data);
         } catch(e) {
             next(e);

server/routes/recipe.ts

@@ -1,7 +1,7 @@
 import { Express, Router } from "express"
 import { restrictAccess } from "../auth/middlewares";
 import RecipeCtl from "../controllers/RecipeCtl";
-import { IRecipe } from "../schemas";
+import { IRecipe, IUser } from "../schemas";
 import { CtlResponse } from "../util/types";
 const recipectl = new RecipeCtl();
 
@@ -14,7 +14,7 @@ export const recipeRoute = (app: Express) => {
         const { id } = req.params;
 
         try {
-            const { code, data } = await recipectl.getOne(id);
+            const { code, data } = await recipectl.getOne(parseInt(id));
             res.status(code).send(data);
         } catch(e) {
             next(e);
@@ -22,17 +22,17 @@ export const recipeRoute = (app: Express) => {
     })
 
     router.get('/', restrictAccess, async (req, res, next) => {
-        const { user }: any = req.user;
+        const user = req.session.user as IUser;
         const { filterby } = req.query;
 
         try {
             let result: CtlResponse<IRecipe[] | string>;
             switch (filterby) {
                 case "myrecipes":
-                    result = await recipectl.getAllAuthored(user.id);
+                    result = await recipectl.getAllAuthored(user.id as number);
                     break;
                 default:
-                    result = await recipectl.getAllAccessible(user.id);
+                    result = await recipectl.getAllAccessible(user.id as number);
                     break;
             }
 
@@ -47,7 +47,7 @@ export const recipeRoute = (app: Express) => {
         const { id } = req.params;
 
         try {
-            const result: CtlResponse<IRecipe | string> = await recipectl.updateOne(id, data);
+            const result: CtlResponse<IRecipe | string> = await recipectl.updateOne(parseInt(id), data);
             res.status(result.code).send(result.data);
         } catch(e) {
             next(e);
@@ -55,11 +55,11 @@ export const recipeRoute = (app: Express) => {
     })
 
     router.post('/', restrictAccess, async (req, res, next) => {
-        const { user }: any = req.user;
+        const user = req.session.user as IUser;
         const data = req.body;
 
         try {
-            const result = await recipectl.post(user.id, data);
+            const result = await recipectl.post(user.id as number, data);
             res.status(result.code).send(result.data);
         } catch(e) {
             next(e);

server/routes/subscription.ts

@@ -9,7 +9,7 @@ export const subscriptionRoute = (app: Express) => {
 
     router.get('/', async (req, res, next) => {
         // @ts-ignore
-        const { user } = req.user;
+        const { user } = req.session.user;
         if (!user) return;
 
         try {
@@ -22,7 +22,7 @@ export const subscriptionRoute = (app: Express) => {
 
     router.post('/', restrictAccess, async (req, res, next) => {
         // @ts-ignore
-        const { user } = req.user;
+        const { user } = req.session.user;
         const { collection } = req.query;
 
         try {