React secure a route only to specific roles

Question

import React from "react";

import { Link, Navigate } from "react-router-dom";
import { isAutheticated } from "../auth";

export const AdminAuth = ({ children, redirectTo }) => {
  let auth = isAutheticated().user_Role;
  return auth === "admin" ? children : <Navigate to={redirectTo} />;
};

i'm using react router dom to authenticate the user role but the user role is stored it in the localstorage and can be manipulated any time and my admin route be exposed. i'm securing my backend so they cannot access admin routes of my nodejs but they can access the admin route in reactjs..

my frontend ui is exposed to anyone who could modify their role on LOCAL STORAGE ?

Yes. There are many ways to achieve this but if you many roles and you wanna render pages according to role based access. Here's an interesting article that helped me https://javascript.plainenglish.io/role-based-authorization-role-based-access-control-v-2-in-react-js-cb958e338f4b — Mayur Sonawane, Feb 01 '23 at 08:36

score 0 · Answer 1 · answered Feb 01 '23 at 08:38

0

you have to do more than update localStorage, you need to update state to trigger a re-render:

const [user, setUser] = useState()

return <Router>
  <Routes>
    <Route path="/" element={user ? <Home> : <Login setUser={setUser}/>} />
  </Routes>
</Router>

answered Feb 01 '23 at 08:38

pguardiario

53,827
19
119
159

1

but still doesn't guard against someone who could modify the role from local storage @pguardiario – George Prethesh Feb 01 '23 at 09:40
my ui is still exposed to the person who modify role local storage – George Prethesh Feb 01 '23 at 11:01
You could decode a jwt before setUser I guess. – pguardiario Feb 02 '23 at 01:06

React secure a route only to specific roles

1 Answers1