How to create protected route using keycloak and React JS

Nirmal Ram — Mon, 15 Nov 2021 08:42:55 +0000

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;

How to change default title in client login screen using Keycloak?

Nirmal Ram — Mon, 15 Nov 2021 08:28:17 +0000

In your realm settings > HTML Display name

replace:

<div class="kc-logo-text"><span>Keycloak</span></div>

with your Application name that you wish to show on your login screen. you can also provide HTML code for using image instead of title

use

<img alt="..ALT-TEXT.." src="../../SOURCE" width="400"/>

to insert your logo instead

Happy Hacking..

DEV Community: Nirmal Ram

How to create protected route using keycloak and React JS

How to change default title in client login screen using Keycloak?