React Keycloak Id

A simple react middleware using keycloak for a web

Installation

``bash
npm i react-keycloak-id
`

or

`bash
yarn add react-keycloak-id
`

How to use

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

`javascript
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 (


{/ Your component /}


);
}

export default App;
`




---

$3

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 |




---

$3

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:

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

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

return (



)
}
`
#### 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



usage example keycloakOnClick:

`javascript
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 (
keycloakOnClick([testClick1, testClick2], options)}>Click Me For Refresh Token (If expired)
)
}
`

More details properties of hook useReactKeycloackId


---



Usage example:

`javascript
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 (



);
};
``

$3

!Example

Demo code with "login-required" initial

---

$3

!Example

Demo code with "check-sso" initial