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

Api with jwt #1

Merged
innocuous-symmetry merged 6 commits from api-with-jwt into main 2023-02-13 21:18:39 +00:00
Conversation 0 Commits 6 Files Changed 41 +122 -107
12 changed files with 122 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 90a5bdf128 - Show all commits

73
client/src/App.tsx
View File

@@ -1,11 +1,10 @@
// framework tools and custom utils
import { useCallback, useContext, useEffect, useState } from 'react';
import { useEffect } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { AuthContext, IAuthContext, useAuthContext } from './context/AuthContext';
import { attemptLogout, checkCredientials } from './util/apiUtils';
import { IUser } from './schemas';
import { useAuthContext } from './context/AuthContext';
import jwtDecode from 'jwt-decode';
// pages, ui, styles
// pages, ui, components, styles
import Subscriptions from './components/pages/Subscriptions/Subscriptions';
import Browser from './components/ui/Browser';
import Collection from './components/pages/Collection';
@@ -19,55 +18,41 @@ import CollectionBrowser from './components/pages/CollectionBrowser';
import { Navbar } from './components/ui';
import GroceryList from './components/pages/GroceryList';
import GroceryListCollection from './components/pages/GroceryListCollection';
import { TokenType } from './util/types';
import './sass/App.scss';
function App() {
const [user, setUser] = useState<any>();
const parentState = { user, setUser };
const receiveChange = (() => {});
const { setUser, setToken } = useAuthContext();
useEffect(() => {
const wrapper = async () => {
try {
const result: IAuthContext | undefined = await checkCredientials();
if (result == undefined) {
setUser({ user: undefined });
} else {
setUser(result);
}
} catch(e) {
console.error(e);
}
if (document.cookie) {
const extractedToken: Partial<TokenType> = jwtDecode(document.cookie.split("=")[1]);
setToken(document.cookie.split("=")[1]);
setUser(extractedToken.user);
}
wrapper();
}, [])
}, []);
return (
<BrowserRouter>
<AuthContext.Provider value={ parentState }>
<div className="App">
<Navbar receiveChange={receiveChange} />
<Routes>
<Route path="/" element={<Welcome />} />
<Route path="/register" element={<Register receiveChange={receiveChange} />} />
<Route path="/login" element={<Login />} />
<Route path="/profile" element={<Profile />} />
<Route path="/collections" element={<CollectionBrowser />} />
<Route path="/collections/:id" element={<Collection />} />
<Route path="/explore" element={<Browser header="" searchFunction={() => {}} />} />
<Route path="/recipe/:id" element={<Recipe />} />
<Route path="/subscriptions" element={<Subscriptions />} />
<Route path="/subscriptions/:id" element={<Collection />} />
<div className="App">
<Navbar />
<Routes>
<Route path="/" element={<Welcome />} />
<Route path="/register" element={<Register />} />
<Route path="/login" element={<Login />} />
<Route path="/profile" element={<Profile />} />
<Route path="/collections" element={<CollectionBrowser />} />
<Route path="/collections/:id" element={<Collection />} />
<Route path="/explore" element={<Browser header="" searchFunction={() => {}} />} />
<Route path="/recipe/:id" element={<Recipe />} />
<Route path="/subscriptions" element={<Subscriptions />} />
<Route path="/subscriptions/:id" element={<Collection />} />
<Route path="/add-recipe" element={<AddRecipe />} />
<Route path="/grocery-list" element={<GroceryListCollection />} />
<Route path="/grocery-list/:id" element={<GroceryList />} />
</Routes>
</div>
</AuthContext.Provider>
<Route path="/add-recipe" element={<AddRecipe />} />
<Route path="/grocery-list" element={<GroceryListCollection />} />
<Route path="/grocery-list/:id" element={<GroceryList />} />
</Routes>
</div>
</BrowserRouter>
)
}

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

@@ -1,10 +1,10 @@
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 { useNavigate, useParams } from "react-router-dom";
import { IUser, IUserAuth } from "../../schemas";
import { Button, Form, Page, Panel } from "../ui";
import { FormConfig } from "../ui/Form";
import API from "../../util/API";
export default function Login() {
const params = new URLSearchParams(window.location.search);
@@ -24,9 +24,12 @@ export default function Login() {
const handleLogin = async () => {
if (!input.email || !input.password) return;
const { data, ok } = await attemptLogin(input);
if (ok) setUser(data);
navigate(`/${redirect ?? ''}`);
const result = await new API.Auth().login(input);
console.log(result);
// const { data, ok } = await attemptLogin(input);
// if (ok) setUser(data);
// navigate(`/${redirect ?? ''}`);
}
// check for logged in user and mount form

5
client/src/components/pages/Register/collection.tsx
View File

@@ -6,7 +6,7 @@ import { attemptLogin, createNewCollection } from "../../../util/apiUtils";
import { Button, Divider, Page, Panel } from "../../ui";
import TextField from "../../ui/TextField";
const InitialCollection: RegisterVariantType = ({ transitionDisplay, receiveChange, input }) => {
const InitialCollection: RegisterVariantType = ({ transitionDisplay, input }) => {
const [collectionName, setCollectionName] = useState<string>();
const [view, setView] = useState<JSX.Element>(<Page><h1>Loading...</h1></Page>);
const [user, setUser] = useState<IUser>();
@@ -45,8 +45,7 @@ const InitialCollection: RegisterVariantType = ({ transitionDisplay, receiveChan
}
useEffect(() => {
if (user && receiveChange) {
receiveChange(user);
if (user) {
setView(
<Page>
<h1>Hi, {user.firstname}! Great to meet you.</h1>

10
client/src/components/pages/Register/index.tsx
View File

@@ -19,17 +19,17 @@ export enum VariantLabel {
FinishUp
}
const Register: FC<{receiveChange: (change: IUser) => void}> = ({ receiveChange }) => {
const Register = () => {
const [displayed, setDisplayed] = useState<JSX.Element>();
const authContext = useAuthContext();
const { user } = useAuthContext();
const transitionDisplay = (variant: number | VariantLabel, user?: IUser) => {
const transitionDisplay = (variant: number | VariantLabel) => {
switch (variant) {
case 0:
setDisplayed(<AboutYou transitionDisplay={transitionDisplay} />);
break;
case 1:
setDisplayed(<InitialCollection transitionDisplay={transitionDisplay} input={user} receiveChange={receiveChange} />);
setDisplayed(<InitialCollection transitionDisplay={transitionDisplay} input={user} />);
break;
case 2:
setDisplayed(<AddFriends transitionDisplay={transitionDisplay} input={user} />);
@@ -38,7 +38,7 @@ const Register: FC<{receiveChange: (change: IUser) => void}> = ({ receiveChange
setDisplayed(<FinishUp transitionDisplay={transitionDisplay} />);
break;
default:
setDisplayed(<AboutYou transitionDisplay={transitionDisplay} input={authContext.user || user} />);
setDisplayed(<AboutYou transitionDisplay={transitionDisplay} input={user} />);
break;
}
}

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

@@ -1,44 +1,25 @@
import { FC, useCallback, useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { useEffect, useState } from "react";
import { LoggedIn, NotLoggedIn, Registering } from "./variants";
import { useAuthContext } from "../../../context/AuthContext";
import { IUser } from "../../../schemas";
import "/src/sass/components/Navbar.scss";
const Navbar: FC<{receiveChange: (change: IUser) => void}> = ({ receiveChange }) => {
const Navbar = () => {
// setup and local state
const navigate = useNavigate();
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) => {
if (!newValue) {
return;
}
setUser(newValue);
setReceived(newValue);
}, [])
const { user } = useAuthContext();
const [displayed, setDisplayed] = useState<JSX.Element>(<p>Loading...</p>);
const variants = {
loggedin: <LoggedIn navigate={navigate} received={received} liftChange={liftChange} />,
notloggedin: <NotLoggedIn navigate={navigate} received={received} />,
registering: <Registering navigate={navigate} received={received} />
loggedin: <LoggedIn />,
notloggedin: <NotLoggedIn />,
registering: <Registering />
}
// side effects for live rendering
useEffect(() => {
user && setReceived(user);
}, [user])
setDisplayed(user ? variants.loggedin : variants.notloggedin);
}, [user]);
useEffect(() => {
if (received) receiveChange(received);
setDisplayed(received ? variants.loggedin : variants.notloggedin);
}, [received, setReceived]);
return displayed || <p>Loading...</p>;
return displayed;
}
export default Navbar;

34
client/src/components/ui/Navbar/variants.tsx
View File

@@ -1,15 +1,26 @@
import { attemptLogout } from "../../../util/apiUtils";
import API from "../../../util/API";
import { NavbarType } from "../../../util/types";
import { Button, Dropdown } from '../.'
import { Button, Dropdown } from '..'
import { useState } from "react";
import { useAuthContext } from "../../../context/AuthContext";
import { useNavigate } from "react-router-dom";
const LoggedIn = () => {
const { user, setUser, setToken } = useAuthContext();
const navigate = useNavigate();
const auth = new API.Auth();
const LoggedIn: NavbarType = ({ received, liftChange, navigate }) => {
const [dropdownActive, setDropdownActive] = useState(false);
const [searchActive, setSearchActive] = useState(false);
const handleLogout = async () => {
const success = await attemptLogout();
if (success) liftChange!(undefined);
const success = await auth.logout();
console.log(success);
// nullify cookie and unset user/token data
document.cookie = `token=;expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
setUser(undefined);
setToken(undefined);
navigate('/');
}
@@ -36,7 +47,7 @@ const LoggedIn: NavbarType = ({ received, liftChange, navigate }) => {
<a onClick={() => navigate('/')}>RECIPIN</a>
</div>
<div className="navbar-block">
<p>Hi, {received?.firstname}.</p>
<p>Hi, {user?.firstname}.</p>
<span id="search-icon"></span>
<Button onClick={() => handleUIChange("SEARCH")}>Search</Button>
<Button onClick={() => handleUIChange("ACTIONS")}>Actions</Button>
@@ -64,7 +75,9 @@ const LoggedIn: NavbarType = ({ received, liftChange, navigate }) => {
)
}
const NotLoggedIn: NavbarType = ({ navigate }) => {
const NotLoggedIn = () => {
const navigate = useNavigate();
return (
<div id="navbar">
<div className="navbar-block">
@@ -77,14 +90,17 @@ const NotLoggedIn: NavbarType = ({ navigate }) => {
)
}
const Registering: NavbarType = ({ received, navigate }) => {
const Registering = () => {
const { user } = useAuthContext();
const navigate = useNavigate();
return (
<div id="navbar">
<div className="navbar-block">
<a onClick={() => navigate('/')}>RECIPIN</a>
</div>
<div className="navbar-block">
<p>Hi, {received?.firstname}.</p>
<p>Hi, {user?.firstname}.</p>
</div>
</div>
)

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

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

18
client/src/context/AuthProvider.tsx Normal file
View File

@@ -0,0 +1,18 @@
import { FC, Provider, ReactPortal, useEffect, useState } from "react"
import { IUser } from "../schemas";
import { AuthContext, IAuthContext } from "./AuthContext";
const AuthProvider = ({ children }: any) => {
const [user, setUser] = useState<IUser>();
const [token, setToken] = useState<string>();
const value = { user, setUser, token, setToken }
return (
<AuthContext.Provider value={ value }>
{ children }
</AuthContext.Provider>
)
}
export default AuthProvider;

9
client/src/main.tsx
View File

@@ -1,6 +1,13 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import AuthProvider from './context/AuthProvider'
import './sass/index.scss'
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(<App />)
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<AuthProvider>
<React.StrictMode>
<App />
</React.StrictMode>
</AuthProvider>
)

6
client/src/util/API.ts
View File

@@ -2,7 +2,7 @@ import { AxiosHeaders, AxiosRequestHeaders } from "axios";
import { IUser, IUserAuth, IFriendship, IRecipe, IIngredient, ICollection, IGroceryList } from "../schemas";
import { default as _instance } from "./axiosInstance";
export module API {
module API {
const APISTRING = import.meta.env.APISTRING || "http://localhost:8080";
abstract class RestController<T> {
@@ -149,4 +149,6 @@ export module API {
super(APISTRING + "/app/grocery-list")
}
}
}
}
export default API

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

@@ -10,13 +10,9 @@ const instance = axios.create({
instance.interceptors.response.use((res: AxiosResponse<any,any>) => {
if (res?.data.token) {
document.cookie = `token=${res.data.token}`;
return res;
} else {
console.error("Token was not found in response");
return res;
}
return res;
}, (err) => {
return Promise.reject(err);
})

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

@@ -46,4 +46,8 @@ export type ButtonComponent = FC<ButtonParams>
export type ProtectPortal = FC<ProtectParams>
export type UserCardType = FC<UserCardProps>
export type NavbarType = FC<NavbarProps>
export type CheckboxType = FC<CheckboxProps>
export type CheckboxType = FC<CheckboxProps>
export interface TokenType {
user: IUser
}