Incorporating vue-msal-browser

[MarcP]

Hi,

Very new to the Quasar Framework and Vue.Js (and web dev in general), but enjoying the experience so far! I am attempting to incorporate the vue-msal-browser plugin into a Quasar v2.0.0 beta9 application through the boot files. The required msal configuration is maintained in the msal store. My boot/auth.js looks like this:

import msalPlugin from 'vue-msal-browser'

export default ({ app, store }) => {
  app.use(msalPlugin, store.state.msal.msalConfig)
}

The error message encountered is:

client-entry.js:86 [Quasar] boot error: TypeError: Cannot set property '$msal' of undefined
    at Function.install (msalPlugin.js:7)
    at Object.use (runtime-core.esm-bundler.js:2950)
    at Array../src/boot/auth.js.__webpack_exports__.default (auth.js:4)
    at start (client-entry.js:70)

The code in the vue-msal-browser plugin calls this within the install function:

vue.prototype.$msal = msalInstance;

Do I need to do anything to make the Vue instanace aware of the prototype.$msal property? I hope I’m on the right track with this, maybe it’s something simple

Appreciate any help!

Marc

[MarcP]

I just realized that vue.prototype would be a vue2 thing. Modified the package on my local machine to do “vue.config.globalProperties.$msal = msalInstance;” instead and this seems to have resolved that problem.

[Lurrik]

I’ll admit that I’m a little lost to incorporate msal, I’m trying to use azure in my quasar app…

Appreciate any help! ^^