Fix: Redirect /login to /dashboard if user already logged in

Author: kevin-lann

course-matrix/frontend/src/App.tsx

@@ -5,6 +5,7 @@ import Dashboard from "./pages/Dashboard/Dashboard";
 import SignupPage from "./pages/Signup/SignUpPage";
 import AuthRoute from "./components/auth-route";
 import SignupSuccessfulPage from "./pages/Signup/SignupSuccessfulPage";
+import LoginRoute from "./components/login-route";
 
 /**
  * App Component
@@ -36,7 +37,7 @@ function App() {
         <Route path="*" element={<Navigate to="/login" />} />
         <Route path="/" element={<Navigate to="/login" />} />
         <Route path="signup-success" element={<SignupSuccessfulPage />} />
-        <Route path="/login" element={<LoginPage />} />
+        <Route path="/login" element={<LoginRoute component={LoginPage} />} />
         <Route path="/signup" element={<SignupPage />} />
         <Route
           path="/dashboard/*"

course-matrix/frontend/src/components/auth-route.tsx

@@ -6,14 +6,18 @@ interface AuthRouteProps {
   component: React.ComponentType; // Type for the component prop
 }
 
+/**
+ * Login Route
+ * 
+ * Checks if a user is logged in (session exists). If not then redirect to login.
+ */
 const AuthRoute: React.FC<AuthRouteProps> = ({ component: Component }) => {
   const { data, isLoading, error } = useGetSessionQuery();
 
   if (isLoading) {
     return <LoadingPage />;
   }
 
-  // TODO modify check based on return type of data
   return data?.user ? <Component /> : <Navigate to="/login" replace />;
 };
 

course-matrix/frontend/src/components/login-route.tsx

@@ -0,0 +1,20 @@
+import { useGetSessionQuery } from "@/api/authApiSlice";
+import { Navigate } from "react-router-dom";
+import LoadingPage from "@/pages/Loading/LoadingPage";
+
+interface AuthRouteProps {
+  component: React.ComponentType; // Type for the component prop
+}
+
+/**
+ * Login Route
+ * 
+ * Checks if a user session exists in localstorage. If so then redirect to dashboard.
+ */
+const LoginRoute: React.FC<AuthRouteProps> = ({ component: Component }) => {
+  const user = localStorage.getItem("userInfo");
+
+  return user ? <Navigate to="/dashboard" replace /> : <Component /> ;
+};
+
+export default LoginRoute;