keycloak-js-util
Advanced tools
User frindly js library for authentication with Keycloak.
npm install keycloak-js-util
there is an example at https://github.com/shimondoodkin/keycloak-js-util/tree/master/example
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>
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
FAQs
Simplified access to keycloak-js
The npm package keycloak-js-util receives a total of 1 weekly downloads. As such, keycloak-js-util popularity was classified as not popular.
We found that keycloak-js-util demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.