@digital-wafa/react-keycloak

a keycloak library for react

Usage no npm install needed!

<script type="module">
  import digitalWafaReactKeycloak from 'https://cdn.skypack.dev/@digital-wafa/react-keycloak';
</script>

README

react-keycloak logo

react-keycloak

npm version build codecov types size downloads license


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()