react-keycloak

@twoday/react-keycloak

Keycloak helper components, hooks, etc.

Helper components and hooks

useCurrentUser

import { useCurrentUser } from "@twoday/react-keycloak";

const user = useCurrentUser();

HasRole

fallback and children props are optional.

import { HasRole } from "@twoday/react-keycloak";

<HasRole realm="admin" fallback={<Unauthorized />}>
  <AdminPanel />
</HasRole>;

<HasRole realm={["foo", "bar"]}>...</HasRole>

<HasRole resource={{ "my-app": "editor" }} /* fallback={<Unauthorized />} */>
  <EditButton />
</HasRole>

Shorthand to check for realm and current clientId resource roles:

<HasRole admin>
  <AdminPanel />
</HasRole>

IsAuthenticated

fallback and children props are optional.

import { IsAuthenticated } from "@twoday/react-keycloak";

<IsAuthenticated fallback={<Public />}>
  <Private />
</IsAuthenticated>;

useHasRole

import { useHasRole } from "@twoday/react-keycloak";

const isAdmin = useHasRole({ realm: "admin" });

const isFooOrBar = useHasRole({ realm: ["foo", "bar"] });

const useIsAdmin = () => useHasRole({ realm: "admin" });

const isEditor = useHasRole({ resource: { "my-app": "editor" } });

const useIsEditor = () => useHasRole({ resource: { "my-app": "editor" } });

Shorthand to check for realm and current clientId resource roles:

const isAdmin = useHasRole("admin");
const isFooOrBar = useHasRole(["foo", "bar"]);

useIsAuthenticated

import { useIsAuthenticated } from "@twoday/react-keycloak";

const isAuthenticated = useIsAuthenticated();

ReactKeycloakProvider

ReactKeycloakProvider with all of the extensions below integrated.

withPageRefreshSupport

Stores token and refreshToken in localStorage. Authentication is shared live between browser tabs.

import { withPageRefreshSupport } from "@twoday/react-keycloak";
import { ReactKeycloakProvider as Provider } from "@react-keycloak/web";

const ReactKeycloakProvider = withPageRefreshSupport(Provider);

On logout, use useKeycloak from @twoday/react-keycloak, to sync logout with other tabs:

import { useKeycloak } from "@twoday/react-keycloak";

const { keycloak } = useKeycloak();

<button
  onClick={() => {
    keycloak.logout();
  }}
>
  Log out
</button>;

withAxiosAuthorizationHeaderUpdater

Updates Authorization: Bearer <token> in given axios instance.

import { withAxiosAuthorizationHeaderUpdater } from "@twoday/react-keycloak";
import { ReactKeycloakProvider as Provider } from "@react-keycloak/web";
import axios from "axios";

const ReactKeycloakProvider = withAxiosAuthorizationHeaderUpdater(Provider);

<ReactKeycloakProvider
  axios={
    axios /* AxiosStatic | Promise<AxiosStatic>, default: global axios instance */
  }
  /* … */
>
  ...
</ReactKeycloakProvider>;

withMockProvider

If REACT_APP_KEYCLOAK_MOCK_USER environment variable is set, mock implementation of ReactKeycloakProvider is used.

Example:

REACT_APP_KEYCLOAK_MOCK_USER={"name":"John Doe","email":"john.doe@example.com","realm_access":{"roles":[]},"resource_access":{"super-template":{"roles":["admin"]}}}