How to create protected route using keycloak and React JS

Once you done configure keycloak with react using keycloak adapter you can use keycloak default functions to create protected routes based on realm roles , client roles , user privileges , resource type.

below i share react code to demonstrate the inbuilt functions in keycloak-js library

to use library

npm i keycloak-js@12.0.1

import './App.css';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
import ClientAdmin from './component/ClientAdmin';
import ClientUser from './component/ClientUser';
import RealmAdmin from './component/RealmAdmin';
import SuperAdmin from './component/SuperAdmin';
import Unprotected from './component/Unprotected';
import Protected from './component/Protected';
import NoPermission from './component/NoPermission';

function App(props) {
  return (
    <Router>
    <div className="main-container">
      <nav>
        <h1>Demo App</h1>
        <p>Note : You will only see navigation menu based on your user privileges assigned by keycloak</p>
        <button onClick={()=>props.keycloak.logout()}>LOGOUT</button>
        <ul>
          <li>
            <Link to="/unprotected">Unprotected</Link>
          </li>
          <li>
            {props.keycloak.hasResourceRole('client1-admin') && !!props.keycloak.token ? <Link to="/client1-admin">client1-admin</Link>:  <span> /client1-admin [no access] </span>}
          </li>
          <li>
            {props.keycloak.hasResourceRole('client1-user') && !!props.keycloak.token ? <Link to="/client1-user">Client1-User</Link>:<span> /client1-user [no access] </span>}
          </li>
          <li>
            {props.keycloak.hasRealmRole('realm-client1') && !!props.keycloak.token ? <Link to="/realm-client">Realm-client1</Link>:<span> /realm-client [no access] </span>}
          </li>
          <li>
            {props.keycloak.hasRealmRole('super-admin') && !!props.keycloak.token ? <Link to="/super-admin">Super-Admin</Link>:<span> /super-admin [no access] </span>}
          </li>
          <li>
            {props.keycloak.hasResourceRole('client1-admin') && props.keycloak.hasRealmRole('realm-client1') && !!props.keycloak.token ? <Link to="/protected">Protected</Link>:<span> /protected [no access] </span>}
          </li>
        </ul>
      </nav>
      <h1>kEYCLOAK DEMO : SEE COMPONENT CHANGE BELOW</h1>

      {/* A <Switch> looks through its children <Route>s and
          renders the first one that matches the current URL. */}
      <Switch>
        <Route path="/unprotected">
           <Unprotected/>
        </Route>
        <Route path="/client1-admin">
          {props.keycloak.hasResourceRole('client1-admin') && !!props.keycloak.token ?  <ClientAdmin/> : <NoPermission/> }
        </Route>
        <Route path="/client1-user">
          {props.keycloak.hasResourceRole('client1-user') && !!props.keycloak.token ?<ClientUser/>: <NoPermission/> }
        </Route>
        <Route path="/realm-client">
           {props.keycloak.hasRealmRole('realm-client1') && !!props.keycloak.token ?<RealmAdmin/>: <NoPermission/> }
        </Route>
        <Route path="/super-admin">
          {props.keycloak.hasRealmRole('super-admin') && !!props.keycloak.token ?<SuperAdmin/>: <NoPermission/> }
        </Route>
        <Route path="/protected">
          {props.keycloak.hasResourceRole('client1-admin') && props.keycloak.hasRealmRole('realm-client1') && !!props.keycloak.token ? <Protected/>: <NoPermission/> }
        </Route>
      </Switch>
    </div>
  </Router>
  );
}

export default App;