Skip to main content


Many SPAs use a framework such as React to simplify the creation of interactive experiences. We suggest the use of the open source react-keycloak library to make securing React applications easier.


Follow the setup instructions in the library documentation

Setup Keycloak instance

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

import Keycloak from "keycloak-js";

// Pass initialization options as required or leave blank to load from 'keycloak.json'
const keycloak = new Keycloak();

export default keycloak;

Further documentation on setup of the Keycloak instance is in the official documentation

Setup ReactKeycloakProvider

Once you have set up the Keycloak instance there, you can easily wrap components you wish to protect using the ReactKeycloakProvider.

import { ReactKeycloakProvider } from "@react-keycloak/web";

import keycloak from "./keycloak";

// Wrap everything inside KeycloakProvider
const App = () => {
return (
<ReactKeycloakProvider authClient={keycloak}>...</ReactKeycloakProvider>

Using hooks

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

return (
<div>{`User is ${
!keycloak.authenticated ? "NOT " : ""

{!!keycloak.authenticated && (
<button type="button" onClick={() => keycloak.logout()}>