Skip to main content

React

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.

Example

Phase Two has a React project with sample code or view a live deployed version.

Keycloak has setup instructions in their 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 https://www.keycloak.org/docs/latest/securing_apps/#_javascript_adapter

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 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>
);
};