React Keycloak Id

A simple react middleware using keycloak for a web

Installation

npm i react-keycloak-id

or

yarn add react-keycloak-id

How to use

1. setup your keycloak
2. note: don't use <React.StrictMode> outside of <ReactKeycloakIdProvider>
3. if using CRA (Create React App) remove <React.StrictMode> on file index.js or index.tsx
4. wrap everything inside ReactKeycloackIdProvider
5. code example on App.js or App.tsx

import React from 'react';
import { ReactKeycloackIdProvider } from 'react-keycloak-id';

const init = {
  url: process.env.REACT_APP_KEYCLOAK_URL as string,
  realm: process.env.REACT_APP_KEYCLOAK_REALM as string,
  clientId: process.env.REACT_APP_KEYCLOAK_CLIENT_ID as string,
}

function App() {
  return (
    <ReactKeycloackIdProvider init={init}>
      <React.StrictMode>
        {/* Your component */}
      </React.StrictMode>
    </ReactKeycloackIdProvider>
  );
}

export default App;

---

ReactKeycloakIdProvider

ReactKeycloakIdProvider for wrap everything components, router, redux and others

ReactKeycloakIdProvider Props

Props	Type	Default	Required
children	JSX.Element, ReactNode	-	true
init	object{Init}	-	true
initOptions	object{Init Options}	{onLoad: "login-required", checkLoginIframe: false}	false
loadingComponent	JSX.Element, ReactNode, string	Loading...	false
errorComponent	JSX.Element, ReactNode, string	Something went error!	false

Init

Props	Type	Default	Required
url	string	-	true
realm	string	-	true
clientId	string	-	true

---

useReactKeycloackId

useReactKeycloackId hook of ReactKeycloackId

properties of hook useReactKeycloackId

1. countDown

countDown time if used onCountDown of token or refresh token

type: object {remains: number; minutes: number; seconds: number;}

2. onCountDown

onCountDown time function of token or refresh token

type: (from: "token" | "refresh-token") => void

usage example countDown & onCountDown:

export default = () => {
  const { countDown, onCountDown } = useReactKeycloackId();

  useEffect(() => {
    const interval = setInterval(() => onCountDown("refresh-token"), 1000);
    return () => clearInterval(interval);
  }, []);

  return (
    <div>
      <span>
        {countDown.minutes} minutes {countDown.seconds} seconds
      </span>
    </div>
  )
}

3. keycloakOnClick

This function is used to refresh the token when the token has run out which can be used for other functions that require tokens. by using this function you no longer need to manually create a refresh token. you just put functions that require a token into the arguments of this function. there are two arguments inside this function.

1. Callback function [cb]: any[], which can be used to put your function and can be multiple functions.
2. Options Object {onError?: (err: boolean) => void; minValidity?: number | 5}. this is optional.

type: ([...cb]: any[], { onError?: (err: boolean) => void; minValidity?: number | 5 }) => Promise<void>

usage example keycloakOnClick:

export default = () => {
  const { keycloakOnClick } = useReactKeycloackId()

  const func1 = () => {
    console.log("1")
  }

  const func2 = () => {
    console.log("2")
  }

  function onErrorRefreshToken(err: boolean) {
    if(err) {
      console.log("Token was expired ", err)
    }
  }

  const options = {
    onError: onErrorRefreshToken
  }

  return (
    <button onClick={() => keycloakOnClick([testClick1, testClick2], options)}>Click Me For Refresh Token (If expired)</button>
  )
}

More details properties of hook useReactKeycloackId

---

Usage example:

import React, { useEffect } from "react";
import { useReactKeycloackId } from "react-keycloak-id";

export default () => {
    const dataKeycloak = useReactKeycloackId();
    const { idTokenParsed, logout } = useReactKeycloackId();

    useEffect(() => {
        console.log(dataKeycloak);
    }, []);

    return (
        <div>
            Name: {idTokenParsed?.name}
            <br />
            <button onClick={() => logout()}>Logout</button>
        </div>
    );
};

Example with "login-required" initial

Demo code with "login-required" initial

---

Example with "check-sso" initial

Demo code with "check-sso" initial