@visma/react-keycloak

Keycloak helper components, hooks, etc.

Helper components and hooks

useCurrentUser

import { useCurrentUser } from '@visma/react-keycloak';

const user = useCurrentUser();

HasRole

fallback and children props are optional.

import { HasRole } from '@visma/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 '@visma/react-keycloak';

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

useHasRole

import { useHasRole } from '@visma/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 '@visma/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 '@visma/react-keycloak';
import { ReactKeycloakProvider as Provider } from '@react-keycloak/web';

const ReactKeycloakProvider = withPageRefreshSupport(Provider);

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

import { useKeycloak } from '@visma/react-keycloak';

const { keycloak } = useKeycloak();

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

withAxiosAuthorizationHeaderUpdater

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

import { withAxiosAuthorizationHeaderUpdater } from '@visma/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":"[email protected]","realm_access":{"roles":[]},"resource_access":{"super-template":{"roles":["admin"]}}}