breaking(): keycloak is now a reactive reference to the keycloak-js a…

…dapter instance
JoseGoncalves · Jun 17, 2024 · a199c5d · a199c5d
1 parent 9e4b6ba
commit a199c5d
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -194,6 +194,7 @@ import { useKeycloak } from '@josempgon/vue-keycloak'
 
 const {
   // Reactive State
+  keycloak,
   isAuthenticated,
   isPending,
   hasFailed,
@@ -204,9 +205,6 @@ const {
   roles,
   resourceRoles,
 
-  // Object Instances
-  keycloak,
-
   // Functions
   hasRoles,
   hasResourceRoles,
@@ -216,6 +214,7 @@ const {
 
 | State           | Type                                                   | Description                                                         |
 | --------------- | ------------------------------------------------------ | ------------------------------------------------------------------- |
+| keycloak        | `Ref<`[`Keycloak`][Instance]`>`                        | Instance of the keycloak-js adapter.                            |
 | 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.                        |
@@ -226,12 +225,6 @@ const {
 | roles           | `Ref<string[]>`                                        | List of the user's roles.                                           |
 | resourceRoles   | `Ref<Record<string, string[]>`                         | List of the user's roles in specific resources.                     |
 
-#### Object Instances
-
-| Instance        | Type                                    | Description                                                     |
-| --------------- | --------------------------------------- | --------------------------------------------------------------- |
-| keycloak        | [`Keycloak`][Instance]                  | Instance of the keycloak-js adapter.                            |
-
 #### Functions
 
 | Function         | Type                                                      | Description                                                       |

diff --git a/src/composable.ts b/src/composable.ts
@@ -1,11 +1,11 @@
-import type Keycloak from 'keycloak-js'
 import type { KeycloakTokenParsed } from 'keycloak-js'
 import { toRefs, Ref } from 'vue'
-import { getKeycloak } from './keycloak'
+import { KeycloakInstance } from './keycloak'
 import { KeycloakState, state } from './state'
 import { isNil } from './utils'
 
 export interface KeycloakComposable {
+  keycloak: Ref<KeycloakInstance>
   isAuthenticated: Ref<boolean>
   hasFailed: Ref<boolean>
   isPending: Ref<boolean>
@@ -15,15 +15,13 @@ export interface KeycloakComposable {
   userId: Ref<string>
   roles: Ref<string[]>
   resourceRoles: Ref<Record<string, string[]>>
-  keycloak: Keycloak
   hasRoles: (roles: string[]) => boolean
   hasResourceRoles: (roles: string[], resource: 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)),
     hasResourceRoles: (roles: string[], resource: string) =>

diff --git a/src/keycloak.test.ts b/src/keycloak.test.ts
@@ -7,6 +7,7 @@ import { defaultInitConfig } from './const'
 jest.mock('keycloak-js', () => jest.fn())
 jest.mock('./state', () => {
   return {
+    setKeycloak: jest.fn(),
     setToken: jest.fn(),
     hasFailed: jest.fn(),
     isPending: jest.fn(),
@@ -64,7 +65,7 @@ describe('keyckoak', () => {
     })
   })
 
-  describe('createKeycloak & getKeycloak', () => {
+  describe('createKeycloak', () => {
     test('should define a new keycloak instance and return it', () => {
       const result = createKeycloak(keycloakConfig)
 

diff --git a/src/keycloak.ts b/src/keycloak.ts
@@ -1,16 +1,12 @@
 import Keycloak from 'keycloak-js'
 import type { KeycloakConfig, KeycloakInitOptions } from 'keycloak-js'
-import { hasFailed, isAuthenticated, isPending, setToken } from './state'
+import { hasFailed, isAuthenticated, isPending, setKeycloak, setToken } from './state'
 import { isNil } from './utils'
 
-type KeycloakInstance = Keycloak | undefined
+export type KeycloakInstance = Keycloak | undefined
 
 let $keycloak: KeycloakInstance = undefined
 
-export function getKeycloak(): Keycloak {
-  return $keycloak
-}
-
 export async function getToken(minValidity: number = 10): Promise<string> {
   return updateToken(minValidity)
 }
@@ -32,6 +28,7 @@ export async function updateToken(minValidity: number): Promise<string> {
 
 export function createKeycloak(config: KeycloakConfig | string): Keycloak {
   $keycloak = new Keycloak(config)
+  setKeycloak($keycloak)
   return $keycloak
 }
 

diff --git a/src/state.ts b/src/state.ts
@@ -1,7 +1,9 @@
 import { reactive } from 'vue'
 import type { KeycloakTokenParsed } from 'keycloak-js'
+import { KeycloakInstance } from './keycloak'
 
 export interface KeycloakState {
+  keycloak: KeycloakInstance
   isAuthenticated: boolean
   hasFailed: boolean
   isPending: boolean
@@ -14,17 +16,22 @@ export interface KeycloakState {
 }
 
 export const state = reactive<KeycloakState>({
+  keycloak: undefined as KeycloakInstance,
   isAuthenticated: false,
   hasFailed: false,
   isPending: false,
   token: '',
-  decodedToken: {},
+  decodedToken: {} as KeycloakTokenParsed,
   username: '',
   userId: '',
   roles: [] as string[],
   resourceRoles: {},
 })
 
+export const setKeycloak = (value: KeycloakInstance): void => {
+  state.keycloak = value
+}
+
 export const setToken = (token: string, tokenParsed: KeycloakTokenParsed): void => {
   state.token = token
   const content = tokenParsed