Managing the Token Expiration - final

Author: zntb

backend/events.json

@@ -1 +1 @@
-{"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":"test2@test.com","password":"$2a$12$DpO//Ez6vBSVTwqTCDVQpOsrJPEMZ1GphoJMTy8.g7TWHiBP97dQ.","id":"0eb4897f-2f6d-4b30-bd04-9ce763f96697"},{"email":"test@test.com","password":"$2a$12$3m6KUOiNwanEyfkY61rBkeADcW2rW3FSIAd9bS4M5grlHMQkMDV/S","id":"e54095a1-a14c-46d6-b7dc-b316c3a6ccfd"},{"email":"eve.holt@reqres.in","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.\n","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":"test2@test.com","password":"$2a$12$DpO//Ez6vBSVTwqTCDVQpOsrJPEMZ1GphoJMTy8.g7TWHiBP97dQ.","id":"0eb4897f-2f6d-4b30-bd04-9ce763f96697"},{"email":"test@test.com","password":"$2a$12$3m6KUOiNwanEyfkY61rBkeADcW2rW3FSIAd9bS4M5grlHMQkMDV/S","id":"e54095a1-a14c-46d6-b7dc-b316c3a6ccfd"},{"email":"eve.holt@reqres.in","password":"$2a$12$J9lpeDvXxDB3onD8FpMcGu2srQyzCpiMrFPdp/BezkQCSjXCZQlfC","id":"538c7b46-8b5c-482d-a4ab-106cd9e63b75"}]}

frontend/src/pages/Authentication.js

@@ -41,6 +41,9 @@ export async function action({ request }) {
   const token = resData.token;
 
   localStorage.setItem('token', token);
+  const expiration = new Date();
+  expiration.setHours(expiration.getHours() + 1);
+  localStorage.setItem('expiration', expiration.toISOString());
 
   return redirect('/');
 }

frontend/src/pages/Logout.js

@@ -2,5 +2,6 @@ import { redirect } from 'react-router-dom';
 
 export function action() {
   localStorage.removeItem('token');
+  localStorage.removeItem('expiration');
   return redirect('/');
 }

frontend/src/pages/Root.js

@@ -2,6 +2,7 @@ import { Outlet, useLoaderData, useSubmit } from 'react-router-dom';
 
 import MainNavigation from '../components/MainNavigation';
 import { useEffect } from 'react';
+import { getTokenDuration } from '../util/auth';
 
 function RootLayout() {
   const token = useLoaderData();
@@ -12,11 +13,18 @@ function RootLayout() {
       return;
     }
 
-    const timeout = 1 * 60 * 60 * 1000; // 1 hour
+    if (token === 'EXPIRED') {
+      submit(null, { action: '/logout', method: 'post' });
+      return;
+    }
+
+    // const timeout = 1 * 60 * 60 * 1000; 1 hour
+    const tokenDuration = getTokenDuration();
+    console.log(tokenDuration);
 
     setTimeout(() => {
       submit(null, { action: '/logout', method: 'post' });
-    }, timeout);
+    }, tokenDuration);
   }, [token, submit]);
 
   return (

frontend/src/util/auth.js

@@ -1,7 +1,26 @@
 import { redirect } from 'react-router-dom';
 
+export function getTokenDuration() {
+  const storedExpirationDate = localStorage.getItem('expiration');
+  const expirationDate = new Date(storedExpirationDate);
+  const now = new Date();
+  const duration = expirationDate.getTime() - now.getTime();
+  return duration;
+}
+
 export function getAuthToken() {
   const token = localStorage.getItem('token');
+
+  if (!token) {
+    return null;
+  }
+
+  const tokenDuration = getTokenDuration();
+
+  if (tokenDuration < 0) {
+    return 'EXPIRED';
+  }
+
   return token;
 }