worked on evently admin panel authorization

login signup secure route done

src/App.js

@@ -1,93 +1,39 @@
 /* eslint-disable prettier/prettier */
-// import React, { Suspense, useEffect } from 'react'
-// import { HashRouter, Route, Routes } from 'react-router-dom'
-// import { useSelector } from 'react-redux'
+import React, { Suspense, useContext, useEffect } from 'react'
+import { HashRouter, Navigate, Route, Routes } from 'react-router-dom'
+import { useSelector } from 'react-redux'
 
-// import { CSpinner, useColorModes } from '@coreui/react'
-// import './scss/style.scss'
+import { CSpinner, useColorModes } from '@coreui/react'
+import './scss/style.scss'
+import AuthContext from './authContext';
 
-// // Containers
-// const DefaultLayout = React.lazy(() => import('./layout/DefaultLayout'))
+// Containers
+const DefaultLayout = React.lazy(() => import('./layout/DefaultLayout'))
 
-// // Pages
-// const Login = React.lazy(() => import('./views/pages/login/Login'))
-// const Register = React.lazy(() => import('./views/pages/register/Register'))
-// const Page404 = React.lazy(() => import('./views/pages/page404/Page404'))
-// const Page500 = React.lazy(() => import('./views/pages/page500/Page500'))
-
-// const App = () => {
-//   const { isColorModeSet, setColorMode } = useColorModes('coreui-free-react-admin-template-theme')
-//   const storedTheme = useSelector((state) => state.theme)
-
-//   useEffect(() => {
-//     const urlParams = new URLSearchParams(window.location.href.split('?')[1])
-//     const theme = urlParams.get('theme') && urlParams.get('theme').match(/^[A-Za-z0-9\s]+/)[0]
-//     if (theme) {
-//       setColorMode(theme)
-//     }
-
-//     if (isColorModeSet()) {
-//       return
-//     }
-
-//     setColorMode(storedTheme)
-//   }, []) // eslint-disable-line react-hooks/exhaustive-deps
-
-//   return (
-//     <HashRouter>
-//       <Suspense
-//         fallback={
-//           <div className="pt-3 text-center">
-//             <CSpinner color="primary" variant="grow" />
-//           </div>
-//         }
-//       >
-//         <Routes>
-//           <Route exact path="/login" name="Login Page" element={<Login />} />
-//           <Route exact path="/register" name="Register Page" element={<Register />} />
-//           <Route exact path="/404" name="Page 404" element={<Page404 />} />
-//           <Route exact path="/500" name="Page 500" element={<Page500 />} />
-//           <Route path="*" name="Home" element={<DefaultLayout />} />
-//         </Routes>
-//       </Suspense>
-//     </HashRouter>
-//   )
-// }
-
-// export default App
-
-
-import React, { useEffect, Suspense } from 'react';
-import { HashRouter, Route, Routes, Navigate } from 'react-router-dom';
-import { useSelector } from 'react-redux';
-import { CSpinner, useColorModes } from '@coreui/react';
-import './scss/style.scss';
-import Login from './views/pages/login/Login';
-import Register from './views/pages/register/Register';
-import Page404 from './views/pages/page404/Page404';
-import Page500 from './views/pages/page500/Page500';
-import DefaultLayout from './layout/DefaultLayout';
-import Cookies from 'js-cookie';
+// Pages
+const Login = React.lazy(() => import('./views/pages/login/Login'))
+const Register = React.lazy(() => import('./views/pages/register/Register'))
+const Page404 = React.lazy(() => import('./views/pages/page404/Page404'))
+const Page500 = React.lazy(() => import('./views/pages/page500/Page500'))
 
 const App = () => {
-  const { isColorModeSet, setColorMode } = useColorModes('coreui-free-react-admin-template-theme');
-  const storedTheme = useSelector((state) => state.theme);
+  const { isColorModeSet, setColorMode } = useColorModes('coreui-free-react-admin-template-theme')
+  const storedTheme = useSelector((state) => state.theme)
+  const { authenticated } = useContext(AuthContext);
 
   useEffect(() => {
-    const urlParams = new URLSearchParams(window.location.href.split('?')[1]);
-    const theme = urlParams.get('theme') && urlParams.get('theme').match(/^[A-Za-z0-9\s]+/)[0];
+    const urlParams = new URLSearchParams(window.location.href.split('?')[1])
+    const theme = urlParams.get('theme') && urlParams.get('theme').match(/^[A-Za-z0-9\s]+/)[0]
     if (theme) {
-      setColorMode(theme);
+      setColorMode(theme)
     }
 
-    if (!isColorModeSet()) {
-      setColorMode(storedTheme);
+    if (isColorModeSet()) {
+      return
     }
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-  const authToken = Cookies.get('authorizationAdmin'); // Change 'authorization' to match your authentication token key
-  const isAuthenticated = !!authToken;
-  console.log("authorizationAdmin",isAuthenticated)
+    setColorMode(storedTheme)
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
     <HashRouter>
@@ -98,28 +44,27 @@ const App = () => {
           </div>
         }
       >
-        <Routes>
-          <Route
-            exact
-            path="/login"
-            element={isAuthenticated ? <Navigate to="/dashboard" /> : <Login />}
-          />
-          <Route
-            exact
-            path="/register"
-            element={isAuthenticated ? <Navigate to="/dashboard" /> : <Register />}
-          />
-          <Route exact path="/404" element={<Page404 />} />
-          <Route exact path="/500" element={<Page500 />} />
-          <Route
-            path="*"
-            element={isAuthenticated ? <DefaultLayout /> : <Navigate to="/login" />}
-          />
-        </Routes>
+        {/* <Routes>
+          <Route exact path="/login" name="Login Page" element={<Login />} />
+          <Route exact path="/register" name="Register Page" element={<Register />} />
+          <Route exact path="/404" name="Page 404" element={<Page404 />} />
+          <Route exact path="/500" name="Page 500" element={<Page500 />} />
+          <Route path="*" name="Home" element={<DefaultLayout />} />
+        </Routes> */}
+         <Routes>
+        <Route exact path="/login" element={authenticated ? <Navigate to="/dashboard" /> : <Login />} />
+        <Route exact path="/register" element={authenticated ? <Navigate to="/dashboard" /> : <Register />} />
+        <Route exact path="/404" element={<Page404 />} />
+        <Route exact path="/500" element={<Page500 />} />
+
+        <Route path="*" element={authenticated ? <DefaultLayout /> : <Navigate to="/login" />} />
+      </Routes>
       </Suspense>
     </HashRouter>
-  );
-};
+  )
+}
+
+export default App
+
 
-export default App;
 

src/authContext.js

@@ -0,0 +1,38 @@
+/* eslint-disable prettier/prettier */
+import React, { createContext, useState } from "react";
+import Cookies from "js-cookie";
+import PropTypes from 'prop-types';
+
+// Create the context
+const AuthContext = createContext();
+
+// Create a provider component
+export const AuthProvider = ({ children }) => {
+  const [authenticated, setAuthenticated] = useState(
+    !!Cookies.get("authorizationAdmin")
+  );
+
+  // console.log("tokennn:", Cookies.get("authorizationAdmin"));
+
+  const login = () => {
+    setAuthenticated(true);
+  };
+
+  const logout = () => {
+    Cookies.remove("authorizationAdmin");
+    setAuthenticated(false);
+  };
+  console.log("authenticated...authenticated",authenticated)
+
+  return (
+    <AuthContext.Provider value={{ authenticated, login, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+AuthProvider.propTypes = {
+    children: PropTypes.node.isRequired,
+  };
+
+export default AuthContext;

src/components/header/AppHeaderDropdown.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import {
   CAvatar,
   CBadge,
@@ -24,8 +24,17 @@ import {
 import CIcon from '@coreui/icons-react'
 
 import profile from './../../assets/brand/logo.png'
+import AuthContext from '../../authContext'
+import { useNavigate } from 'react-router-dom'
 
 const AppHeaderDropdown = () => {
+  const { logout } = useContext(AuthContext)
+  const navigate = useNavigate()
+  const handleLogout = () => {
+    logout()
+    navigate('/login')
+    window.location.reload()
+  }
   return (
     <CDropdown variant="nav-item">
       <CDropdownToggle placement="bottom-end" className="py-0 pe-0" caret={false}>
@@ -85,7 +94,7 @@ const AppHeaderDropdown = () => {
           </CBadge>
         </CDropdownItem> */}
         {/* <CDropdownDivider /> */}
-        <CDropdownItem href="#">
+        <CDropdownItem onClick={() => handleLogout()}>
           <CIcon icon={cilAccountLogout} className="me-2" />
           LogOut
         </CDropdownItem>

src/index.js

@@ -1,13 +1,17 @@
+/* eslint-disable prettier/prettier */
 import React from 'react'
 import { createRoot } from 'react-dom/client'
 import { Provider } from 'react-redux'
 import 'core-js'
 
 import App from './App'
 import store from './store'
+import { AuthProvider } from './authContext'
 
 createRoot(document.getElementById('root')).render(
   <Provider store={store}>
+     <AuthProvider>
     <App />
-  </Provider>,
+    </AuthProvider>
+  </Provider>
 )