Node Promiscuous Modules

    @visma/react-keycloak
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.0 • Public • Published

    @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"]}}}

    Keywords

    none

    Install

    npm i @visma/react-keycloak

    DownloadsWeekly Downloads

    119

    Version

    1.2.0

    License

    ISC

    Unpacked Size

    61.2 kB

    Total Files

    54

    Last publish

    Collaborators

    • visma_bot
    • arnosaine
    • juusoko