@netkata/react-keycloak-auth NPM

React Keycloak Auth

React Keycloak Auth is a simple library for authentication with SSO Keycloak Client.

Installation

Use the package manager npm or yarn to install React Keycloak Auth.

yarn add @netkata/react-keycloak-auth

Configuration

import Authentication from '@netkata/react-keycloak-auth';

Authentication.config.tokenURL = 'http://localhost:8040/auth/realms/master/protocol/openid-connect/token';
Authentication.config.revokeURL = 'http://localhost:8040/auth/realms/master/protocol/openid-connect/logout';
Authentication.config.refreshURL = 'http://localhost:8040/auth/realms/master/protocol/openid-connect/token';
Authentication.config.userInfoURL = 'http://localhost:8040/auth/realms/master/protocol/openid-connect/userinfo';
Authentication.config.grantType = 'password';
Authentication.config.clientID = 'account';
Authentication.config.refreshTokenInSecondsBeforeExpireDate = 15;
Authentication.config.authorizationURL = '/login';
Authentication.config.protectedAreaURL = '/dashboard';
Authentication.config.ignoredURLs = ['/privacy-policy'];

Authorize

import { Authentication } from '@netkata/react-keycloak-auth';

Authentication.authorize('email@netkata.com', 'strongPassword');

Unauthorize

import { Authentication } from '@netkata/react-keycloak-auth';

Authentication.revoke();

Events

import { 
    Authentication,
    EVENT_AUTHORIZATION_SUCCESS,
    EVENT_AUTHORIZATION_FAILED,
    EVENT_REFRESH_TOKEN_SUCCESS,
    EVENT_REFRESH_TOKEN_FAILED,
    EVENT_CHECK_USER_SUCCESS,
    EVENT_CHECK_USER_FAILED,
    EVENT_REVOKE_TOKEN_SUCCESS,
    EVENT_REVOKE_TOKEN_FAILED,
} from '@netkata/react-keycloak-auth';

Authentication.events.addEventListener(EVENT_AUTHORIZATION_SUCCESS, (response) => {
    //your callback
});

Authentication.events.addEventListener(EVENT_REVOKE_TOKEN_SUCCESS, (error) => {
    //your callback
});

React AuthProvider

If you are using react-router in your project, AuthProvider is useful to manage user session and protect your private route behind authorization. AuthProvider has implemented listeners which take action on authorize and unauthorize event.

Usage

import { AuthProvider } from '@netkata/react-keycloak-auth';
import { BrowserRouter } from 'react-router-dom';


const App = () => {
 return (
     <BrowserRouter>
         <AuthProvider>
           your application routing
         </AuthProvider>
     </BrowserRouter>
 )  
};