Updated dependencies

README.md

@@ -39,7 +39,7 @@ docker-compose up --build
 To set up this template in development mode:
 
 1. Ensure mariadb is running in your development environment
-2. Run `mariadb sql/create_database.sql` as the root user
+2. Run `mariadb tools/create_database.sql` as the root user
 3. Run `npm install`
 4. Run `cp .envdev .env` and enter your details into the `.env` file
 5. Execute `npm run dev`
@@ -56,6 +56,7 @@ To set up this template in development mode:
 	- Account deletion
 	- Password management
 	- JSON web token authentication
+	- HttpOnly cookies for security
 	- Optional post validation hook
 - Fully Featured News Blog (as a microservice)
 	- Publish, edit or delete articles as needed

client/client.jsx

@@ -2,14 +2,16 @@
 import 'regenerator-runtime/runtime';
 
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 
 import App from './pages/app';
 import TokenProvider from './pages/utilities/token-provider';
 
-ReactDOM.render(
-	<TokenProvider>
-		<App />
-	</TokenProvider>,
-	document.querySelector('#root')
-);
+ReactDOM
+	.createRoot(document.getElementById('root'))
+	.render(
+		<TokenProvider>
+			<App />
+		</TokenProvider>
+	)
+;

client/pages/accounts/account.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useContext, useRef } from 'react';
-import { Link, Redirect } from 'react-router-dom';
+import { Link, Navigate } from 'react-router-dom';
 
 import ApplyToBody from '../utilities/apply-to-body';
 
@@ -13,7 +13,7 @@ const Account = props => {
 
 	//misplaced?
 	if (!authTokens.accessToken) {
-		return <Redirect to='/' />;
+		return <Navigate to='/' />;
 	}
 
 	//refs
@@ -23,9 +23,7 @@ const Account = props => {
 
 	//grab the user's info
 	useEffect(() => {
-		authTokens.tokenFetch(`${process.env.AUTH_URI}/auth/account`, {
-			method: 'GET'
-		})
+		authTokens.tokenFetch(`${process.env.AUTH_URI}/auth/account`)
 			.then(blob => blob.json())
 			.then(json => contactRef.current.checked = json.contact)
 			.catch(e => console.error(e))

client/pages/accounts/login.jsx

@@ -1,5 +1,5 @@
 import React, { useContext, useRef } from 'react';
-import { Link, Redirect } from 'react-router-dom';
+import { Link, Navigate } from 'react-router-dom';
 
 import ApplyToBody from '../utilities/apply-to-body';
 
@@ -13,7 +13,7 @@ const Login = props => {
 
 	//misplaced?
 	if (authTokens.accessToken) {
-		return <Redirect to='/' />;
+		return <Navigate to='/' />;
 	}
 
 	//refs
@@ -31,17 +31,16 @@ const Login = props => {
 							async evt => {
 								//on submit
 								evt.preventDefault();
-								const [err, newTokens] = await handleSubmit(emailRef.current.value, passwordRef.current.value);
+								const [err, accessToken] = await handleSubmit(emailRef.current.value, passwordRef.current.value);
 								if (err) {
 									alert(err);
 								}
 
 								//save auth tokens and redirect
-								if (newTokens) {
-									authTokens.setAccessToken(newTokens.accessToken);
-									authTokens.setRefreshToken(newTokens.refreshToken);
+								if (accessToken) {
+									authTokens.setAccessToken(accessToken);
 
-									props.history.push('/');
+									return <Navigate to='/' />;
 								}
 							}
 						}>
@@ -77,7 +76,8 @@ const handleSubmit = async (email, password) => {
 		body: JSON.stringify({
 			email,
 			password,
-		})
+		}),
+		credentials: 'include'
 	});
 
 	//handle errors
@@ -88,8 +88,8 @@ const handleSubmit = async (email, password) => {
 	}
 
 	//return the new auth tokens
-	const newTokens = await result.json();
-	return [null, newTokens];
+	const accessToken = await result.text();
+	return [null, accessToken];
 };
 
 //returns an error message, or null on success

client/pages/accounts/panels/delete-account.jsx

@@ -51,13 +51,7 @@ const handleSubmit = async (password, authTokens) => {
 
 	//force a logout
 	const result2 = await authTokens.tokenFetch(`${process.env.AUTH_URI}/auth/logout`, {
-		method: 'DELETE',
-		headers: {
-			'Content-Type': 'application/json'
-		},
-		body: JSON.stringify({
-			token: authTokens.refreshToken
-		})
+		method: 'DELETE'
 	});
 
 	if (!result2.ok) {
@@ -65,7 +59,6 @@ const handleSubmit = async (password, authTokens) => {
 	}
 
 	authTokens.setAccessToken('');
-	authTokens.setRefreshToken('');
 
 	return [null];
 };

client/pages/accounts/panels/logout.jsx

@@ -12,13 +12,7 @@ const Logout = () => {
 			{ /* Logout logs you out of the server too */ }
 			<Link to='/' onClick={async () => {
 				const result = await authTokens.tokenFetch(`${process.env.AUTH_URI}/auth/logout`, { //NOTE: this gets overwritten as a bugfix
-					method: 'DELETE',
-					headers: {
-						'Content-Type': 'application/json'
-					},
-					body: JSON.stringify({
-						token: authTokens.refreshToken
-					})
+					method: 'DELETE'
 				});
 
 				//any problems?
@@ -26,7 +20,6 @@ const Logout = () => {
 					console.error(await result.text());
 				} else {
 					authTokens.setAccessToken('');
-					authTokens.setRefreshToken('');
 				}
 			}}>Logout</Link>
 		</>

client/pages/accounts/recover.jsx

@@ -1,5 +1,5 @@
 import React, { useContext, useRef } from 'react';
-import { Link, Redirect } from 'react-router-dom';
+import { Link, Navigate } from 'react-router-dom';
 
 import ApplyToBody from '../utilities/apply-to-body';
 
@@ -14,7 +14,7 @@ const Recover = props => {
 
 	//misplaced?
 	if (authTokens.accessToken) {
-		return <Redirect to='/' />;
+		return <Navigate to='/' />;
 	}
 
 	//refs

client/pages/accounts/reset.jsx

@@ -1,5 +1,5 @@
 import React, { useContext, useRef } from 'react';
-import { Link, Redirect } from 'react-router-dom';
+import { Link, Navigate } from 'react-router-dom';
 import queryString from 'query-string';
 
 import ApplyToBody from '../utilities/apply-to-body';
@@ -15,7 +15,7 @@ const Reset = props => {
 
 	//misplaced?
 	if (authTokens.accessToken || !query.email || !query.token) {
-		return <Redirect to='/' />;
+		return <Navigate to='/' />;
 	}
 
 	//refs

client/pages/accounts/signup.jsx

@@ -1,5 +1,5 @@
 import React, { useContext, useRef } from 'react';
-import { Link, Redirect } from 'react-router-dom';
+import { Link, Navigate } from 'react-router-dom';
 
 import ApplyToBody from '../utilities/apply-to-body';
 
@@ -15,7 +15,7 @@ const Signup = props => {
 
 	//misplaced?
 	if (authTokens.accessToken) {
-		return <Redirect to='/' />;
+		return <Navigate to='/' />;
 	}
 
 	//refs

client/pages/administration/admin.jsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { Link, Redirect } from 'react-router-dom';
+import { Link, Navigate } from 'react-router-dom';
 
 import ApplyToBody from '../utilities/apply-to-body';
 
@@ -14,7 +14,7 @@ const Admin = props => {
 
 	//misplaced? (admin only)
 	if (!authTokens.accessToken || !authTokens.getPayload().admin) {
-		return <Redirect to='/' />;
+		return <Navigate to='/' />;
 	}
 
 	return (

client/pages/administration/mod.jsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { Link, Redirect } from 'react-router-dom';
+import { Link, Navigate } from 'react-router-dom';
 
 import ApplyToBody from '../utilities/apply-to-body';
 
@@ -17,7 +17,7 @@ const Mod = props => {
 
 	//misplaced? (admin only)
 	if (!authTokens.accessToken || !(authTokens.getPayload().admin || authTokens.getPayload().mod)) {
-		return <Redirect to='/' />;
+		return <Navigate to='/' />;
 	}
 
 	return (

client/pages/administration/panels/news-editor.jsx

@@ -18,12 +18,7 @@ const NewsEditor = props => {
 
 	//run once
 	useEffect(async () => {
-		const result = await fetch(`${process.env.NEWS_URI}/news/metadata?limit=999`, {
-			method: 'GET',
-			headers: {
-				'Content-Type': 'application/json'
-			},
-		});
+		const result = await fetch(`${process.env.NEWS_URI}/news/metadata?limit=999`);
 
 		if (!result.ok) {
 			const err = `${result.status}: ${await result.text()}`;

client/pages/app.jsx

@@ -1,11 +1,8 @@
 //react
-import React, { useContext } from 'react';
-import { BrowserRouter, Switch } from 'react-router-dom';
+import React, { useContext, Suspense, lazy } from 'react';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { TokenContext } from './utilities/token-provider';
 
-//library components
-import LazyRoute from './utilities/lazy-route';
-
 //styling
 import '../styles/styles.css';
 
@@ -13,33 +10,49 @@ import '../styles/styles.css';
 import Footer from './panels/footer';
 import PopupChat from './panels/popup-chat';
 
+//lazy wrappers
+const Homepage = lazy(() => import('./homepage'));
+const Signup = lazy(() => import('./accounts/signup'));
+const Login = lazy(() => import('./accounts/login'));
+const Account = lazy(() => import('./accounts/account'));
+const Dashboard = lazy(() => import('./dashboard'));
+const Recover = lazy(() => import('./accounts/recover'));
+const Reset = lazy(() => import('./accounts/reset'));
+const Admin = lazy(() => import('./administration/admin'));
+const Mod = lazy(() => import('./administration/mod'));
+const PrivacyPolicy = lazy(() => import('./static/privacy-policy'));
+const Credits = lazy(() => import('./static/credits'));
+const NotFound = lazy(() => import('./not-found'));
+
 const App = props => {
 	const authTokens = useContext(TokenContext);
 
 	//default render
 	return (
 		<BrowserRouter>
-				<Switch>
-					<LazyRoute exact path='/' component={() => import('./homepage')} />
+			<Suspense>
+				<Routes>
+					<Route exact path='/' element={<Homepage />} />
 
-					<LazyRoute path='/signup' component={() => import('./accounts/signup')} />
-					<LazyRoute path='/login' component={() => import('./accounts/login')} />
-					<LazyRoute path='/account' component={() => import('./accounts/account')} />
-					<LazyRoute path='/dashboard' component={() => import('./dashboard')} />
+					<Route path='/signup' element={<Signup />} />
+					<Route path='/login' element={<Login />} />
+					<Route path='/account' element={<Account />} />
+					<Route path='/dashboard' element={<Dashboard />} />
 
-					<LazyRoute path='/recover' component={() => import('./accounts/recover')} />
-					<LazyRoute path='/reset' component={() => import('./accounts/reset')} />
+					<Route path='/recover' element={<Recover />} />
+					<Route path='/reset' element={<Reset />} />
 
-					<LazyRoute path='/admin' component={() => import('./administration/admin')} />
-					<LazyRoute path='/mod' component={() => import('./administration/mod')} />
+					<Route path='/admin' element={<Admin />} />
+					<Route path='/mod' element={<Mod />} />
 
-					<LazyRoute path='/privacypolicy' component={() => import('./static/privacy-policy')} />
-					<LazyRoute path='/credits' component={() => import('./static/credits')} />
+					<Route path='/privacypolicy' element={<PrivacyPolicy />} />
+					<Route path='/credits' element={<Credits />} />
 
-					<LazyRoute path='*' component={() => import('./not-found')} />
-				</Switch>
-				{ authTokens.accessToken ? <PopupChat /> : <></> }
-				<Footer />
+					<Route path='*' element={<NotFound />} />
+				</Routes>
+			</Suspense>
+			{ authTokens.accessToken ? <PopupChat /> : <></> }
+			<Footer />
 		</BrowserRouter>
 	);
 };

client/pages/dashboard.jsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { Link, Redirect } from 'react-router-dom';
+import { Link, Navigate } from 'react-router-dom';
 
 import ApplyToBody from './utilities/apply-to-body';
 
@@ -13,7 +13,7 @@ const Dashboard = props => {
 
 	//misplaced?
 	if (!authTokens.accessToken) {
-		return <Redirect to='/' />;
+		return <Navigate to='/' />;
 	}
 
 	return (

client/pages/homepage.jsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { Link, Redirect } from 'react-router-dom';
+import { Link, Navigate } from 'react-router-dom';
 
 import ApplyToBody from './utilities/apply-to-body';
 
@@ -13,7 +13,7 @@ const HomePage = props => {
 
 	//misplaced?
 	if (authTokens.accessToken) {
-		return <Redirect to='/dashboard' />;
+		return <Navigate to='/dashboard' />;
 	}
 
 	return (

client/pages/panels/news-feed.jsx

@@ -8,10 +8,6 @@ const NewsFeed = props => {
 	useEffect(() => {
 		//this... um...
 		fetch(`${process.env.NEWS_URI}/news`, {
-			method: 'GET',
-			headers: {
-				'Content-Type': 'application/json'
-			},
 			signal: aborter.current.signal //oh dear
 		})
 			.then(blob => blob.json())
@@ -26,7 +22,6 @@ const NewsFeed = props => {
 		<div className='panel'>
 			<h1 className='text centered'>News Feed</h1>
 			{articles.map((article, index) => {
-				console.log(article)
 				return (
 					<div key={index} className='panel'>
 						<hr />

client/pages/static/credits.jsx

@@ -1,16 +1,18 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 const Static = props => {
 	return (
-		<>
+		<div className='page central'>
 			<header>
 				<h1 className='text centered'>Credits</h1>
 			</header>
-			<h2>MERN-template</h2>
+			<h2 className='text centered'>MERN-template</h2>
 			<p>The <a href='https://github.com/krgamestudios/MERN-template'>MERN-template</a> developed by Kayne Ruse, KR Game Studios</p>
-		</>
+
+			<Link className='text centered' to='/'>Return Home</Link>
+		</div>
 	);
 };
 
 export default Static;
-

client/pages/static/privacy-policy.jsx

@@ -1,12 +1,16 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 const Static = props => {
 	return (
-		<header>
-			<h1 className="text centered">Privacy Policy</h1>
-		</header>
+		<div className='page central'>
+			<header>
+				<h1 className="text centered">Privacy Policy</h1>
+
+				<Link className='text centered' to='/'>Return Home</Link>
+			</header>
+		</div>
 	);
 };
 
 export default Static;
-

client/pages/utilities/lazy-route.jsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import { Route } from 'react-router-dom';
-import loadable from '@loadable/component';
-
-const LazyRoute = props => {
-	const { component, ...lazyProps } = props;
-
-	const lazyComponent = loadable(component);
-
-	return <Route {...lazyProps} component={lazyComponent} />
-};
-
-export default LazyRoute;

client/pages/utilities/token-provider.jsx

@@ -8,19 +8,16 @@ export const TokenContext = createContext();
 const TokenProvider = props => {
 	//state to be used
 	const [accessToken, setAccessToken] = useState('');
-	const [refreshToken, setRefreshToken] = useState('');
 
-	//make the access and refresh tokens persist between reloads
+	//make the access token persist between reloads
 	useEffect(() => {
 		setAccessToken(localStorage.getItem("accessToken") || '');
-		setRefreshToken(localStorage.getItem("refreshToken") || '');
 	}, []);
 
 	//update the stored copies
 	useEffect(() => {
 		localStorage.setItem("accessToken", accessToken);
-		localStorage.setItem("refreshToken", refreshToken);
-	}, [accessToken, refreshToken]);
+	}, [accessToken]);
 
 	//wrap the default fetch function
 	const tokenFetch = async (url, options) => {
@@ -36,24 +33,16 @@ const TokenProvider = props => {
 				return fetch(url, {
 					method: 'DELETE',
 					headers: {
-						'Content-Type': 'application/json',
 						'Authorization': `Bearer ${bearer}`
 					},
-					body: JSON.stringify({
-						token: refreshToken
-					})
+					credentials: 'include'
 				});
 			}
 
-			//ping the auth server for a new token
+			//ping the auth server for a new access token
 			const response = await fetch(`${process.env.AUTH_URI}/auth/token`, {
 				method: 'POST',
-				headers: {
-					'Content-Type': 'application/json'
-				},
-				body: JSON.stringify({
-					token: refreshToken
-				})
+				credentials: 'include'
 			});
 
 			//any errors, throw them
@@ -65,7 +54,6 @@ const TokenProvider = props => {
 			const newAuth = await response.json();
 
 			setAccessToken(newAuth.accessToken);
-			setRefreshToken(newAuth.refreshToken);
 			bearer = newAuth.accessToken;
 		}
 
@@ -75,7 +63,8 @@ const TokenProvider = props => {
 			headers: {
 				...(options || { headers: {} }).headers,
 				'Authorization': `Bearer ${bearer}`
-			}
+			},
+			credentials: 'include'
 		});
 	};
 
@@ -88,12 +77,7 @@ const TokenProvider = props => {
 			//ping the auth server for a new token
 			const response = await fetch(`${process.env.AUTH_URI}/auth/token`, {
 				method: 'POST',
-				headers: {
-					'Content-Type': 'application/json'
-				},
-				body: JSON.stringify({
-					token: refreshToken
-				})
+				credentials: 'include'
 			});
 
 			//any errors, throw them
@@ -105,7 +89,6 @@ const TokenProvider = props => {
 			const newAuth = await response.json();
 
 			setAccessToken(newAuth.accessToken);
-			setRefreshToken(newAuth.refreshToken);
 
 			//finally
 			return cb(newAuth.accessToken);
@@ -115,7 +98,7 @@ const TokenProvider = props => {
 	};
 
 	return (
-		<TokenContext.Provider value={{ accessToken, refreshToken, setAccessToken, setRefreshToken, tokenFetch, tokenCallback, getPayload: () => decode(accessToken) }}>
+		<TokenContext.Provider value={{ accessToken, setAccessToken, tokenFetch, tokenCallback, getPayload: () => decode(accessToken) }}>
 			{props.children}
 		</TokenContext.Provider>
 	)

client/template.html

@@ -22,6 +22,6 @@
 		<meta property="og:description" content="" />
 	</head>
 	<body>
-		<div id = "root"></div>
+		<div id="root"></div>
 	</body>
 </html>

configure-script.js

@@ -70,7 +70,7 @@ See https://github.com/krgamestudios/MERN-template/wiki for help.
 	//auth configuration
 	const authName = await question('Auth Name', 'auth');
 	const authWebAddress = await question('Auth Web Address', `${authName}.${projectWebAddress}`);
-	const authPostValidationHook = await question('Auth Post Validation Hook', '');
+	const authPostValidationHookArray = await question('Auth Post Validation Hook Array', '');
 	const authResetAddress = await question('Auth Reset Addr', `${projectWebAddress}/reset`);
 	const authDBUser = await question('Auth DB Username', authName);
 	const authDBPass = await question('Auth DB Password', 'charizard');
@@ -189,7 +189,7 @@ services:
     environment:
       - WEB_PROTOCOL=https
       - WEB_ADDRESS=${authWebAddress}
-      - HOOK_POST_VALIDATION=${authPostValidationHook}
+      - HOOK_POST_VALIDATION_ARRAY=${authPostValidationHookArray}
       - WEB_RESET_ADDRESS=${authResetAddress}
       - WEB_PORT=${authPort}
       - DB_HOSTNAME=database
@@ -278,7 +278,7 @@ networks:
 `;
 
 	const dockerfile = `
-FROM node:16
+FROM node:18
 WORKDIR "/app"
 COPY . /app
 RUN mkdir /app/public

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mern-template",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "description": "A website template using the MERN stack.",
   "main": "server/server.js",
   "scripts": {
@@ -32,21 +32,21 @@
     "@babel/preset-react": "^7.14.5",
     "@loadable/component": "^5.15.0",
     "babel-loader": "^8.2.2",
-    "clean-webpack-plugin": "^3.0.0",
-    "compression-webpack-plugin": "^8.0.1",
-    "concurrently": "^6.2.0",
+    "clean-webpack-plugin": "^4.0.0",
+    "compression-webpack-plugin": "^10.0.0",
+    "concurrently": "^7.3.0",
     "css-loader": "^6.2.0",
-    "dateformat": "^4.5.1",
-    "dotenv": "^10.0.0",
+    "dateformat": "^5.0.3",
+    "dotenv": "^16.0.1",
     "express": "^4.17.1",
     "html-webpack-plugin": "^5.3.2",
     "jwt-decode": "^3.1.2",
-    "mariadb": "^2.5.4",
+    "mariadb": "^3.0.1",
     "query-string": "^7.0.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-router": "^5.2.0",
-    "react-router-dom": "^5.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router": "^6.3.0",
+    "react-router-dom": "^6.3.0",
     "react-select": "^5.2.1",
     "sequelize": "^6.6.5",
     "socket.io-client": "^4.1.3",