@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":"john.doe@example.com","realm_access":{"roles":[]},"resource_access":{"super-template":{"roles":["admin"]}}}