@visma/react-keycloak

Keycloak helper components, hooks, etc.

Helper components and hooks

$3

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

const user = useCurrentUser();
`

$3

fallback and children props are optional.

`js
import { HasRole } from '@visma/react-keycloak';

}>

;
`

`js
...
`

`js
fallback={} />


`

Shorthand to check for realm and current clientId resource roles:

`js



`

$3

fallback and children props are optional.

`js
import { IsAuthenticated } from '@visma/react-keycloak';

}>

;
`

$3

`js
import { useHasRole } from '@visma/react-keycloak';

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

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

`js
const useIsAdmin = () => useHasRole({ realm: 'admin' });
`

`js
const isEditor = useHasRole({ resource: { 'my-app': 'editor' } });
`

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

Shorthand to check for realm and current clientId resource roles:

`js
const isAdmin = useHasRole('admin');
const isFooOrBar = useHasRole(['foo', 'bar']);
`

$3

`js
import { useIsAuthenticated } from '@visma/react-keycloak';

const isAuthenticated = useIsAuthenticated();
`

ReactKeycloakProvider

ReactKeycloakProvider with all of the extensions below integrated.

$3

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

`js
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:

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

const { keycloak } = useKeycloak();

onClick={() => {
keycloak.logout();
}}
>
Log out
;
`

$3

Updates Authorization: Bearer in given axios instance.

`js
import { withAxiosAuthorizationHeaderUpdater } from '@visma/react-keycloak';
import { ReactKeycloakProvider as Provider } from '@react-keycloak/web';
import axios from 'axios';

const ReactKeycloakProvider = withAxiosAuthorizationHeaderUpdater(Provider);

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

$3

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

Example:

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