Negligible Psychological Misery

    @react-keycloak/web
    TypeScript icon, indicating that this package has built-in type declarations

    3.4.0 • Public • Published

    React Keycloak

    React Keycloak

    React bindings for Keycloak

    NPM (scoped)

    License lerna GitHub contributors Github Issues

    Gitter


    Table of Contents


    Install

    React Keycloak requires:

    • React 16.8 or later
    • keycloak-js 9.0.2 or later
    yarn add @react-keycloak/web

    or

    npm install --save @react-keycloak/web

    Getting Started

    Setup Keycloak instance

    Create a keycloak.js file in the src folder of your project (where App.js is located) with the following content

    import Keycloak from 'keycloak-js'
     
    // Setup Keycloak instance as needed
    // Pass initialization options as required or leave blank to load from 'keycloak.json'
    const keycloak = new Keycloak()
     
    export default keycloak

    Setup KeycloakProvider

    Wrap your App inside ReactKeycloakProvider and pass the keycloak instance as prop

    import { ReactKeycloakProvider } from '@react-keycloak/web'
     
    import keycloak from './keycloak'
     
    // Wrap everything inside KeycloakProvider
    const App = () => {
      return <ReactKeycloakProvider authClient={keycloak}>...</ReactKeycloakProvider>
    }

    N.B. If your using other providers (such as react-redux) it is recommended to place them inside ReactKeycloakProvider.

    ReactKeycloakProvider automatically invokes keycloak.init() method when needed and supports the following props:

    • initOptions, contains the object to be passed to keycloak.init() method, by default the following is used

      {
        onLoad: 'check-sso',
      }
      

      for more options see Keycloak docs.

    • LoadingComponent, a component to be displayed while keycloak is being initialized, if not provided child components will be rendered immediately. Defaults to null

    • isLoadingCheck, an optional loading check function to customize LoadingComponent display condition. Return true to display LoadingComponent, false to hide it.

      Can be implemented as follow

      ;(keycloak) => !keycloak.authenticated
    • onEvent, an handler function that receives events launched by keycloak, defaults to null.

      It can be implemented as follow

      ;(event, error) => {
        console.log('onKeycloakEvent', event, error)
      }

      Published events are:

      • onReady
      • onInitError
      • onAuthSuccess
      • onAuthError
      • onAuthRefreshSuccess
      • onAuthRefreshError
      • onTokenExpired
      • onAuthLogout
    • onTokens, an handler function that receives keycloak tokens as an object every time they change, defaults to null.

      Keycloak tokens are returned as follow

      {
        "idToken": string,
        "refreshToken": string,
        "token": string
      }

    Hook Usage

    When a component requires access to Keycloak, you can use the useKeycloak Hook.

    import { useKeycloak } from '@react-keycloak/web'
     
    export default () => {
      // Using Object destructuring
      const { keycloak, initialized } = useKeycloak()
     
      // Here you can access all of keycloak methods and variables.
      // See https://www.keycloak.org/docs/latest/securing_apps/index.html#javascript-adapter-reference
     
      return (
        <div>
          <div>{`User is ${
            !keycloak.authenticated ? 'NOT ' : ''
          }authenticated`}</div>
     
          {!!keycloak.authenticated && (
            <button type="button" onClick={() => keycloak.logout()}>
              Logout
            </button>
          )}
        </div>
      )
    }

    External Usage (Advanced)

    If you need to access keycloak instance from non-React files (such as sagas, utils, providers ...), you can import the instance directly from the keycloak.js file.

    The instance will be initialized by react-keycloak but you'll need to be carefull when using the instance and avoid setting/overriding any props, you can however freely access the exposed methods (such as refreshToken, login, etc...).

    Examples

    See inside examples folder of @react-keycloak/react-keycloak-examples repository for various demo implementing this library main features.

    Guides and Articles

    Contributing

    See the contributing guide to learn how to contribute to the repository and the development workflow.

    License

    MIT


    If you found this project to be helpful, please consider buying me a coffee.

    buy me a coffee

    Install

    npm i @react-keycloak/web

    DownloadsWeekly Downloads

    30,858

    Version

    3.4.0

    License

    MIT

    Unpacked Size

    45.3 kB

    Total Files

    34

    Last publish

    Collaborators

    • irontony
    • panz3r