innocuous-symmetry/recipe-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

diagnosing problem with session storage

Browse Source
This commit is contained in:
Mikayla Dobson
2023-01-13 21:26:56 -06:00
parent 3831f110a3
commit 7aa5e80d4d
20 changed files with 181 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
client/src/App.tsx
View File

@@ -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 authContext = useAuthContext();
const [user, setUser] = useState<any>();
const parentState = { user, setUser };
const receiveChange = useCallback((change: IUser) => {
console.log(change);
authContext.user = change;
}, [])
const receiveChange = (() => {});
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>

19
client/src/components/pages/Login.tsx
View File

@@ -1,13 +1,16 @@
import { useCallback, useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { useAuthContext } from "../../context/AuthContext";
import { useCallback, useContext, useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
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);
authContext.user = result.user;
navigate('/');
const { data, ok } = await attemptLogin(input);
if (ok) setUser(data);
navigate(`/${redirect ?? ''}`);
}
// check for logged in user and mount form
useEffect(() => {
if (authContext.user) navigate('/');
if (user) navigate('/');
setForm(
new Form<IUserAuth>({
parent: 'login',

2
client/src/components/pages/Profile.tsx
View File

@@ -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>

7
client/src/components/pages/Welcome.tsx
View File

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

12
client/src/components/ui/Navbar/index.tsx
View File

@@ -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);
}, [authContext])
user && setReceived(user);
}, [user])
useEffect(() => {
if (received) receiveChange(received);

3
client/src/components/ui/Page.tsx
View File

@@ -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";

4
client/src/context/AuthContext.tsx
View File

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

4
client/src/util/Protect.tsx
View File

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

31
client/src/util/apiUtils.tsx
View File

@@ -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',
data: data
headers: {
'Content-Type': "application/json"
}
});
const result = Promise.resolve(response.data);
return result;
const json = await response.json();
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;

8
client/src/util/types.ts
View File

@@ -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 {
children?: ReactNode | ReactNode[]
export interface ProtectParams extends PortalBase {
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>

16
server/auth/index.ts
View File

@@ -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);
if (!user) return { ok: false, user: null }
const match = await bcrypt.compare(password, user.password);
return {
ok: match,
user: match ? user : null
}
const response: IUser = await UserInstance.getOneByEmail(email);
const match = await bcrypt.compare(password, response.password!);
const user = match ? response : null;
const code = match ? StatusCode.OK : StatusCode.Forbidden;
return new ControllerResponse(code, user, match);
} catch (e: any) {
throw new Error(e);
}

8
server/auth/middlewares.ts
View File

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

10
server/controllers/RecipeCtl.ts
View File

@@ -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;

11
server/loaders/express.ts
View File

@@ -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

12
server/models/recipe.ts
View File

@@ -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 {

61
server/routes/auth.ts
View File

@@ -6,27 +6,43 @@ 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) => {
if (!req.user) res.send({ user: undefined });
// router.use((req, res, next) => {
// console.log(req.isAuthenticated());
// console.log(req.session.user);
// console.log(req.cookies);
// console.log();
// @ts-ignore: does not recognize structure of req.user
const { user } = req.user;
const userData = {
id: user.id,
firstname: user.firstname,
lastname: user.lastname,
handle: user.handle,
email: user.email
// next();
// })
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,
lastname: user.lastname,
handle: user.handle,
email: user.email
}
res.send({ user: userData });
} else {
res.send({ user: undefined })
}
res.send({ user: userData });
})
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) => {
if (error) throw error;
console.log('login successful');
const user = response.data as IUser;
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 {

4
server/routes/collection.ts
View File

@@ -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 {

30
server/routes/friend.ts
View File

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

16
server/routes/recipe.ts
View File

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

4
server/routes/subscription.ts
View File

@@ -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 {