keycloak-js-util

v1.3.1

Published

2 years ago

Simplified access to keycloak-js

Downloads

0High
0Medium
0Low

shimondoodkin

keycloak-js keycloak

keycloack-js-util

User frindly js library for authentication with Keycloak.

npm install keycloak-js-util

⭐️ Features

async library
basic login
easy to use async fetch wrappers that add authorization bearer token header
tested
Correct keyclock CORS and CSP(content security policy) configuration: https://github.com/shimondoodkin/keycloak-js-util/tree/master/example/config
Correct krakend (CORS) configuration: https://github.com/shimondoodkin/keycloak-js-util/blob/master/example/krakend.json

✅ running the example:

there is an example at https://github.com/shimondoodkin/keycloak-js-util/tree/master/example

you need to have doker installed.
git clone https://github.com/shimondoodkin/keycloak-js-util.git
in the example folder:
run all bat files:
- run-krakend-docker.bat
- run-keycloack-docker.bat
- run-server.bat or python3 server.py or node server.js
- run-vue-app.bat or enter folder: example\vue-app and run: npm run dev
configure keycloak like described in https://github.com/shimondoodkin/keycloak-js-util/tree/master/example/config ( describes how to overcome CORS and content security policy issues with keycloak) open key cloak at http://localhost:8080
try login to http://localhost:8081

Example 1


import {authInit,setOnRefreshTokenError,getKeycloak} from 'keycloak-js-util'

try {
  await authInit({ 
    url: 'http://localhost:8080/', 
    realm: 'keycloak-demo', 
    clientId: 'app-vue',
    //  onLoad:'login-required',
    onLoad: 'check-sso',
    silentCheckSsoRedirectUri: window.location.origin + '/silent-check-sso.html' 
  });

  //optionally respont to authenticaation right away with  login
  if(!getKeycloak().authenticated) 
  {
    // if authentication is failed,  try to re-authenticate. don't load the application.
    //  
    //   if onLoad:'login-required' is used then maybe refresh window.location.reload().
    //   or call getKeycloak().login() 

    console.log('not authorized')
    getKeycloak().login()    

  }
  else
  {
    // authenticated successfuly, load the application

    // add handler for refresh token error
    setOnRefreshTokenError((error) => { 
      // for example:
      // alert("dispaly message you have been disconnected.\n"+error.message);
      // window.location.reload();
    });

    // load application here
    // for example
    //  createApp(App).mount('#app');
  }
}
catch(e)
{
  console.error(e)
  // display error message
  // for example
  //  createApp(ErrorPage,{
  //    title: 'Application initialization error:',
  //    message: e.message,
  //    returnUrl: '/',
  //  }).mount('#app');
}

Silent SSO: To enable the silent check-sso, you have to provide a silentCheckSsoRedirectUri attribute in the init method. This URI needs to be a valid endpoint in the application (and of course it must be configured as a valid redirect for the client in the Keycloak Admin Console):

  const authenticated=await authInit({
        url: 'http://localhost:8080/',
        realm: 'keycloak-demo', clientId: 'app-vue',
        onLoad: 'check-sso',
        silentCheckSsoRedirectUri: window.location.origin + '/silent-check-sso.html' });

The page at the silent check-sso redirect uri is loaded in the iframe after successfully checking your authentication state and retrieving the tokens from the Keycloak server. It has no other task than sending the received tokens to the main application and should only look like this:

<html>
<body>
    <script>
        parent.postMessage(location.href, location.origin)
    </script>
</body>
</html>

Example 2



import {authFetchText,authFetchJSON,authFetch} from 'keycloak-js-util'

const data = await authFetchText('http://localhost:8082/v1/test.txt')
const data = await authFetchJSON('http://localhost:8082/v1/test.json')
const data = await authFetchBlob('http://localhost:8082/v1/test.jpg')


const response = await authFetch('http://localhost:8082/v1/test')
if(!response.ok)
  throw new Error('Http status code='+response.code)
const data = await response.json()

in keycloak there are many useful functions, see documentation:

// keycloak-js:
//   reference: https://www.keycloak.org/docs/latest/securing_apps/index.html#_javascript_adapter
//   source code of keycloak-js: https://github.com/keycloak/keycloak/tree/main/js/libs/keycloak-js
//   npm pakcage: https://www.npmjs.com/package/keycloak-js

list of methods of keycloak instance:

  keycloak.init(options) // redirects if onLoad:'login-required'
  keycloak.login(options) // redirects
  keycloak.createLoginUrl(options)
  keycloak.logout(options) // redirects
  keycloak.createLogoutUrl(options)
  keycloak.register(options) // redirects
  keycloak.createRegisterUrl(options)
  keycloak.accountManagement() // redirects
  keycloak.createAccountUrl(options)
  keycloak.hasRealmRole(role)
  keycloak.hasResourceRole(role, resource)
  keycloak.loadUserProfile()
  keycloak.isTokenExpired(minValidity)
  keycloak.updateToken(minValidity)
  keycloak.clearToken()

list of properties of keycloak instance:

  keycloak.authenticated
  keycloak.token
  keycloak.tokenParsed
  keycloak.subject
  keycloak.idToken
  keycloak.idTokenParsed
  keycloak.realmAccess
  keycloak.resourceAccess
  keycloak.refreshToken
  keycloak.refreshTokenParsed
  keycloak.timeSkew
  keycloak.responseMode
  keycloak.flow
  keycloak.adapter
  keycloak.responseType

Written by Shimon Doodkin

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

keycloack-js-util

⭐️ Features

✅ running the example:

Example 1

Example 2