Vue 3 package to authenticate with msal and provides a generic api bearer token wrapper
npm install vue-msal-wrapperVue 3 package to authenticate with MSAL and provides a generic API bearer token wrapper.
> Note: Version 1.0.0+ requires Vue 3. For Vue 2 support, use version 0.0.x.
``bash`
npm install vue-msal-wrapper
Inside your Vue 3 main.js:
`javascript
import { createApp } from 'vue'
import App from './App.vue'
import msalAuthHandler from "vue-msal-wrapper"
import authConfig from "./authConfig"
const app = createApp(App)
app.use(msalAuthHandler, authConfig)
app.mount('#app')
`
Create an authConfig.js in the same folder based on authConfig.example.js - note there must always be a login tokenType with scopes defined.
To trigger auto-login and prevent components/routing elements from being called, install the tag in your App.vue file.
To create an axios instance containing the Bearer tokens:
`javascript`
msalAuthHandler.authenticatedApi("BASEURL", "TOKENNAME")
Where BASEURL is the API url and TOKENNAME is the corresponding key from your tokenTypes config.
`javascript
import msalAuthHandler from "vue-msal-wrapper"
export const GraphAuth = {
install(app) {
app.config.globalProperties.$graph = msalAuthHandler.authenticatedApi(
"https://graph.microsoft.com",
"graph"
)
},
}
`
To get the current user name (or other information passed by MSAL) in a Vue component:
`javascript`
return this.$msal.getUser().name || "Not logged in."
The API constructor also accepts a third parameter to pass additional headers to Axios:
`javascript`
msalAuthHandler.authenticatedApi(
process.env.VUE_APP_API_URI,
"api",
{ "Subscription-Key": process.env.VUE_APP_API_KEY }
)
Install required packages with npm install
To build for packaging use: npm run build
If upgrading from v0.x:
1. Ensure your project uses Vue 3
2. Update your app initialization:
`javascript
// Old (Vue 2)
Vue.use(msalAuthHandler, authConfig)
// New (Vue 3)
app.use(msalAuthHandler, authConfig)
`
3. Update any custom plugins using Vue.prototype to use app.config.globalProperties`
- Ben Hussey