This package has been deprecated

    Author message:

    react-keycloak has been migrated to @react-keycloak/web

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

    8.0.1-191210 • Public • Published

    React Keycloak

    React Keycloak

    React bindings for Keycloak

    License Build Status Coverage Status NPM version

    Dependencies Github Issues

    Install

    React Keycloak requires:

    • React 16.0 or later
    • a version of keycloak-js matching the main version (e.g. "react-keycloak": "8.0.1" => "keycloak-js": "8.0.1-yymmdd")
    yarn add react-keycloak
    

    or

    npm install --save react-keycloak
    

    Getting Started

    Setup KeycloakProvider

    Wrap your App inside KeycloakProvider and pass a keycloak instance as prop

    import Keycloak from 'keycloak-js';
    import { KeycloakProvider } from 'react-keycloak';
     
    // Setup Keycloak instance as needed
    const keycloak = new Keycloak();
     
    // Wrap everything inside KeycloakProvider
    const App = () => {
      return <KeycloakProvider keycloak={keycloak}>...</KeycloakProvider>;
    };

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

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

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

      {
        onLoad: 'check-sso',
        promiseType: 'native',
      }
      

      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
      • 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,
      }

    HOC Usage

    When a component requires access to Keycloak, wrap it inside the withKeycloak HOC.

    import { withKeycloak } from 'react-keycloak';
     
    const LoginPage = ({ keycloak, keycloakInitialized }) => {
      // 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>
          <button type="button" onClick={() => keycloak.login()}>
            Login
          </button>
        </div>
      );
    };
     
    export default withKeycloak(LoginPage);

    Hook Usage (React >=16.8 required)

    Alternately, when a component requires access to Keycloak, you can also use the useKeycloak Hook.

    import { useKeycloak } from 'react-keycloak';
     
    export default () => {
      // Using array destructuring
      const [keycloak, initialized] = useKeycloak();
      // or 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>
      );
    };

    Demo

    See inside src/demo for a demo implementing this library main features.

    To run the demo app:

    • Clone/Download this repo
    • Install dependencies (npm install or yarn)
    • Place a valid keycloak.json file inside public folder or setup Keycloak instance inside src/demo/App.js following Keycloak guide
    • Run the demo (npm start or yarn start)

    Note: The demo app is not meant to be production-ready nor a starter-kit but just a way to show this module components and their usage.

    Credits

    Library bootstrapped using DimiMikadze/create-react-library and inspired by react-redux


    Made with ✨ & ❤️ by Mattia Panzeri and contributors

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

    buy me a coffee

    Install

    npm i react-keycloak

    DownloadsWeekly Downloads

    1,013

    Version

    8.0.1-191210

    License

    MIT

    Unpacked Size

    68 kB

    Total Files

    8

    Last publish

    Collaborators

    • panz3r