routing after authrntication changed to dashboard from /home

Author: Arunkoo

Client/src/app/router.tsx

@@ -6,6 +6,7 @@ import LoginPage from "../pages/LoginPage";
 import ProtectedRoute from "../components/ProtectedRoute";
 import DashBoard from "../pages/DashBoard";
 import SignupPage from "../pages/SignupPage";
+import RedirectIfLoggedIn from "../components/RedirectIfLoggedIn";
 
 const router = createBrowserRouter([
   {
@@ -14,17 +15,27 @@ const router = createBrowserRouter([
     children: [
       {
         index: true,
+        element: <HomePage />, // public
+      },
+
+      {
+        path: "login",
         element: (
-          <ProtectedRoute>
-            <HomePage />
-          </ProtectedRoute>
+          <RedirectIfLoggedIn>
+            <LoginPage />
+          </RedirectIfLoggedIn>
         ),
       },
+
       {
-        path: "Login",
-        element: <LoginPage />,
+        path: "register",
+        element: (
+          <RedirectIfLoggedIn>
+            <SignupPage />
+          </RedirectIfLoggedIn>
+        ),
       },
-      { path: "Register", element: <SignupPage /> },
+
       {
         path: "dashboard",
         element: (

Client/src/components/RedirectIfLoggedIn.tsx

@@ -0,0 +1,15 @@
+import { Navigate } from "react-router-dom";
+import { useAuthUser } from "../auth/auth.store";
+interface ProtectedRouteProps {
+  children: React.ReactNode;
+}
+const RedirectIfLoggedIn: React.FC<ProtectedRouteProps> = ({ children }) => {
+  const user = useAuthUser();
+  if (user) {
+    return <Navigate to="/dashboard" replace />;
+  }
+
+  return children;
+};
+
+export default RedirectIfLoggedIn;

Client/src/components/login-form.tsx

@@ -36,7 +36,12 @@ export function LoginForm({
   const navigate = useNavigate();
   const user = useAuthUser();
   const location = useLocation();
-  const fromPath = location.state?.from?.pathname || "/";
+  const fromPath =
+    location.state?.from?.pathname &&
+    location.state?.from?.pathname !== "/login"
+      ? location.state.from.pathname
+      : "/dashboard";
+
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   if (user) {

Client/src/components/signup-form.tsx

@@ -53,7 +53,7 @@ export function SignupForm({
 
     try {
       await register({ name, email, password });
-      navigate("/", { replace: true });
+      navigate("/dashboard", { replace: true });
     } catch (err) {
       console.log("Registration failed on frontend side.", err);
     }