vue-msal-wrapper

Vue 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.

Installation

npm install vue-msal-wrapper

Usage

Inside your Vue 3 main.js:

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 <msal-wrapper></msal-wrapper> tag in your App.vue file.

API

Creating authenticated API instances

To create an axios instance containing the Bearer tokens:

msalAuthHandler.authenticatedApi("BASEURL", "TOKENNAME")

Where BASEURL is the API url and TOKENNAME is the corresponding key from your tokenTypes config.

Example: Microsoft Graph as a Vue 3 plugin

import msalAuthHandler from "vue-msal-wrapper"

export const GraphAuth = {
  install(app) {
    app.config.globalProperties.$graph = msalAuthHandler.authenticatedApi(
      "https://graph.microsoft.com",
      "graph"
    )
  },
}

Getting current user

To get the current user name (or other information passed by MSAL) in a Vue component:

return this.$msal.getUser().name || "Not logged in."

Additional headers

The API constructor also accepts a third parameter to pass additional headers to Axios:

msalAuthHandler.authenticatedApi(
    process.env.VUE_APP_API_URI,
    "api",
    { "Subscription-Key": process.env.VUE_APP_API_KEY }
)

Dev / Build

Install required packages with npm install

To build for packaging use: npm run build

Migration from v0.x (Vue 2)

If upgrading from v0.x:

1. Ensure your project uses Vue 3
2. Update your app initialization:

// 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

Authors

• Ben Hussey