@digital-wafa/react-keycloak

react-keycloak

---

a keycloak adapter for react with a protected route component that support react-router and reach-router

Installation

npm i @digital-wafa/react-keycloak

Usage

KeycloakProvider:

you should create an instance of keyclaok using the keycloak-js package or importing the link from your keycloak server directly which is recommanded to avoid compatibily issues.

const keycloakInstance = new Keycloak({
  url: "your keycloak url",
  realm: "your realm",
  clientId: "your client id",
  ....any other parameters
})

Then wrape your component with the keycloak provider, KeycloakProvider accept the following props :

Props	Required	Description
keycloak	yes	the keycloak instance you created
loginOptions	no	keycloak login options
initOptions	no	keycloak init options
loadingComponent	only if you use the included ProtectedRoute component	the loading component to show when redirecting to keycloak login page

import { KeycloakProvider } from "@digital-wafa/react-keycloak";


<KeycloakProvider
  keycloak={keycloak}
  loginOptions={{
    idpHint: "ei",
    scope: "phone",
  }}
>
  <App />
</KeycloakProvider>

finaly you can access the keycloak instance using the useKeycloakContext hook which return the following object:

{
  keycloak, // keycloak instance
  loginOptions, // keycloak login options
  initOptions, // keycloak init options
  authenticated // is the user authenticated or not
}

import { useKeycloakContext } from "@digital-wafa/react-keycloak";

const {keycloak, authenticated, loginOptions, initOptions} = useKeycloakContext();

or import the context if you are using a class component

import { keycloakContext } from "@digital-wafa/react-keycloak"

...

class YourClassComponent extends React.Component {
  static contextType = keycloakContext;
  const {keycloak, authenticated, loginOptions, initOptions} = this.context;
} 

NB: the token is refreshed automatically when it expire using the onTokenExpired event.

ProtectedRoute:

A useful component to protect your routes, it's compatible with react-router-dom and @reach/router

if the user is authenticated, he will see the desired page, if not he will be redirected to the keycloak login page.

react-router-dom example:

import { BrowserRouter as Router, Route } from 'react-router-dom';
import { ProtectedRoute } from "@digital-wafa/react-keycloak";

<Router>
    <ProtectedRoute
      RouteComponent={Route}
      ComponentToRender={YourPageComponent}
      path="/your-path"
    />
<Router>

@reach/router example:

when using @reach/router you don't need to use the ComponentToRender props

import { Router } from "@reach/router";
import { ProtectedRoute } from "@digital-wafa/react-keycloak";

<Router>
    <ProtectedRoute
      RouteComponent={YourPageComponent}
      path="/your-path"
    />
<Router>

getToken / getRefreshToken

Get the tokens which are stored automatically in localStorage after the login and the refreshToken actions.
To use outside your components

import { getToken, getRefreshToken } from "@digital-wafa/react-keycloak";

const token = getToken();
const refreshToken = getRefreshToken()