logout when token is expired

Author: tienbku

README.md

@@ -1,8 +1,16 @@
 ## React Hooks: JWT Authentication (without Redux) example
 
 For more detail, please visit:
+> [React Hooks: JWT Authentication & Authorization (without Redux) example](https://bezkoder.com/react-hooks-jwt-auth/)
 
-> [React Hooks: JWT Authentication & Authorization example](https://bezkoder.com/react-hooks-jwt-auth/)
+> [React Redux Login, Logout, Registration example with Hooks](https://bezkoder.com/react-hooks-redux-login-registration-example/)
+
+> [React (Components) JWT Authentication & Authorization example](https://bezkoder.com/react-jwt-auth/)
+
+Fullstack (JWT Authentication & Authorization example):
+> [React + Spring Boot](https://bezkoder.com/spring-boot-react-jwt-auth/)
+
+> [React + Node.js Express](https://bezkoder.com/react-express-authentication-jwt/)
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
@@ -12,7 +20,7 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 PORT=8081
 ```
 
-## Note:
+### Note:
 Open `src/services/auth-header.js` and modify `return` statement for appropriate back-end (found in the tutorial).
 
 ```js
@@ -28,7 +36,7 @@ export default function authHeader() {
 }
 ```
 
-## Project setup
+### Project setup
 
 In the project directory, you can run:
 
@@ -51,3 +59,39 @@ yarn start
 Open [http://localhost:8081](http://localhost:8081) to view it in the browser.
 
 The page will reload if you make edits.
+
+### Related Posts
+> [In-depth Introduction to JWT-JSON Web Token](https://bezkoder.com/jwt-json-web-token/)
+
+> [React CRUD example using Hooks](https://bezkoder.com/react-hooks-crud-axios-api/)
+
+> [React Pagination using Hooks example](https://bezkoder.com/react-pagination-hooks/)
+
+> [React Hooks File Upload example](https://bezkoder.com/react-hooks-file-upload/)
+
+Fullstack with Node.js Express:
+> [React.js + Node.js Express + MySQL](https://bezkoder.com/react-node-express-mysql/)
+
+> [React.js + Node.js Express + PostgreSQL](https://bezkoder.com/react-node-express-postgresql/)
+
+> [React.js + Node.js Express + MongoDB](https://bezkoder.com/react-node-express-mongodb-mern-stack/)
+
+Fullstack with Spring Boot:
+> [React.js + Spring Boot + MySQL](https://bezkoder.com/react-spring-boot-crud/)
+
+> [React.js + Spring Boot + PostgreSQL](https://bezkoder.com/spring-boot-react-postgresql/)
+
+> [React.js + Spring Boot + MongoDB](https://bezkoder.com/react-spring-boot-mongodb/)
+
+Fullstack with Django:
+> [React.js Hooks + Django Rest Framework](https://bezkoder.com/django-react-hooks/)
+
+Serverless:
+> [React Hooks Firebase Realtime Database: CRUD App ](https://bezkoder.com/react-firebase-hooks-crud/)
+
+> [React Hooks Firestore example: CRUD App](https://bezkoder.com/react-hooks-firestore/)
+
+Integration (run back-end & front-end on same server/port)
+> [Integrate React with Spring Boot](https://bezkoder.com/integrate-reactjs-spring-boot/)
+
+> [Integrate React with Node.js Express](https://bezkoder.com/integrate-react-express-same-server-port/)

src/App.js

@@ -13,6 +13,9 @@ import BoardUser from "./components/BoardUser";
 import BoardModerator from "./components/BoardModerator";
 import BoardAdmin from "./components/BoardAdmin";
 
+// import AuthVerify from "./common/AuthVerify";
+import EventBus from "./common/EventBus";
+
 const App = () => {
   const [showModeratorBoard, setShowModeratorBoard] = useState(false);
   const [showAdminBoard, setShowAdminBoard] = useState(false);
@@ -26,10 +29,21 @@ const App = () => {
       setShowModeratorBoard(user.roles.includes("ROLE_MODERATOR"));
       setShowAdminBoard(user.roles.includes("ROLE_ADMIN"));
     }
+
+    EventBus.on("logout", () => {
+      logOut();
+    });
+
+    return () => {
+      EventBus.remove("logout");
+    };
   }, []);
 
   const logOut = () => {
     AuthService.logout();
+    setShowModeratorBoard(false);
+    setShowAdminBoard(false);
+    setCurrentUser(undefined);
   };
 
   return (
@@ -111,6 +125,8 @@ const App = () => {
           <Route path="/admin" component={BoardAdmin} />
         </Switch>
       </div>
+
+      {/* <AuthVerify logOut={logOut}/> */}
     </div>
   );
 };

src/common/AuthVerify.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { withRouter } from "react-router-dom";
+
+const parseJwt = (token) => {
+  try {
+    return JSON.parse(atob(token.split(".")[1]));
+  } catch (e) {
+    return null;
+  }
+};
+
+const AuthVerify = (props) => {
+  props.history.listen(() => {
+    const user = JSON.parse(localStorage.getItem("user"));
+
+    if (user) {
+      const decodedJwt = parseJwt(user.accessToken);
+
+      if (decodedJwt.exp * 1000 < Date.now()) {
+        props.logOut();
+      }
+    }
+  });
+
+  return <div></div>;
+};
+
+export default withRouter(AuthVerify);

src/common/EventBus.js

@@ -0,0 +1,13 @@
+const eventBus = {
+  on(event, callback) {
+    document.addEventListener(event, (e) => callback(e.detail));
+  },
+  dispatch(event, data) {
+    document.dispatchEvent(new CustomEvent(event, { detail: data }));
+  },
+  remove(event, callback) {
+    document.removeEventListener(event, callback);
+  },
+};
+
+export default eventBus;

src/components/BoardAdmin.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 
 import UserService from "../services/user.service";
+import EventBus from "../common/EventBus";
 
 const BoardAdmin = () => {
   const [content, setContent] = useState("");
@@ -19,6 +20,10 @@ const BoardAdmin = () => {
           error.toString();
 
         setContent(_content);
+
+        if (error.response && error.response.status === 401) {
+          EventBus.dispatch("logout");
+        }
       }
     );
   }, []);

src/components/BoardModerator.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 
 import UserService from "../services/user.service";
+import EventBus from "../common/EventBus";
 
 const BoardModerator = () => {
   const [content, setContent] = useState("");
@@ -19,6 +20,10 @@ const BoardModerator = () => {
           error.toString();
 
         setContent(_content);
+
+        if (error.response && error.response.status === 401) {
+          EventBus.dispatch("logout");
+        }
       }
     );
   }, []);

src/components/BoardUser.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 
 import UserService from "../services/user.service";
+import EventBus from "../common/EventBus";
 
 const BoardUser = () => {
   const [content, setContent] = useState("");
@@ -19,6 +20,10 @@ const BoardUser = () => {
           error.toString();
 
         setContent(_content);
+
+        if (error.response && error.response.status === 401) {
+          EventBus.dispatch("logout");
+        }
       }
     );
   }, []);