Question 173730 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to secure React Routes Using React v18 and React Router Dom v6.11

App.js

import { useKeycloak } from "@react-keycloak/web"

  const { initialized } = useKeycloak()
  if (!initialized) {
    return <h3>Loading ... !!!</h3>
  }
  return (
    <>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<LandingPage />} />
          <Route path="/secure" element={<TestCompoent />} /> //How to secure this component
        </Routes>
      </BrowserRouter>
    </>
  )
}

TestComponent.tsx

function TestCompoent() {
  return <div>Private</div>
}

export default TestCompoent

How to create a component PrivateRoute, that checks is user is logged in, otherwise navigate to keycloak login

Tags:

2

Answers


  1. 0

    Unfortunately, you can’t completely secure something on the web interface, but you can restrict access to a private link! For example:
    You can create Wrapper for private links:

    <Route element={<RequireAuthRoute />}>
 <Route path="trainer" element={<TrainerComponent />} />
 <Route path="admin" element={<AdminComponent />} />
</Route>

    and wrapper. In this wrapper you can check, is user valid, AUTHENTICATED or another checking:

    import { useLocation, Outlet, Navigate } from "react-router-dom";
import { useSelector } from "react-redux";
import { authStatusSelector } from "../redux/features/auth/auth.slice";
import { FETCH_STATUS } from "../redux/types";

const RequireAuthRoute = () => {
  const location = useLocation();
  const status = useSelector(authStatusSelector);

  if (status !== FETCH_STATUS.AUTHENTICATED) {
    return <Navigate to="/main" state={{ from: location }} />;
  }

  return <Outlet />;
}

export default RequireAuthRoute;
    Login or Signup to reply.
  2. 0 
    function TestCompoent({children}) {

if (isLogged) {
  return children;
} else {
  return <h3>Loading ... !!!</h3>
}

export default TestCompoent;

    App.js

    return (
    <>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<LandingPage />} />
          <Route path="/secure" element={<TestCompoent>your component here</TestCompoent>} /> //How to secure this component
        </Routes>
      </BrowserRouter>
    </>
  )

    Explaination:
    Here TestComponent is PrivateRoute inside it checks if user is logged or not. You can replace isLogged veriable with your condition which checks the user logining. if user is not logged in it will return Loading... (where you can return you component where you want to navigate user when user is not logged in.)

    if user is alredy logged in then if will return children which is component.

    In App.js as you can see:

    <TestCompoent>your component here</TestCompoent>

    your component here you can put your secure component which is wrapped by TestComponent [every thing you wrap with TestComponent will be display as children in TestCompoment].

    you just need to wrap your secure component with TestComponent wrapper 🙂
    if you still don’t understand feel free to ping me on discord [discord link is in my bio].

    Hope you got your answer. if you see any mistake or have any suggestions feel free to comment here.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search