updating package file to upgrade keyclock version adn supporting changes

appointment-frontend/package.json

@@ -25,7 +25,7 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.3.1",
     "humps": "^2.0.1",
-    "keycloak-js": "^20.0.0",
+    "keycloak-js": "^24.0.0",
     "moment": "^2.29.4",
     "regenerator-runtime": "^0.13.9",
     "sbc-common-components": "^4.0.8",

appointment-frontend/src/services/keycloak.services.ts

@@ -1,4 +1,4 @@
-import Keycloak, { KeycloakInitOptions, KeycloakInstance, KeycloakLoginOptions, KeycloakTokenParsed } from 'keycloak-js'
+import Keycloak, { KeycloakInitOptions, KeycloakLoginOptions, KeycloakTokenParsed } from 'keycloak-js'
 import { AuthModule } from '@/store/modules'
 import ConfigHelper from '@/utils/config-helper'
 import { KCUserProfile } from '@/models/KCUserProfile'
@@ -17,7 +17,7 @@ interface UserToken extends KeycloakTokenParsed {
 }
 
 class KeyCloakService {
-  private kc: KeycloakInstance | undefined
+  private kc: Keycloak | undefined
   private parsedToken: any
   private static instance: KeyCloakService
   private store: Store<any> | null = null
@@ -35,7 +35,7 @@ class KeyCloakService {
     this.cleanupSession()
     const token = ConfigHelper.getFromSession(SessionStorageKeys.KeyCloakToken) || undefined
     const keycloakConfig = ConfigHelper.getKeycloakConfigUrl()
-    this.kc = Keycloak(keycloakConfig)
+    this.kc = new Keycloak(keycloakConfig)
     const kcLogin = this.kc.login
     this.kc.login = (options?: KeycloakLoginOptions) => {
       if (options) {
@@ -82,7 +82,7 @@ class KeyCloakService {
   async logout (redirectUrl?: string) {
     const token = ConfigHelper.getFromSession(SessionStorageKeys.KeyCloakToken) || undefined
     if (token) {
-      this.kc = Keycloak(ConfigHelper.getKeycloakConfigUrl())
+      this.kc = new Keycloak(ConfigHelper.getKeycloakConfigUrl())
       const kcOptions :KeycloakInitOptions = {
         onLoad: 'login-required',
         checkLoginIframe: false,
@@ -118,7 +118,7 @@ class KeyCloakService {
     }
   }
 
-  getKCInstance () : KeycloakInstance | undefined {
+  getKCInstance () : Keycloak | undefined {
     return this.kc
   }
 

appointment-frontend/src/services/token.services.ts

@@ -1,18 +1,18 @@
-import Keycloak, { KeycloakInitOptions, KeycloakInstance } from 'keycloak-js'
+import Keycloak, { KeycloakInitOptions } from 'keycloak-js'
 import AuthModule from '@/store/modules/auth'
 import ConfigHelper from '@/utils/config-helper'
 import { SessionStorageKeys } from '@/utils/constants'
 import { Store } from 'vuex'
 import { getModule } from 'vuex-module-decorators'
 
 class TokenServices {
-  private kc: KeycloakInstance | undefined
+  private kc: Keycloak | undefined
   private counter = 0
   private REFRESH_ATTEMPT_INTERVAL = 10 // in seconds
   private timerId = 0
   private store: Store<any> | null = null
 
-  initUsingKc (kcInstance: KeycloakInstance) {
+  initUsingKc (kcInstance: Keycloak) {
     this.kc = kcInstance
   }
 
@@ -35,7 +35,7 @@ class TokenServices {
     }
 
     return new Promise((resolve, reject) => {
-      this.kc = Keycloak(ConfigHelper.getKeycloakConfigUrl())
+      this.kc = new Keycloak(ConfigHelper.getKeycloakConfigUrl())
       this.kc.init(kcOptions)
         .then(authenticated => {
           // eslint-disable-next-line no-console

frontend/package.json

@@ -38,7 +38,7 @@
     "es6-promise": "^4.2.8",
     "es6-shim": "^0.35.6",
     "js-file-download": "^0.4.12",
-    "keycloak-js": "^20.0.0",
+    "keycloak-js": "^24.0.0",
     "lodash": "^4.17.19",
     "luxon": "^1.28.1",
     "moment": "^2.29.4",

frontend/src/components/Login/Login.vue

@@ -219,15 +219,15 @@ export default class Login extends Vue {
             token: sessionStorage.getItem('token'),
             tokenExp: sessionStorage.getItem('tokenExp')
           })
-          .success(() => {
+          .then(() => {
             // Set a timer to auto-refresh the token
             setInterval(() => {
               this.refreshToken(config.REFRESH_TOKEN_SECONDS_LEFT)
             }, 60 * 1000)
             this.setTokenToSessionStorage()
             this.$store.commit('setBearer', sessionStorage.getItem('token'))
           })
-          .error(() => {
+          .catch(() => {
             this.init()
           })
       } else {
@@ -245,7 +245,7 @@ export default class Login extends Vue {
         flow: 'standard',
         onLoad: 'check-sso'
       })
-      .success(() => {
+      .then(() => {
         setInterval(() => {
           this.refreshToken(config.REFRESH_TOKEN_SECONDS_LEFT)
         }, 60 * 1000)
@@ -343,7 +343,7 @@ export default class Login extends Vue {
     )
     this.$keycloak
       .updateToken(minValidity)
-      .success((refreshed: any) => {
+      .then((refreshed: any) => {
         if (refreshed) {
           console.log('Token refreshed and is below')
           console.log(this.$keycloak.tokenParsed)
@@ -363,7 +363,7 @@ export default class Login extends Vue {
             ' seconds'
         )
       })
-      .error((error: any) => {
+      .catch((error: any) => {
         console.log('Failed to refresh token')
         console.log(error)
         const errorSecondsLeft = Math.round(

frontend/src/main.ts

@@ -120,7 +120,7 @@ library.add(
 Vue.component('font-awesome-icon', FontAwesomeIcon);
 Vue.use(BootstrapVue);
 let kcPath = process.env.KEYCLOAK_JSON_URL?  process.env.KEYCLOAK_JSON_URL: '/static/keycloak/keycloak.json'
-let keycloak = Keycloak(kcPath);
+let keycloak = new Keycloak(kcPath);
 // let keycloak = Keycloak({
 //   url: "https://dev.loginproxy.gov.bc.ca/auth/",
 //   clientId: "theq-frontend",