feat: refactor login component and update authentication flow; rename Overview to LoginPage and adjust navigation

Author: NarwhalChen

dashboard/src/content/login/index.tsx

@@ -3,7 +3,7 @@ import { Helmet } from 'react-helmet-async';
 
 import { styled } from '@mui/material/styles';
 import Logo from 'src/components/LogoSign';
-import Hero from './Login';
+import Login from './Login';
 
 const OverviewWrapper = styled(Box)(
   () => `
@@ -14,7 +14,7 @@ const OverviewWrapper = styled(Box)(
 `
 );
 
-function Overview() {
+export const LoginPage = () => {
   return (
     <OverviewWrapper>
       <Helmet>
@@ -25,11 +25,9 @@ function Overview() {
           <Logo />
         </Box>
         <Card sx={{ p: 10, mb: 10, borderRadius: 12 }}>
-          <Hero />
+          <Login />
         </Card>
       </Container>
     </OverviewWrapper>
   );
-}
-
-export default Overview;
+};

dashboard/src/contexts/AuthContext.tsx

@@ -126,13 +126,13 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
   }, [refreshTokenMutation]);
 
   const login = useCallback(
-    (accessToken: string, refreshToken: string) => {
+    async (accessToken: string, refreshToken: string) => {
       localStorage.setItem('accessToken', accessToken);
       localStorage.setItem('refreshToken', refreshToken);
       setToken(accessToken);
       setIsAuthorized(true);
-      fetchUserInfo();
-      navigate('/dashboards/crypto');
+      await fetchUserInfo();
+      navigate('/dashboard/overview');
     },
     [fetchUserInfo, navigate]
   );
@@ -150,35 +150,44 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     async function initAuth() {
       setIsLoading(true);
 
-      const storedToken = localStorage.getItem('accessToken');
-      if (!storedToken) {
-        setIsAuthorized(false);
-        setUser(null);
-        setIsLoading(false);
-        navigate('/');
-        return;
-      }
+      try {
+        const storedToken = localStorage.getItem('accessToken');
+        if (!storedToken) {
+          setIsAuthorized(false);
+          setUser(null);
+          setIsLoading(false);
+          return;
+        }
 
-      let isValid = await validateToken();
+        let isValid = await validateToken();
 
-      if (!isValid) {
-        isValid = await refreshAccessToken();
-      }
+        if (!isValid) {
+          isValid = await refreshAccessToken();
+        }
 
-      if (isValid) {
-        setIsAuthorized(true);
-        await fetchUserInfo();
-      } else {
+        if (isValid) {
+          const userFetched = await fetchUserInfo();
+          if (userFetched) {
+            setIsAuthorized(true);
+          } else {
+            throw new Error('Failed to fetch user info');
+          }
+        } else {
+          throw new Error('Invalid token');
+        }
+      } catch (error) {
+        console.error('Auth initialization error:', error);
         setIsAuthorized(false);
         setUser(null);
-        navigate('/');
+        localStorage.removeItem('accessToken');
+        localStorage.removeItem('refreshToken');
+      } finally {
+        setIsLoading(false);
       }
-
-      setIsLoading(false);
     }
 
     initAuth();
-  }, [validateToken, refreshAccessToken, fetchUserInfo, navigate]);
+  }, [validateToken, refreshAccessToken, fetchUserInfo]);
 
   if (isLoading) {
     return <div>Loading...</div>;

dashboard/src/router.tsx

@@ -7,6 +7,7 @@ import BaseLayout from './layouts/BaseLayout';
 
 import SuspenseLoader from './components/SuspenseLoader';
 import Login from './content/login/Login';
+import { LoginPage } from './content/login';
 
 const Loader = (Component) => (props) =>
   (
@@ -83,7 +84,7 @@ const routes: RouteObject[] = [
     children: [
       {
         path: '/',
-        element: <Login />
+        element: <LoginPage />
       },
       {
         path: '*',