Attaching Auth Tokens to Outgoing Requests

Author: zntb

backend/events.json

@@ -1 +1 @@
-{"events":[{"title":"A new event","image":"https://cdn.muenchen-p.de/fl_progressive,q_65/.imaging/stk/responsive/teaser300/dms/va-2016/muenchner-christkindlmarkt/christkindlmarkt-marienplat-logo-hp/document/christkindlmarkt-marienplat-logo-hp.jpg","date":"2022-10-01","description":"Some awesome event!","id":"2a42fcc4-ea21-4bdd-abf6-c40006dc66a9"}],"users":[{"email":"[email protected]","password":"$2a$12$DpO//Ez6vBSVTwqTCDVQpOsrJPEMZ1GphoJMTy8.g7TWHiBP97dQ.","id":"0eb4897f-2f6d-4b30-bd04-9ce763f96697"},{"email":"[email protected]","password":"$2a$12$3m6KUOiNwanEyfkY61rBkeADcW2rW3FSIAd9bS4M5grlHMQkMDV/S","id":"e54095a1-a14c-46d6-b7dc-b316c3a6ccfd"},{"email":"[email protected]","password":"$2a$12$J9lpeDvXxDB3onD8FpMcGu2srQyzCpiMrFPdp/BezkQCSjXCZQlfC","id":"538c7b46-8b5c-482d-a4ab-106cd9e63b75"}]}
+{"events":[{"title":"Another event","image":"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.pzsIeXOfUfiGxZUFwJ_VwwHaE4%26pid%3DApi&f=1&ipt=e469e7b3657ed87d395649be2b4cc18e3794727ecebc5f8ddf2f69333c75be69&ipo=images","date":"2024-01-27","description":"Another awesome event!!","id":"b5b592cf-c1cc-4c36-bd00-7670d1494ff6"},{"title":"A new event","image":"https://cdn.muenchen-p.de/fl_progressive,q_65/.imaging/stk/responsive/teaser300/dms/va-2016/muenchner-christkindlmarkt/christkindlmarkt-marienplat-logo-hp/document/christkindlmarkt-marienplat-logo-hp.jpg","date":"2022-10-01","description":"Some awesome event!","id":"2a42fcc4-ea21-4bdd-abf6-c40006dc66a9"}],"users":[{"email":"[email protected]","password":"$2a$12$DpO//Ez6vBSVTwqTCDVQpOsrJPEMZ1GphoJMTy8.g7TWHiBP97dQ.","id":"0eb4897f-2f6d-4b30-bd04-9ce763f96697"},{"email":"[email protected]","password":"$2a$12$3m6KUOiNwanEyfkY61rBkeADcW2rW3FSIAd9bS4M5grlHMQkMDV/S","id":"e54095a1-a14c-46d6-b7dc-b316c3a6ccfd"},{"email":"[email protected]","password":"$2a$12$J9lpeDvXxDB3onD8FpMcGu2srQyzCpiMrFPdp/BezkQCSjXCZQlfC","id":"538c7b46-8b5c-482d-a4ab-106cd9e63b75"}]}

frontend/src/components/EventForm.js

@@ -4,10 +4,11 @@ import {
   useNavigation,
   useActionData,
   json,
-  redirect
+  redirect,
 } from 'react-router-dom';
 
 import classes from './EventForm.module.css';
+import { getAuthToken } from '../util/auth';
 
 function EventForm({ method, event }) {
   const data = useActionData();
@@ -101,10 +102,13 @@ export async function action({ request, params }) {
     url = 'http://localhost:8080/events/' + eventId;
   }
 
+  const token = getAuthToken();
+
   const response = await fetch(url, {
     method: method,
     headers: {
       'Content-Type': 'application/json',
+      Authorization: 'Bearer ' + token,
     },
     body: JSON.stringify(eventData),
   });
@@ -119,4 +123,3 @@ export async function action({ request, params }) {
 
   return redirect('/events');
 }
-

frontend/src/pages/Authentication.js

@@ -37,5 +37,10 @@ export async function action({ request }) {
     throw json({ message: 'Could not authenticate user.' }, { status: 500 });
   }
 
+  const resData = await response.json();
+  const token = resData.token;
+
+  localStorage.setItem('token', token);
+
   return redirect('/');
 }

frontend/src/pages/Error.js

@@ -1,5 +1,4 @@
 import { useRouteError } from 'react-router-dom';
-import MainNavigation from '../components/MainNavigation';
 
 import PageContent from '../components/PageContent';
 
@@ -20,7 +19,6 @@ function ErrorPage() {
 
   return (
     <>
-      <MainNavigation />
       <PageContent title={title}>
         <p>{message}</p>
       </PageContent>

frontend/src/pages/EventDetail.js

@@ -9,6 +9,7 @@ import {
 
 import EventItem from '../components/EventItem';
 import EventsList from '../components/EventsList';
+import { getAuthToken } from '../util/auth';
 
 function EventDetailPage() {
   const { event, events } = useRouteLoaderData('event-detail');
@@ -78,8 +79,13 @@ export async function loader({ request, params }) {
 
 export async function action({ params, request }) {
   const eventId = params.eventId;
+
+  const token = getAuthToken();
   const response = await fetch('http://localhost:8080/events/' + eventId, {
     method: request.method,
+    headers: {
+      Authorization: 'Bearer ' + token,
+    },
   });
 
   if (!response.ok) {

frontend/src/util/auth.js

@@ -0,0 +1,4 @@
+export function getAuthToken() {
+  const token = localStorage.getItem('token');
+  return token;
+}