msal-vue
v1.1.0
Published
Vue plugin for MSAL 2 and up (supports both Vue2 and Vue3)
Downloads
235
Maintainers
Readme
msal-vue
MSAL Layer for Vue2 and Vue3
By Braedon Wooding
Because the alternatives are pretty mediocre... this is a very simple layer that has;
- Typescript support
- Error handling (i.e. if popup fails you can spawn a button to trigger popup, which is more likely to work if you are in some browsers)
- Amongst just a cleaner implementation with less heavy dependencies (no lodash/axios dependency, only msal-browser)
It however, is very lite in terms of extensive features, and doesn't explicitly support things like MSGraph.
Installation
Add the msal-vue dependency to your project using yarn or npm. We require a peer dependency of Vue3.
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
Vue2
import { MsalPlugin } from 'msal-vue'
Vue.use(MsalPlugin, {
auth: {
clientId: '<client id>',
authority: '<url>',
redirectUri: '<url>'
},
cache: {
cacheLocation: 'localStorage', // Options are localStorage, sessionStorage, memoryStorage
},
});
new Vue({
// ... vue options as usual
})
Vue3
import App from "./App.vue";
import { createApp } from "vue";
import { MsalPlugin } from 'msal-vue'
const app = createApp(App);
// ...
app.use(MsalPlugin, {
auth: {
clientId: '<client id>',
authority: '<url>',
redirectUri: '<url>'
},
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.
// 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.
Advanced Usage
You can access the underlying MSAL library through the .instance
getter. This gives you full access to MSAL.
Nuxt Usage
No clue, I don't use Nuxt; happy for someone to come along and add information here, I doubt it's very complicated (just don't have time to test).
Contributions
I don't want to maintain a massive library here, so I will be cautious about accepting massive PRs that add extra features such as MS Graph support and so on.