# @keycloak-react/web > React bindings for Keycloak javascript adapter Latest version **4.0.1** (published 2020-04-29) · MIT license · 0 weekly downloads ## Install ```sh npm install @keycloak-react/web pnpm add @keycloak-react/web yarn add @keycloak-react/web bun add @keycloak-react/web ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 4.0.1 | | Published | 2020-04-29 | | First published | 2020-04-29 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 4 | | Unpacked size | 48.1 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Jeff Tian | | Maintainers | jeff-tian | | Keywords | react, keycloak, keycloak-js | ## Links - npm: https://www.npmjs.com/package/@keycloak-react/web - Repository: https://github.com/jeff-tian/keycloak-react - Homepage: https://github.com/jeff-tian/keycloak-react#readme - Issues: https://github.com/jeff-tian/keycloak-react/issues - Funding: https://www.patreon.com/reactkeycloak - npm.io page: https://npm.io/package/@keycloak-react/web ## Dependencies (4) - [prop-types](https://npm.io/package/prop-types.md) ^15.7.2 - [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.9.0 - [@keycloak-react/core](https://npm.io/package/@keycloak-react/core.md) ^4.0.1 - [hoist-non-react-statics](https://npm.io/package/hoist-non-react-statics.md) ^3.3.2 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 4.0.1 (latest) — 2020-04-29 ## README ![React Keycloak](/art/react-keycloak-logo.png?raw=true 'React Keycloak Logo') # React Keycloak > React bindings for [Keycloak](https://www.keycloak.org/) [![NPM (scoped)](https://img.shields.io/npm/v/@keycloak-react/web?label=npm%20%7C%20web)](https://www.npmjs.com/package/@keycloak-react/web) [![License](https://img.shields.io/github/license/jeff-tian/keycloak-react.svg)](https://github.com/jeff-tian/keycloak-react/blob/master/LICENSE.md) [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/) [![Contributors](https://img.shields.io/badge/contributors-2-orange.svg)](#contributors) [![Gitter](https://img.shields.io/gitter/room/react-keycloak/community)](https://gitter.im/react-keycloak/community) [![Dependencies](https://img.shields.io/david/jeff-tian/keycloak-react.svg)](https://github.com/jeff-tian/keycloak-react) [![Build Status](https://travis-ci.com/jeff-tian/keycloak-react.svg?branch=master)](https://travis-ci.com/jeff-tian/keycloak-react) [![Coverage Status](https://coveralls.io/repos/github/jeff-tian/keycloak-react/badge.svg?branch=master)](https://coveralls.io/github/jeff-tian/keycloak-react?branch=master) [![Github Issues](https://img.shields.io/github/issues/jeff-tian/keycloak-react.svg)](https://github.com/jeff-tian/keycloak-react/issues) --- ## Table of Contents - [Install](#install) - [Support](#support) - [Getting Started](#getting-started) - [Setup Keycloak instance](#setup-keycloak-instance) - [Setup KeycloakProvider](#setup-keycloakprovider) - [HOC Usage](#hoc-usage) - [Hook Usage (React >=16.8 required)](#hook-usage-react-168-required) - [External Usage (Advanced)](#external-usage-advanced) - [Examples](#examples) - [Contributors](#contributors) --- ## Install React Keycloak requires: - React **16.0** or later - `keycloak-js` **9.0.2** or later ```shell yarn add @keycloak-react/web ``` or ```shell npm install --save @keycloak-react/web ``` or as a `UMD` package through `unpkg` - one for development: https://unpkg.com/@keycloak-react/web@latest/dist/umd/react-keycloak-web.js - one for production: https://unpkg.com/@keycloak-react/web@latest/dist/umd/react-keycloak-web.min.js ## Support | version | keycloak-js version | | ------- | ------------------- | | v2.0.0+ | 9.0.2+ | | v1.x | >=8.0.2 <9.0.2 | ## 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 ```js 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 `KeycloakProvider` and pass the `keycloak` instance as prop ```js import { KeycloakProvider } from '@keycloak-react/web' import keycloak from './keycloak' // Wrap everything inside KeycloakProvider const App = () => { return ... } ``` **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](https://www.keycloak.org/docs/latest/securing_apps/index.html#init-options). - `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 ```js ;(keycloak) => !keycloak.authenticated ``` - `onEvent`, an handler function that receives events launched by `keycloak`, defaults to `null`. It can be implemented as follow ```js ;(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 ```json { "idToken": string, "refreshToken": string, "token": string } ``` ### HOC Usage When a component requires access to `Keycloak`, wrap it inside the `withKeycloak` HOC. ```js import { withKeycloak } from '@keycloak-react/web' 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 (
) } 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. ```js import { useKeycloak } from '@keycloak-react/web' 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 (
{`User is ${ !keycloak.authenticated ? 'NOT ' : '' }authenticated`}
{!!keycloak.authenticated && ( )}
) } ``` ### 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` for various demo implementing this library main features. **Note:** The demo apps are not meant to be **production-ready** nor **starter-kit** s but just a way to show this module components and their usage. ## Contributors Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

Mattia Panzeri
🤔 💻 📖 🐛 🚧 📦 💬 👀 ⚠️ 💡
JannesD
🐛 💻
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! --- If you found this project to be helpful, please consider buying me a coffee. [![buy me a coffee](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://buymeacoff.ee/4f18nT0Nk) --- _Source: https://npm.io/package/@keycloak-react/web · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._