added server authentication

server checks origin URL and sends 401 if invalid

client/appInfo.json

@@ -1,5 +1,5 @@
 {
-  "titleDefault": "MERN",
-  "descriptionDefault": "Template for a MERN app",
+  "titleDefault": "Note Taker",
+  "descriptionDefault": "A lightweight note taking app",
   "themeColor": "#3367D6"
 }

client/public/manifest.json

@@ -1,7 +1,7 @@
 {
-  "short_name": "MERN",
-  "name": "MERN App",
-  "description": "Template for a MERN app",
+  "short_name": "Note Taker",
+  "name": "Note Taker",
+  "description": "A lightweight note taking app",
   "manifest_version": "2",
   "version": "1.0.0",
   "id": "/?source=pwa",

client/src/app/App.css

@@ -1,10 +1,10 @@
 .App {
-  min-height: 100vh; /** TESTING **/
+  min-height: 100vh;
   text-align: center;
   display: grid;
   grid-template:
-    "top top top"
-    "middle middle middle"
-    "bottom bottom bottom";
+    'top top top'
+    'middle middle middle'
+    'bottom bottom bottom';
   gap: 10px;
 }

client/src/app/api.tsx

@@ -1,13 +1,13 @@
-const serverURL = import.meta.env.VITE_SERVER_URL;
-const apiURL = (path: string) => `${serverURL}/${path}`;
+const serverURL = () => import.meta.env.VITE_SERVER_URL;
+const apiURL = (path: string) => `${serverURL()}/${path}`;
 
 const jsonHeaders = {
   Accept: 'application/json',
   'Content-type': 'application/json',
 };
 
 const API = {
-  getAllNotes: () => fetch(apiURL('note'), { method: 'GET' }),
+  getAllNotes: () => fetch(apiURL('note')),
   saveNewNote: (text: string) =>
     fetch(apiURL('note'), {
       method: 'POST',

client/src/app/index.tsx

@@ -6,16 +6,13 @@ import { PATHS } from './routes';
 import Heading from '../features/Heading';
 import Loading from '../features/Loading';
 import Error from '../features/Error';
-// import responsive from './responsive';
 import './App.css';
 
 const Header = lazy(() => import('../features/Header'));
 const Main = lazy(() => import('../features/Main'));
 const Footer = lazy(() => import('../features/Footer'));
 
 export function AppContent() {
-  // responsive();
-
   return (
     <div className="App">
       <ErrorBoundary fallback={<Error />}>

client/src/features/Main/index.tsx

@@ -4,35 +4,15 @@ import ROUTES, { PATHS } from '../../app/routes';
 import FindNote from '../Notes/FindNote';
 import styles from './Main.module.css';
 import NewNote from '../Notes/NewNote';
-// import { isMobileDomain } from '../../app/responsive';
 
 const Login = lazy(() => import('../Login'));
 const Home = lazy(() => import('../Home'));
 const NotesList = lazy(() => import('../Notes/NoteList'));
 const NotFound = lazy(() => import('../NotFound'));
 
-/** uncomment if subdomain is configured in responsive.ts */
-/*
-const responsive: typeof import('../../app/responsive') = await import(
-  '../../app/responsive'
-);
-responsive.default();
-
-const deviceDomain = () => {
-  if (responsive !== undefined) {
-    if (responsive.isMobileDomain()) {
-      return <p>[Mobile]</p>;
-    }
-    return <p>[Desktop]</p>;
-  }
-  return null;
-};
-*/
-
 export default function Main() {
   return (
     <main role="main" className={styles.Main}>
-      {/* deviceDomain() */}
       <Routes>
         <Route
           path={PATHS.ROOT()}

server/config.sample-env

@@ -1 +1,2 @@
-ATLAS_URI=mongodb+srv://<username>:<password>@sandbox.jadwj.mongodb.net/
+ATLAS_URI=mongodb+srv://<username>:<password>@sandbox.jadwj.mongodb.net/
+CLIENT_HOST = localhost:5050

server/routes/note.mjs

@@ -2,14 +2,21 @@ import express from "express";
 import db from "../db/conn.mjs";
 import { ObjectId } from "mongodb";
 
+const clientURL = () => process.env.CLIENT_URL;
 const notes_collection = "notes";
 const router = express.Router();
 
+// authentication middleware
+router.use((req, res, next) => {
+  if (req.headers.origin === clientURL()) next();
+  else res.status(401).send("Unauthorized");
+});
+
 // get all notes
 router.get("/", async (_req, res) => {
   let collection = db.collection(notes_collection);
   let results = await collection.find({}).toArray();
-  res.send(results).status(200);
+  res.status(200).send(results);
 });
 
 // get note by id
@@ -18,8 +25,8 @@ router.get("/:id", async (req, res) => {
   let query = { _id: new ObjectId(req.params.id) };
   let result = await collection.findOne(query);
 
-  if (!result) res.send("Not found").status(404);
-  else res.send(result).status(200);
+  if (!result) res.status(404).send("Not found");
+  else res.status(200).send(result);
 });
 
 // create note
@@ -29,9 +36,10 @@ router.post("/", async (req, res) => {
   };
   let collection = db.collection(notes_collection);
   let result = await collection.insertOne(newNote);
-  res.send(result).status(204);
+  res.status(204).send(result);
 });
 
+/*
 // update note
 router.patch("/:id", async (req, res) => {
   const query = { _id: new ObjectId(req.params.id) };
@@ -57,5 +65,6 @@ router.delete("/:id", async (req, res) => {
 
   res.send(result).status(200);
 });
+*/
 
 export default router;