feat(): add decodedToken

README.md

@@ -53,10 +53,10 @@ createApp(App).use(vueKeycloak, {
 
 ### Configuration
 
-| Config      | Type                                                                                       | Description                              |
-| ----------- | ------------------------------------------------------------------------------------------ | ---------------------------------------- |
-| initOptions | `Keycloak.KeycloakInitOptions`                                                             | `initOptions` is Keycloak init options.  |
-| config      | `string \| Keycloak.KeycloakConfig \| KeycloakConfigFactory \| KeycloakConfigAsyncFactory` | `config` are the Keycloak configuration. |
+| Config      | Type                                | Description                              |
+| ----------- | ----------------------------------- | ---------------------------------------- |
+| initOptions | `Keycloak.KeycloakInitOptions`      | `initOptions` is Keycloak init options.  |
+| config      | `string \| Keycloak.KeycloakConfig` | `config` are the Keycloak configuration. |
 
 Use the example below to generate dynamic Keycloak conifiguration.
 
@@ -131,9 +131,9 @@ import { useKeycloak } from '@baloise/vue-keycloak'
 
 export default defineComponent({
   setup() {
-    const { hasRole, isPending } = useKeycloak()
+    const { hasRoles, isPending } = useKeycloak()
 
-    const hasAccess = computed(() => hasRole('RoleName'))
+    const hasAccess = computed(() => hasRoles(['RoleName']))
 
     return {
       hasAccess,
@@ -154,11 +154,11 @@ const {
   isPending,
   hasFailed,
   token,
+  decodedToken,
   username,
   roles,
 
   // Functions
-  hasRole,
   hasRoles,
 } = useKeycloak()
 ```
@@ -169,14 +169,14 @@ const {
 | 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.                  |
 
 #### Functions
 
 | Function | Type                           | Description                                                  |
 | -------- | ------------------------------ | ------------------------------------------------------------ |
-| hasRole  | `(role: string) => boolean`    | `hasRole` returns true if the user has the given role.       |
 | hasRoles | `(roles: string[]) => boolean` | `hasRoles` returns true if the user has all the given roles. |
 
 # License

src/composable.test.ts

@@ -14,18 +14,6 @@ describe('useKeycloak', () => {
       expect(roles.value).toStrictEqual([])
     })
   })
-  describe('hasRole', () => {
-    test('should tell if the user has the role or not and is authenticated', () => {
-      state.isAuthenticated = true
-      state.roles = ['my-role']
-      const { hasRole } = useKeycloak()
-
-      expect(hasRole('my-role')).toBe(true)
-      expect(hasRole('not-my-role')).toBe(false)
-      expect(hasRole(undefined)).toBe(false)
-      expect(hasRole(null)).toBe(false)
-    })
-  })
   describe('hasRoles', () => {
     test('should tell if the user has the role or not and is authenticated', () => {
       state.isAuthenticated = true

src/composable.ts

@@ -9,14 +9,12 @@ export interface KeycloakComposable {
   token: Ref<string>
   username: Ref<string>
   roles: Ref<string[]>
-  hasRole: (role: string) => boolean
   hasRoles: (roles: string[]) => boolean
 }
 
 export const useKeycloak = (): KeycloakComposable => {
   return {
     ...toRefs<KeycloakState>(state),
-    hasRole: (role: string) => !isNil(role) && state.isAuthenticated && state.roles.includes(role),
     hasRoles: (roles: string[]) =>
       !isNil(roles) && state.isAuthenticated && roles.every(role => state.roles.includes(role)),
   }

src/keycloak.ts

@@ -24,9 +24,7 @@ export function getKeycloak(): Keycloak.KeycloakInstance {
 
 export async function getToken(): Promise<string> {
   await isTokenReady()
-  if ($keycloak === undefined) {
-    throw new Error('Keycloak was not initialized.')
-  }
+
   try {
     await $keycloak.updateToken(10)
     updateToken($keycloak.token as string)

src/state.ts

@@ -1,11 +1,12 @@
 import { reactive } from 'vue'
 import jwtDecode from 'jwt-decode'
 
-export interface KeycloakState {
+export interface KeycloakState<T = unknown> {
   isAuthenticated: boolean
   hasFailed: boolean
   isPending: boolean
   token: string
+  decodedToken: T
   username: string
   roles: string[]
 }
@@ -15,6 +16,7 @@ export const state = reactive<KeycloakState>({
   hasFailed: false,
   isPending: false,
   token: '',
+  decodedToken: {},
   username: '',
   roles: [] as string[],
 })
@@ -29,6 +31,7 @@ interface TokenContent {
 export const updateToken = (token: string): void => {
   state.token = token
   const content = jwtDecode<TokenContent>(state.token)
+  state.decodedToken = content
   state.roles = content.realm_access.roles
   state.username = content.preferred_username
 }