feat(): use tokenParsed instead of jwt-decode

package.json

@@ -42,7 +42,6 @@
   ],
   "license": "Apache-2.0",
   "peerDependencies": {
-    "jwt-decode": "^4.0.0",
     "keycloak-js": "20 - 23",
     "vue": "^3.2.45"
   },
@@ -61,7 +60,6 @@
     "eslint-plugin-vue": "^9.19.2",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
-    "jwt-decode": "^4.0.0",
     "keycloak-js": "^23.0.3",
     "prettier": "^2.8.8",
     "rimraf": "^5.0.5",

src/keycloak.ts

@@ -21,7 +21,7 @@ export async function updateToken(minValidity: number): Promise<string> {
 
   try {
     await $keycloak.updateToken(minValidity)
-    setToken($keycloak.token as string)
+    setToken($keycloak.token, $keycloak.tokenParsed)
   } catch (error) {
     hasFailed(true)
     throw new Error('Failed to refresh the token, or the session has expired')
@@ -40,7 +40,7 @@ export async function initKeycloak(initConfig: Keycloak.KeycloakInitOptions): Pr
     const _isAuthenticated = await $keycloak.init(initConfig)
     isAuthenticated(_isAuthenticated)
     if (!isNil($keycloak.token)) {
-      setToken($keycloak.token as string)
+      setToken($keycloak.token, $keycloak.tokenParsed)
     }
   } catch (error) {
     hasFailed(true)

src/state.test.ts

@@ -3,6 +3,20 @@ import { state, setToken } from './state'
 describe('state', () => {
   const token =
     'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyLCJwcmVmZXJyZWRfdXNlcm5hbWUiOiJteS1uYW1lIiwicmVhbG1fYWNjZXNzIjp7InJvbGVzIjpbIm15LXJvbGUiXX0sInJlc291cmNlX2FjY2VzcyI6eyJteS1hcHAiOnsicm9sZXMiOlsibXktcm9sZSJdfX19.oAnF7H8DndIWOb2KeHntbzwf6h7VjZlxt5AR2KPZTBU'
+  const tokenParsed = {
+    sub: '1234567890',
+    name: 'John Doe',
+    iat: 1516239022,
+    preferred_username: 'my-name',
+    realm_access: {
+      roles: ['my-role'],
+    },
+    resource_access: {
+      'my-app': {
+        roles: ['my-role'],
+      },
+    },
+  }
 
   test('should have the correct inital values', () => {
     expect(state.isAuthenticated).toBe(false)
@@ -15,7 +29,7 @@ describe('state', () => {
   })
 
   test('should update the state', () => {
-    setToken(token)
+    setToken(token, tokenParsed)
 
     expect(state.token).toBe(token)
     expect(state.username).toBe('my-name')

src/state.ts

@@ -1,12 +1,12 @@
 import { reactive } from 'vue'
-import { jwtDecode } from 'jwt-decode'
+import type { KeycloakTokenParsed } from 'keycloak-js'
 
-export interface KeycloakState<T = unknown> {
+export interface KeycloakState {
   isAuthenticated: boolean
   hasFailed: boolean
   isPending: boolean
   token: string
-  decodedToken: T
+  decodedToken: KeycloakTokenParsed
   username: string
   roles: string[]
   resourceRoles: Record<string, string[]>
@@ -23,17 +23,9 @@ export const state = reactive<KeycloakState>({
   resourceRoles: {},
 })
 
-interface TokenContent {
-  preferred_username: string
-  realm_access: {
-    roles: string[]
-  }
-  resource_access: Record<string, { roles: string[] }>
-}
-
-export const setToken = (token: string): void => {
+export const setToken = (token: string, tokenParsed: KeycloakTokenParsed): void => {
   state.token = token
-  const content = jwtDecode<TokenContent>(state.token)
+  const content = tokenParsed
   state.decodedToken = content
   state.roles = content.realm_access ? content.realm_access.roles : []
   state.username = content.preferred_username