fix(auth): fix token refresh mechanism

src/config/oidcConfig.js

@@ -1,26 +1,35 @@
-/* This file is part of the BIMData Platform package.
-(c) BIMData support@bimdata.io
-For the full copyright and license information, please view the LICENSE
-file that was distributed with this source code. */
+/**
+ * OIDC Client Configuration
+ * See: https://github.com/IdentityModel/oidc-client-js/wiki#configuration
+ */
 
 const APP_BASE_URL = process.env.VUE_APP_BASE_URL;
 const AUTHORITY = `${process.env.VUE_APP_IAM_BASE_URL}/auth/realms/bimdata`;
 const OIDC_ENDPOINT = `${AUTHORITY}/protocol/openid-connect`;
 const CLIENT_ID = process.env.VUE_APP_OIDC_CLIENT_ID;
 
 export const oidcConfig = {
+  // Auth request config
   authority: AUTHORITY,
-  response_type: "code",
   client_id: CLIENT_ID,
-  redirect_uri: `${APP_BASE_URL}/oidc-callback`,
   scope: "openid profile email",
-  post_logout_redirect_uri: APP_BASE_URL,
+  response_type: "code",
+  redirect_uri: `${APP_BASE_URL}/oidc-callback`,
   extraQueryParams: {
     kc_idp_hint: "bimdataconnect"
   },
-  automaticSilentRenew: true,
+
+  // Logout config
+  post_logout_redirect_uri: APP_BASE_URL,
   revokeAccessTokenOnSignout: true,
+
+  // Enable access token refresh
+  automaticSilentRenew: true,
+
+  // Other options
   clockSkew: 900,
+
+  // Auth metadata
   metadata: {
     issuer: AUTHORITY,
     authorization_endpoint: `${OIDC_ENDPOINT}/auth`,

src/server/AuthService.js

@@ -17,13 +17,26 @@ class AuthServive {
     );
   }
 
+  signInSilent() {
+    return userManager.signinSilent();
+  }
+
   signInCallback() {
     return userManager.signinRedirectCallback();
   }
 
   signOut() {
     return userManager.signoutRedirect();
   }
+
+  onUserLoaded(callback) {
+    this._userLoadedCallback = callback;
+    userManager.events.addUserLoaded(callback);
+  }
+
+  offUserLoaded() {
+    userManager.events.removeUserLoaded(this._userLoadedCallback);
+  }
 }
 
 const service = new AuthServive();

src/state/auth.js

@@ -8,14 +8,21 @@ const state = reactive({
 });
 
 const authenticate = async redirectPath => {
-  const user = await AuthService.getUser();
-  if (user) {
-    if (!state.isAuthenticated) {
-      state.isAuthenticated = true;
-      state.accessToken = user.access_token;
-    }
-  } else {
+  let user = await AuthService.getUser();
+  if (!user) {
     await AuthService.signIn(redirectPath);
+    return;
+  }
+  if (!state.isAuthenticated) {
+    if (user.expired) {
+      // Refresh access token silently
+      user = await AuthService.signInSilent();
+    }
+    // Keep access token up to date across refresh
+    AuthService.onUserLoaded(user => (state.accessToken = user.access_token));
+    // Set auth state
+    state.isAuthenticated = true;
+    state.accessToken = user.access_token;
   }
 };
 
@@ -30,11 +37,12 @@ const signInCallback = async () => {
 
 const signOut = async () => {
   await AuthService.signOut();
+  AuthService.offUserLoaded();
   state.isAuthenticated = false;
-  state.user = null;
+  state.accessToken = null;
 };
 
-// Keep access token up to date across refresh
+// Keep api client access token in sync with state
 watchEffect(() => (apiClient.accessToken = state.accessToken));
 
 export function useAuth() {

src/views/model-viewer/ModelViewer.vue

@@ -6,7 +6,7 @@
 
 <script>
 import { merge, set } from "lodash";
-import { onMounted, watch } from "vue";
+import { onMounted, onUnmounted, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRoute } from "vue-router";
 import makeBIMDataViewer from "@bimdata/viewer";
@@ -72,6 +72,9 @@ export default {
       .map(pluginName => availablePlugins[pluginName])
       .filter(Boolean); // keep only existing plugins
 
+    let unwatchAccessToken;
+    let unwatchLocale;
+
     onMounted(async () => {
       const bimdataViewer = makeBIMDataViewer({
         api: {
@@ -97,8 +100,17 @@ export default {
 
       const viewer = bimdataViewer.mount("#viewer", window);
 
-      watch(accessToken, token => viewer.setAccessToken(token));
-      watch(locale, lang => (viewer.$i18n.locale = lang));
+      unwatchAccessToken = watch(accessToken, token => {
+        viewer.setAccessToken(token);
+      });
+      unwatchLocale = watch(locale, lang => {
+        viewer.$i18n.locale = lang;
+      });
+    });
+
+    onUnmounted(() => {
+      unwatchAccessToken();
+      unwatchLocale();
     });
   }
 };

src/views/oidc-callback/OidcCallback.vue

@@ -19,10 +19,9 @@ export default {
     const router = useRouter();
     const { signInCallback } = useAuth();
 
-    onMounted(() => {
-      signInCallback().then(result =>
-        router.push({ path: result.state ? result.state : "/" })
-      );
+    onMounted(async () => {
+      const result = await signInCallback();
+      router.push({ path: result.state ? result.state : "/" });
     });
   }
 };