resolves login issues (#89)

3um-Group · Oct 4, 2024 · 40a063a · 40a063a
2 parents 448d72c + f576fb7
commit 40a063a
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 11 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,21 +1,32 @@
 import React, { useState, useEffect } from 'react';
-import { Auth0Provider } from '@auth0/auth0-react';
+import { Auth0Provider, useAuth0 } from '@auth0/auth0-react';
 import { Header } from '@3um-group/atomic-sdk';
 import AppRoutes from './routes/AppRoutes';
 import SidebarItems from './components/Sidebar/SidebarItems';
 import SplashScreen from './pages/SplashScreen';
 import useAuth from './hooks/useAuth';
 
 const App: React.FC = () => {
+    const { isAuthenticated, loginWithRedirect, isLoading } = useAuth0();
     const [loading, setLoading] = useState(true);
+    const [isRedirecting, setIsRedirecting] = useState(false);
 
     useEffect(() => {
         const timer = setTimeout(() => {
             setLoading(false);
+
+            if (!isAuthenticated && !isRedirecting && !isLoading) {
+                setIsRedirecting(true);
+                loginWithRedirect();
+            }
         }, 2000);
 
         return () => clearTimeout(timer);
-    }, []);
+    }, [isAuthenticated, isRedirecting, loginWithRedirect, isLoading]);
+
+    if (loading || isLoading || (!isAuthenticated && !isRedirecting)) {
+        return <SplashScreen />;
+    }
 
     return (
         <Auth0Provider

diff --git a/src/components/Sidebar/SidebarItems.tsx b/src/components/Sidebar/SidebarItems.tsx
@@ -1,14 +1,15 @@
 import React from 'react';
 import { FaHome, FaFileAlt, FaWallet, FaUser } from 'react-icons/fa';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import useAuth from '../../hooks/useAuth';
 
 export const SidebarItems: React.FC = () => {
   const { isAuthenticated, loginWithRedirect, logout } = useAuth();
+  const navigate = useNavigate();
 
   const handleLogout = () => {
     logout();
-    window.location.href = window.location.origin;
+    navigate('/');
   };
 
   const menuItems = [
@@ -34,6 +35,7 @@ export const SidebarItems: React.FC = () => {
               src="/assets/3UM-dark-logo.png" 
               alt="Company Logo" 
               className="w-20 h-20 mb-4 rounded-full border-4 border-gray-700 shadow-md" 
+
             />
           </Link>
           <h2 className="text-3xl font-extrabold tracking-wide">
@@ -46,13 +48,23 @@ export const SidebarItems: React.FC = () => {
           <ul className="space-y-4">
             {menuItems.map((item, index) => (
               <li key={index}>
-                <Link
-                  to={item.link}
-                  className="flex items-center space-x-4 py-3 px-6 text-lg font-medium hover:bg-gray-700 hover:text-white transition-colors duration-200"
-                >
-                  <span className="text-xl">{item.icon}</span>
-                  <span>{item.name}</span>
-                </Link>
+                {item.link === '#' ? (
+                  <button
+                    onClick={() => item.onClick && item.onClick()}
+                    className="flex items-center space-x-4 py-3 px-6 text-lg font-medium hover:bg-gray-700 hover:text-white transition-colors duration-200 w-full text-left"
+                  >
+                    <span className="text-xl">{item.icon}</span>
+                    <span>{item.name}</span>
+                  </button>
+                ) : (
+                  <Link
+                    to={item.link}
+                    className="flex items-center space-x-4 py-3 px-6 text-lg font-medium hover:bg-gray-700 hover:text-white transition-colors duration-200"
+                  >
+                    <span className="text-xl">{item.icon}</span>
+                    <span>{item.name}</span>
+                  </Link>
+                )}
               </li>
             ))}
           </ul>