Keylcoak Provider

React binding for Keycloak

Table of Contents

• Install
• Getting Started
  • Setup Keycloak Configuration
  • Setup KeycloakAuthProvider
  • Context Usage
  • AccessControll Function Usage

Install

React keycloak-provider requires:

• keycloak-provider @latest

npm install keycloak-provider

Getting Started

Setup Keycloak Configuration

Create a any const veriable like const KeycloakConfig in the App component

 const keycloakConfig = {
    url: "",
    realm: "",
    clientId: "",
  };

Setup KeycloakAuthProvider

Created const KeycloakConfig veriable we will used in KeycloakAuthProvider in the App component

import { KeycloakAuthProvider } from "keycloak-provider"

// Wrap everything inside KeycloakAuthProvider
const App = () => {
  return <ReactKeycloakProvider keycloakConfig={keycloakConfig}>...</ReactKeycloakProvider>
}

1. If your using other providers (such as react-redux) it is recommended to place them inside KeycloakAuthProvider.
2. If your using <React.StrictMode></React.StrictMode> please make sure that you place them inside KeycloakAuthProvider otherwise it will cause infinite call to keycloak token .

KeycloakAuthProvider automatically invokes keycloak.init() method .

Context Usage

Import context from import { KeycloakContext } from "keycloak-provider"

When a component requires access to Keycloak, you can use the KeycloakContext and you can get all function provided by keycloak object using this like (keycloak.logout,kycloak.token).

• This context provide you two veriables
  • keycloak
  • authenticated

import { useContext } from "react";
import { KeycloakContext } from "keycloak-provider"

export default () => {
  // Using Object destructuring
  const {keycloak,authenticated} = useContext(KeycloakContext);

  return (
    <div>
      <div>{`User is ${
        !keycloak.authenticated ? 'NOT ' : ''
      }authenticated`}</div>

      {!!keycloak.authenticated && (
        <button type="button" onClick={() => keycloak.logout()}>
          Logout
        </button>
      )}
    </div>
  )
}

AccessControll Function Usage

import accessControll function from import { accessControll } from "keycloak-provider"

when you required to specify access from the scope provided by backend API's then you can do this by using this function to controll the access to ui components.

//this function will check that User Resource has read access to that role
  using token and return true and false value accordingly
  const Access = accessControll("User", "read", keyclaokToken)

After you can set it in useState hook or any veriable and add condition accordingly in your UI.

ex.

import { accessControll } from "keycloak-provider"


export default () => {

  const [buttonAccess,setButtonAccess] = useState(false);
  new Promise((resolve, reject) => {
     resolve(accessControll("LogoutButton", "read", keycloak?.token));
    }).then((response)=>{
     setButtonAccess(response)
  })

  return (
    <div>
      <div>{`User is ${
        !keycloak.authenticated ? 'NOT ' : ''
      }authenticated`}</div>

      {!!keycloak.authenticated && (
        {buttonAccess && <button type="button" onClick={() => keycloak.logout()}>
          Logout
        </button>}
      )}
    </div>
  )
}

Copyright (c) 2022. GESSA (www.gessa.io)