secure-react-keycloak
v1.0.2
Published
Secure React Routes & Component with Keycloak
Downloads
12
Readme
secure-react-keycloak
Secure React Routes & Component with Keycloak This is a library which provides utilities to restrict React routes & component/function This library uses React Keycloak library as a based library. If you feel lazy to write your own utilities, this is the library you looking for.
Install
npm install --save secure-react-keycloak
Usage
Create a keycloak.js
file in the src folder of your project with the following content to set up a Keycloak instance as needed.
Set up a Keycloak instance
import Keycloak from 'keycloak-js'
const keycloakConfig = {
url: 'http://localhost:8080/auth',
realm: 'Demo',
clientId: 'react-app'
}
const keycloak = new Keycloak(keycloakConfig);
export default keycloak
Then Wrap your App inside KeycloakProvider
and pass the keycloak
instance as prop
import React from 'react';
import { KeycloakProvider } from 'secure-react-keycloak';
import keycloak from './keycloak'
// Wrap everything inside KeycloakProvider
const App = () => {
return (
<KeycloakProvider keycloak={keycloak}>
<div className="App"> ... </div>
</KeycloakProvider>
)
}
Restrict Routes - Usage
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Menu from '../components/Menu';
import HomePage from '../pages/HomePage';
import ProtectedPage from '../pages/ProtectedPage';
import { PrivateRoute, useKeycloak } from 'secure-react-keycloak';
export const AppRouter = () => {
const [, initialized] = useKeycloak();
if (!initialized) {
return <h3>Loading ... !!!</h3>;
}
return (<>
<Menu />
<BrowserRouter>
<Switch>
<Route exact path="/" component={HomePage} />
<PrivateRoute roles={['RealmAdmin']} path="/protected" component={ProtectedPage} />
</Switch>
</BrowserRouter>
</>
);
};
Restrict Element - Usage
import React from 'react';
import { useKeycloak, AuthorizedElement } from 'secure-react-keycloak'
const HomePage = () => {
const [keycloak, initialized] = useKeycloak();
return (<div>
<h1>Home Page</h1>
<strong>Anyone can access this page</strong>
<h2>Only Realm Admin Can Access below Button</h2>
<AuthorizedElement roles={['RealmAdmin']}><h1>Realm Admin </h1></AuthorizedElement>
<h2>Only Client Admin Can Access below Button</h2>
<AuthorizedElement roles={['ClientAdmin']}><h1>Client Admin</h1></AuthorizedElement>
{initialized ? keycloak.authenticated && <pre>{JSON.stringify(keycloak, undefined, 2)}</pre> :
<h2>keycloak initializing ....!!!!</h2>}
</div>)
}
export default HomePage
Restrict with function - Usage
import AuthorizedFunction from 'secure-react-keycloak';
export type currentUserRole = any[] | undefined;
export default function MyButton({ roles, children }: any) {
return AuthorizedFunction(roles) && <Button>MyButton</Button>;
}
License
MIT © cagline