5 files changed, 77 insertions, 14 deletions

diff --git a/backend/index.js b/backend/index.js
index 090296e..54c0b4a 100644
--- a/backend/index.js
+++ b/backend/index.js
@@ -22,6 +22,22 @@ const users = [
   },
 ];
 
+const authenticateJWT = (req, res, next) => {
+  const token = req.header('Authorization').split(' ')[1];
+  if (!token) {
+    return res.status(403).json({ message: 'Forbidden' });
+  }
+
+  jwt.verify(token, SECRET_KEY, (err, user) => {
+    if (err) {
+      return res.status(403).json({ message: 'Forbidden' });
+    }
+
+    req.user = user;
+    next();
+  });
+};
+
 // Login route
 app.post('/login', async (req, res) => {
   const { username, password } = req.body;
@@ -45,6 +61,11 @@ app.post('/login', async (req, res) => {
   res.json({ token });
 });
 
+// Protected route example
+app.get('/admin', authenticateJWT, (req, res) => {
+  res.json({ message: 'Welcome to the admin panel' });
+});
+
 app.listen(PORT, () => {
   console.log(`Server running on http://localhost:${PORT}`);
 });
diff --git a/src/App.js b/src/App.js
index 36c6c6a..7f23517 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,15 +1,27 @@
 import React from 'react';
+import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
 import './App.css';
 import Login from './components/Login';
+import Admin from './components/Admin';
 
 function App() {
+  const isAuthenticated = () => {
+    return !!localStorage.getItem('jwtToken');
+  };
+
   return (
-    <div className="App">
-      <header className="App-header">
-        <h1>Admin Panel</h1>
-        <Login />
-      </header>
-    </div>
+    <Router>
+      <div className="App">
+        <Routes>
+          <Route path="/login" element={<Login />} />
+          <Route
+            path="/admin"
+            element={isAuthenticated() ? <Admin /> : <Navigate to="/login" />}
+          />
+          <Route path="/" element={<Navigate to="/login" />} />
+        </Routes>
+      </div>
+    </Router>
   );
 }
 
diff --git a/src/components/Admin.js b/src/components/Admin.js
new file mode 100644
index 0000000..aeb8bf6
--- /dev/null
+++ b/src/components/Admin.js
@@ -0,0 +1,35 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+
+function Admin() {
+  const [message, setMessage] = useState('');
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const token = localStorage.getItem('jwtToken');
+      if (token) {
+        try {
+          const response = await axios.get('http://localhost:5000/admin', {
+            headers: { Authorization: `Bearer ${token}` },
+          });
+          setMessage(response.data.message);
+        } catch (error) {
+          console.error('Error fetching admin data', error);
+        }
+      } else {
+        setMessage('You are not authorized to view this page.');
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  return (
+    <div className="Admin">
+      <h2>Admin Panel</h2>
+      <p>{message}</p>
+    </div>
+  );
+}
+
+export default Admin;
diff --git a/src/components/Login.js b/src/components/Login.js
index c73b59a..717a3ae 100644
--- a/src/components/Login.js
+++ b/src/components/Login.js
@@ -1,10 +1,12 @@
 import React, { useState } from 'react';
 import axios from 'axios';
+import { useNavigate } from 'react-router-dom';
 
 function Login() {
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
   const [error, setError] = useState('');
+  const navigate = useNavigate(); // Initialize useNavigate hook
 
   const handleSubmit = async (event) => {
     event.preventDefault();
@@ -17,7 +19,7 @@ function Login() {
       const { token } = response.data;
       console.log('Login successful, token:', token);
       localStorage.setItem('jwtToken', token);
-      // Redirect to admin panel or another page after successful login
+      navigate('/admin'); // Redirect to the admin page
     } catch (error) {
       setError('Invalid credentials');
       console.error('Error logging in', error);
diff --git a/src/components/MyComponent.js b/src/components/MyComponent.js
deleted file mode 100644
index b9434ea..0000000
--- a/src/components/MyComponent.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-
-function MyComponent() {
-    return <div>This is my component!</div>;
-}
-
-export default MyComponent;
\ No newline at end of file