Protected routes with json web token and roles implementation

package.json

@@ -7,6 +7,8 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.3.5",
+    "eslint": "^8.43.0",
+    "eslint-config-react-app": "^7.0.1",
     "formik": "^2.2.9",
     "jsonwebtoken": "^9.0.0",
     "react": "^18.2.0",
@@ -25,10 +27,18 @@
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
+    "plugins": [
+      "react",
+      "react-hooks"
+    ],
     "extends": [
       "react-app",
       "react-app/jest"
-    ]
+    ],
+    "rules": {
+      "react-hooks/rules-of-hooks": "warn",
+      "react-hooks/exhaustive-deps": "warn"
+    }
   },
   "browserslist": {
     "production": [
@@ -44,6 +54,8 @@
   },
   "devDependencies": {
     "autoprefixer": "^10.4.14",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "postcss": "^8.4.21",
     "tailwindcss": "^3.3.1"
   }

src/App.js

@@ -1,30 +1,43 @@
 import { HomePage, PostForm, NotFoundPage } from "./pages/index";
-import { Routes, Route, Navigate } from "react-router-dom";
+import { Routes, Route } from "react-router-dom";
 import { PostProvider } from "./context/postContext";
 import { Toaster } from "react-hot-toast";
 import Signup from './components/signup';
 import Login from './components/Login';
-
+import RequiresAuth from "./components/RequiresAuth";
 
 function App() {
 
-  const token = localStorage.getItem("token")
+
   return (
     <div className="bg-neutral-900 min-h-screen flex items-center">
       <div className="px-10  m-auto">
-        <PostProvider>
-      <Routes>
-        {token && <Route path="/" exact element={<HomePage/>}/>}
-        <Route path="/signup" exact element={<Signup/>}/>
-        <Route path ="/login" exact element={<Login/>}/>
-        {token && <Route path="/new" element={<PostForm /> }/>}
-      <Route path="/posts/:id" element={<PostForm />} />
-      <Route path="*" element={<NotFoundPage />} />
-      <Route path="/" exact element ={<Navigate replace to ="/login"/>}/>
-    </Routes>
-    <Toaster/>
-    </PostProvider>
-
+      <PostProvider>
+
+        <Routes>
+          {/* Public routes */}
+          <Route path="signup" exact element={ <Signup/> }/>
+          <Route path ="login" exact element={ <Login/> }/>
+
+          {/* Private routes */}
+          <Route element={<RequiresAuth allowedRoles={["admin"]}/>}>
+            <Route path="/" exact element={ <HomePage/>} />
+            <Route path="/posts/:id" element={ <PostForm />} />
+            <Route path="/new" exact element={ <PostForm/>} />
+          </Route>
+
+
+          <Route element={<RequiresAuth allowedRoles={["user"]}/>}>
+
+
+          </Route>
+
+          {/* Catch all */}
+          <Route path="*" element={<NotFoundPage />} />
+
+        </Routes>
+        <Toaster/>
+      </PostProvider>
       </div>
     </div>
   );

src/api/posts.js

@@ -5,7 +5,7 @@ export const getPostsRequest = async () => await axios.get('http://localhost:400
 })
 
 export const createPostRequest = async (post) => {
-    const token = localStorage.getItem('token')
+    const token = localStorage.getItem('auth')
     const form = new FormData()
 
     for (let key in post){

src/components/Login/index.jsx

@@ -1,29 +1,37 @@
 import { useState } from "react";
 import styles from "./styles.module.css";
-import { Link } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
+import useAuth from "../../hooks/useAuth";
 import axios from 'axios'
 
 const Signin = () => {
   const [data, setData] = useState({
     email: "",
     password: "",
   });
-
-
   const [error, setError] = useState("")
 
+  const { setAuth } = useAuth()
+
+  const location = useLocation()
+  const navigate = useNavigate()
+  const from = location.state?.from?.pathname || "/"
+
   const handleChange = ({ currentTarget: input }) => {
     setData({ ...data, [input.name]: input.value });
   };
 
-  const handleSubmit =async (e) => {
+  const handleSubmit = async (e) => {
     e.preventDefault();
     try {
         const url = "http://localhost:4000/api/auth/signin";
-        const {data:res} = await axios.post(url,data);
-        localStorage.setItem("token", res.token);
-
-        window.location= "/"
+        const {data:res} = await axios.post(url, data);
+        const roles = res?.roles
+        const token = res?.token
+        setAuth({roles, token})
+        console.log(roles)
+        navigate(from, {replace: true})
+
     } catch (error) {
         if(error.response &&
             error.response.status >=400 &&
@@ -68,12 +76,11 @@ const Signin = () => {
           </button>
         </form>
         <div >
-      <h1> New Here?</h1><Link to="/signup">
+      <h1> New Here?</h1>
             <button type="button" className='bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-10 rounded-full'>
               Sign Up
             </button>
-          </Link>
-
+
       </div>
         </div>
 

src/components/Main/index.jsx

@@ -1,14 +1,13 @@
 import styles from './style.module.css';
 
 
-const Main = () =>{
-
+const Main = () => {
     const handleLogout = ()=> {
-    localStorage.removeItem("token");
-    window.location.reload();
-}
+        localStorage.removeItem("token");
+        window.location.reload();
+    }
 
-return(
+return (
     <div className={styles.main_container}>
     <nav className={styles.navbar}>
         <h1>Techtalk</h1>
@@ -17,8 +16,7 @@ return(
         </button>
     </nav>
     </div>
-);
-
-
+ );
 };
+
 export default Main;

src/components/RequiresAuth.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { useLocation, Navigate, Outlet } from "react-router-dom";
+import useAuth from "../hooks/useAuth";
+
+const RequiresAuth = ( {allowedRoles } ) => {
+    const { auth }= useAuth()
+    const location = useLocation()
+
+    return (
+        auth?.roles?.find(role => allowedRoles?.includes(role.name)) ? <Outlet /> : <Navigate to={"/login"} state={{from: location}} replace/> 
+    )
+}
+
+export default RequiresAuth

src/components/signup/index.jsx

@@ -1,6 +1,8 @@
+import React from "react";
 import { useState } from "react";
+import { Link, useNavigate, useLocation } from "react-router-dom";
+import useAuth from "../../hooks/useAuth";
 import styles from "./styles.module.css";
-import { Link, useNavigate } from "react-router-dom";
 import axios from 'axios'
 
 const Signup = () => {
@@ -10,7 +12,12 @@ const Signup = () => {
     password: "",
   });
   const [error, setError] = useState("")
-  const navigate= useNavigate();
+
+  const { setAuth } = useAuth()
+
+  const location = useLocation()
+  const navigate = useNavigate()
+  const from = location.state?.from?.pathname || "/"
 
   const handleChange = ({ currentTarget: input }) => {
     setData({ ...data, [input.name]: input.value });
@@ -21,8 +28,10 @@ const Signup = () => {
     try {
         const url = "http://localhost:4000/api/auth/signup";
         const {data:res} = await axios.post(url,data);
-        navigate("/login")
-        console.log(res.message)
+        const roles = res?.roles
+        const token = res?.token
+        setAuth({roles, token})
+        navigate(from, {replace: true})
     } catch (error) {
         if(error.response &&
             error.response.status >=400 &&
@@ -32,7 +41,6 @@ const Signup = () => {
             }
 
     }
-
   }
 
   return (

src/context/AuthProvider.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { createContext, useState } from "react";
+
+const AuthContext = createContext({});
+
+export const AuthProvider = ({children}) => {
+    const [auth, setAuth] = useState({})
+
+    return (
+        <AuthContext.Provider value={{auth, setAuth}}> 
+            {children}
+        </AuthContext.Provider>
+    )
+}
+
+
+export default AuthContext

src/hooks/useAuth.js

@@ -0,0 +1,8 @@
+import { useContext } from "react"
+import AuthContext from "../context/AuthProvider"
+
+const useAuth = () => {
+    return useContext(AuthContext)
+}
+
+export default useAuth

src/index.js

@@ -1,16 +1,21 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { AuthProvider } from './context/AuthProvider';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
-import { BrowserRouter } from 'react-router-dom';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
 const root = ReactDOM.createRoot(document.getElementById('root'));
 
 root.render(
   <React.StrictMode>
-    <BrowserRouter>
-    <App />
-    </BrowserRouter>
+    <AuthProvider>
+      <BrowserRouter>
+        <Routes>
+          <Route path='/*' element={ <App/> } />
+        </Routes>
+      </BrowserRouter>
+    </AuthProvider>
   </React.StrictMode>
 );