feat(): add load json config and add keycloak instance to the composable

Author: hirsch

README.md

@@ -37,7 +37,9 @@ import { vueKeycloak } from '@baloise/vue-keycloak'
 Apply the library to the vue app instance.
 
 ```typescript
-createApp(App).use(vueKeycloak, {
+const app = createApp(App)
+
+app.use(vueKeycloak, {
   initOptions: {
     flow: 'standard', // default
     checkLoginIframe: false, // default
@@ -48,15 +50,21 @@ createApp(App).use(vueKeycloak, {
     realm: 'myrealm',
     clientId: 'myapp'
   }
-}).mount('#app')
+})
+```
+
+Or use a JSON file with the configs.
+
+```typescript
+app.use(vueKeycloak, '/keycloak.json')
 ```
 
 ### Configuration
 
-| Config      | Type                                | Description                              |
-| ----------- | ----------------------------------- | ---------------------------------------- |
-| initOptions | `Keycloak.KeycloakInitOptions`      | `initOptions` is Keycloak init options.  |
-| config      | `string \| Keycloak.KeycloakConfig` | `config` are the Keycloak configuration. |
+| Config      | Type                           | Description                              |
+| ----------- | ------------------------------ | ---------------------------------------- |
+| initOptions | `Keycloak.KeycloakInitOptions` | `initOptions` is Keycloak init options.  |
+| config      | `Keycloak.KeycloakConfig`      | `config` are the Keycloak configuration. |
 
 Use the example below to generate dynamic Keycloak conifiguration.
 
@@ -76,29 +84,15 @@ app.use(vueKeycloak, async () => {
 })
 ```
 
-Or load the Keycloak configuration from a json file.
-
-```typescript
-app.use(vueKeycloak, async () => {
-  return {
-    config: 'http://localhost:8080/myapp/keycloak.json',
-  }
-})
-```
-
 > It is also possible to access the keycloak instance with `getKeycloak()`
 
 ## Use Token
 
 We export two helper functions for the token.
 
-### isTokenReady
-
-This functions returs a promise and only gets resolved if we have received a token.
-
 ### getToken
 
-This promise returns a token. `isTokenReady` gets called inside this function.
+This function checks if the token is still valid and will update it if it is expired.
 
 > Have a look at our [vueAxios](https://github.com/baloise/vue-axios) plugin.
 
@@ -157,21 +151,23 @@ const {
   decodedToken,
   username,
   roles,
+  keycloak,
 
   // Functions
   hasRoles,
 } = useKeycloak()
 ```
 
-| State           | Type            | Description                                            |
-| --------------- | --------------- | ------------------------------------------------------ |
-| isAuthenticated | `Ref<boolean>`  | If `true` the user is authenticated.                   |
-| isPending       | `Ref<boolean>`  | If `true` the authentication request is still pending. |
-| hasFailed       | `Ref<boolean>`  | If `true` authentication request has failed.           |
-| token           | `Ref<string>`   | `token` is the raw value of the JWT token.             |
-| decodedToken    | `Ref<T>`        | `decodedToken` is the decoded value of the JWT token.  |
-| username        | `Ref<string>`   | `username` the name of our user.                       |
-| roles           | `Ref<string[]>` | `roles` is a list of the users roles.                  |
+| State           | Type                        | Description                                            |
+| --------------- | --------------------------- | ------------------------------------------------------ |
+| isAuthenticated | `Ref<boolean>`              | If `true` the user is authenticated.                   |
+| isPending       | `Ref<boolean>`              | If `true` the authentication request is still pending. |
+| hasFailed       | `Ref<boolean>`              | If `true` authentication request has failed.           |
+| token           | `Ref<string>`               | `token` is the raw value of the JWT token.             |
+| decodedToken    | `Ref<T>`                    | `decodedToken` is the decoded value of the JWT token.  |
+| username        | `Ref<string>`               | `username` the name of our user.                       |
+| roles           | `Ref<string[]>`             | `roles` is a list of the users roles.                  |
+| keycloak        | `Keycloak.KeycloakInstance` | `keycloak` is the instance of the keycloak-js adapter. |
 
 #### Functions
 

src/composable.ts

@@ -1,4 +1,6 @@
+import { KeycloakInstance } from 'keycloak-js'
 import { toRefs, Ref } from 'vue'
+import { getKeycloak } from './keycloak'
 import { KeycloakState, state } from './state'
 import { isNil } from './utils'
 
@@ -9,12 +11,14 @@ export interface KeycloakComposable {
   token: Ref<string>
   username: Ref<string>
   roles: Ref<string[]>
+  keycloak: KeycloakInstance
   hasRoles: (roles: string[]) => boolean
 }
 
 export const useKeycloak = (): KeycloakComposable => {
   return {
     ...toRefs<KeycloakState>(state),
+    keycloak: getKeycloak(),
     hasRoles: (roles: string[]) =>
       !isNil(roles) && state.isAuthenticated && roles.every(role => state.roles.includes(role)),
   }

src/config.ts

@@ -0,0 +1,17 @@
+export function loadJsonConfig<T>(url: string): Promise<T> {
+  return new Promise((resolve, reject) => {
+    const xhttp = new XMLHttpRequest()
+    xhttp.overrideMimeType('application/json')
+    xhttp.onreadystatechange = function () {
+      if (this.readyState == 4 && this.status == 200) {
+        const jsonResponse = this.responseText
+        const response = JSON.parse(jsonResponse)
+        resolve(response)
+      } else {
+        reject('Could not load ' + url + ' file')
+      }
+    }
+    xhttp.open('GET', url, true)
+    xhttp.send()
+  })
+}

src/keycloak.test.ts

@@ -1,12 +1,12 @@
 import { createKeycloak, getToken, initKeycloak, isTokenReady } from './keycloak'
 import Keycloak, { KeycloakConfig } from 'keycloak-js'
-import { hasFailed, isAuthenticated, isPending, updateToken } from './state'
+import { hasFailed, isAuthenticated, isPending, setToken } from './state'
 import { defaultInitConfig } from './const'
 
 jest.mock('keycloak-js', () => jest.fn())
 jest.mock('./state', () => {
   return {
-    updateToken: jest.fn(),
+    setToken: jest.fn(),
     hasFailed: jest.fn(),
     isPending: jest.fn(),
     isAuthenticated: jest.fn(),
@@ -28,7 +28,7 @@ describe('keyckoak', () => {
 
   beforeEach(() => {
     ;(Keycloak as jest.Mock).mockClear()
-    ;(updateToken as jest.Mock).mockClear()
+    ;(setToken as jest.Mock).mockClear()
     ;(hasFailed as jest.Mock).mockClear()
     ;(isAuthenticated as jest.Mock).mockClear()
     ;(isPending as jest.Mock).mockClear()

src/keycloak.ts

@@ -1,5 +1,5 @@
 import Keycloak from 'keycloak-js'
-import { hasFailed, isAuthenticated, isPending, updateToken } from './state'
+import { hasFailed, isAuthenticated, isPending, setToken } from './state'
 import { isNil } from './utils'
 
 type KeycloakInstance = Keycloak.KeycloakInstance | undefined
@@ -23,11 +23,29 @@ export function getKeycloak(): Keycloak.KeycloakInstance {
 }
 
 export async function getToken(): Promise<string> {
-  await isTokenReady()
+  return updateToken()
+}
+
+export async function isLoggedIn(): Promise<boolean> {
+  try {
+    if (!$keycloak.authenticated) {
+      return false
+    }
+    await this.updateToken()
+    return true
+  } catch (error) {
+    return false
+  }
+}
+
+export async function updateToken(): Promise<string> {
+  if (!$keycloak) {
+    throw new Error('Keycloak is not initialized.')
+  }
 
   try {
     await $keycloak.updateToken(10)
-    updateToken($keycloak.token as string)
+    setToken($keycloak.token as string)
   } catch (error) {
     hasFailed(true)
     throw new Error('Failed to refresh the token, or the session has expired')
@@ -46,8 +64,11 @@ export async function initKeycloak(initConfig: Keycloak.KeycloakInitOptions): Pr
     const _isAuthenticated = await $keycloak.init(initConfig)
     isAuthenticated(_isAuthenticated)
     if (!isNil($keycloak.token)) {
-      updateToken($keycloak.token as string)
+      setToken($keycloak.token as string)
     }
+
+    $keycloak.onAuthRefreshSuccess = () => setToken($keycloak.token as string)
+    $keycloak.onTokenExpired = () => updateToken()
   } catch (error) {
     hasFailed(true)
     isAuthenticated(false)

src/plugin.ts

@@ -2,17 +2,18 @@ import { Plugin } from 'vue'
 import Keycloak from 'keycloak-js'
 import { defaultInitConfig } from './const'
 import { createKeycloak, initKeycloak } from './keycloak'
-import { isPromise, isFunction, isNil } from './utils'
+import { isPromise, isFunction, isNil, isString } from './utils'
+import { loadJsonConfig } from './config'
 
 interface KeycloakPluginConfig {
-  config: string | Keycloak.KeycloakConfig
+  config: Keycloak.KeycloakConfig
   initOptions?: Keycloak.KeycloakInitOptions
 }
 
 type KeycloakConfigFactory = () => KeycloakPluginConfig
 type KeycloakConfigAsyncFactory = () => Promise<KeycloakPluginConfig>
 
-type VueKeycloakPluginConfig = KeycloakPluginConfig | KeycloakConfigFactory | KeycloakConfigAsyncFactory
+type VueKeycloakPluginConfig = string | KeycloakPluginConfig | KeycloakConfigFactory | KeycloakConfigAsyncFactory
 
 export const vueKeycloak: Plugin = {
   async install(app, options: VueKeycloakPluginConfig) {
@@ -21,7 +22,9 @@ export const vueKeycloak: Plugin = {
     }
 
     let keycloakPluginConfig: KeycloakPluginConfig
-    if (isPromise(options) || isFunction(options)) {
+    if (isString(options)) {
+      keycloakPluginConfig = await loadJsonConfig(options as string)
+    } else if (isPromise(options) || isFunction(options)) {
       keycloakPluginConfig = await (options as KeycloakConfigAsyncFactory)()
     } else {
       keycloakPluginConfig = options as KeycloakPluginConfig

src/state.test.ts

@@ -1,4 +1,4 @@
-import { state, updateToken } from './state'
+import { state, setToken } from './state'
 
 describe('state', () => {
   const token =
@@ -14,7 +14,7 @@ describe('state', () => {
   })
 
   test('should update the state', () => {
-    updateToken(token)
+    setToken(token)
 
     expect(state.token).toBe(token)
     expect(state.username).toBe('my-name')

src/state.ts

@@ -28,7 +28,7 @@ interface TokenContent {
   }
 }
 
-export const updateToken = (token: string): void => {
+export const setToken = (token: string): void => {
   state.token = token
   const content = jwtDecode<TokenContent>(state.token)
   state.decodedToken = content

src/utils.ts

@@ -10,7 +10,7 @@ export function isFunction(fun: any): boolean {
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any
 export function isString(text: any): boolean {
-  return !isNil(text) && typeof text === 'string'
+  return !isNil(text) && (typeof text === 'string' || text instanceof String)
 }
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any