Vue plugin for MSAL 2 and up (supports both Vue2 and Vue3)
npm install msal-vue
npm install msal-vue
`
or
`
yarn add msal-vue
`
> We support both Vue2 & Vue3 through the library vue-demi, so there is no code changes required to support either.
Usage
$3
`ts
import { MsalPlugin } from 'msal-vue'
Vue.use(MsalPlugin, {
auth: {
clientId: '',
authority: '',
redirectUri: ''
},
cache: {
cacheLocation: 'localStorage', // Options are localStorage, sessionStorage, memoryStorage
},
});
new Vue({
// ... vue options as usual
})
`
$3
`ts
import App from "./App.vue";
import { createApp } from "vue";
import { MsalPlugin } from 'msal-vue'
const app = createApp(App);
// ...
app.use(MsalPlugin, {
auth: {
clientId: '',
authority: '',
redirectUri: ''
},
cache: {
cacheLocation: 'localStorage', // Options are localStorage, sessionStorage, memoryStorage
},
});
app.mount("#app");
`
Configuration is as follows here: Browser Configuration.
To authenticate it's as simple as follows.
`ts
// Optional scope set can be passed
// default is new ScopeSet(['user.read', 'openid', 'profile', 'email']\
await this.$msal.loginPopup();
// returns an AuthenticationResult which is a standard type in MSAL
// details here: https://azuread.github.io/microsoft-authentication-library-for-js/ref/modules/_azure_msal_common.html#authenticationresult
// but most likely you'll just want to access the account
// at any time you can request for it to acquire a new token (in case of 401's)
// as follows... takes in an optional scope set
// default is just new ScopeSet(['user.read']) though
await this.$msal.acquireToken();
// (just returns the access token)
// you can access the user at any time through .user()
const user = this.$msal.user();
// are we authenticated?
if (this.$msal.isAuthenticated()) {
// we can finally also forcefully logout
this.$msal.logout();
}
`
That covers every bit of functionality in this. The code itself is also quite readable and overall is just a light layer ontop of msal.
$3
You can access the underlying MSAL library through the .instance` getter. This gives you full access to MSAL.