Question 233754 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Route protecting of a Login page in a React app

I’m trying to protect routes in my React app. The Home page is being protected, but I also want to stop the user to go back to the login page if the isLoggedIn is true, and if it is false then he can’t access the home and will be redirected to the Login page.
This is the PrivateRoutes that I have written to protect the routes which is protecting the home but the user can still access the Login page, how can I stop this?

PrivateRoutes.jsx:

import { Outlet, Navigate } from "react-router-dom";

const PrivateRoutes = () => {
  const isLoggedIn = true;
  return isLoggedIn ? <Outlet /> : <Navigate to="/login" />;
};

export default PrivateRoutes;

This is the App.jsx:

import { BrowserRouter, Route, Routes } from "react-router-dom";
import Login from "./pages/Login";
import SignUp from "./pages/SignUp";
import Home from "./pages/Home";
import PrivateRoutes from "./utils/PrivateRoutes";

function App() {
  return (
    <>
      <BrowserRouter>
        <Routes>
          <Route element={<PrivateRoutes />}>
            <Route index element={<Home />} path="/" exact />
          </Route>
          <Route path="/login" element={<Login />} />
        </Routes>
      </BrowserRouter>
    </>
  );
}

export default App;
Tags:

2

Answers


  1. 0

    import { Outlet, Navigate, useNavigate } from "react-router-dom";

    const PrivateRoutes = () => {
  const isLoggedIn = true; // Replace with your authentication logic
  const navigate = useNavigate();

  useEffect(() => {
    if (isLoggedIn) {
      navigate("/home");
    } else {
      navigate("/login");
    }
  }, [isLoggedIn, navigate]);

  return <Outlet />;
};

export default PrivateRoutes;

    isLoggedIn value with your actual authentication logic. This way, you
    ensure that the login and home pages are appropriately protected based
    on the user’s authentication status

    Login or Signup to reply.
  2. 0

    If you would like to prevent authenticated access to the "/login" route then you can also protect that route under a similar condition as the private routes. Create another layout route component that applies the inverse condition of the PrivateRoute component, e.g. it redirects users that are authenticated.

    Example:

    import { Outlet, Navigate } from "react-router-dom";

const PrivateRoute = () => {
  const isLoggedIn = true;
  return isLoggedIn 
    ? <Outlet />
    : <Navigate to="/login" replace />;
};

export default PrivateRoute;

    import { Outlet, Navigate } from "react-router-dom";

const AnonymousRoute = () => {
  const isLoggedIn = true;
  return isLoggedIn 
    ? <Navigate to="/" replace />
    : <Outlet />;
};

export default AnonymousRoute;

    import { BrowserRouter, Route, Routes } from "react-router-dom";
import Login from "./pages/Login";
import SignUp from "./pages/SignUp";
import Home from "./pages/Home";
import PrivateRoute from "./utils/PrivateRoute";
import AnonymousRoute from "./utils/AnonymousRoute";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route element={<PrivateRoute />}>
          <Route path="/" element={<Home />} />
        </Route>
        <Route element={<AnonymousRoute />}>
          <Route path="/login" element={<Login />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search