Sometimes, we want to authenticate a Vue.js app with Azure AD.

In this article, we’ll look at how to authenticate a Vue.js app with Azure AD.

How to authenticate a Vue.js app with Azure AD?

To authenticate a Vue.js app with Azure AD, we can use the vue-adal package.

To install it, we run

npm install vue-adal

Then we can use it by writing

import Adal from 'vue-adal'

Vue.use(Adal, {
  config: {
    tenant: '<guid>',
    clientId: '<guid>',
    redirectUri: '<host addr>',
    cacheLocation: 'localStorage'
  },
  requireAuthOnInitialize: true,
  router
})

to call Vue.use with Adal to add the Adal plugin into our Vue app.

tenant is the multi-tenant gateway or Azure AD Tenant ID.

clientId is the app ID.

requireAuthOnInitialize is true if we need auth on startup.

And router is the Vue Router instance.

Conclusion

To authenticate a Vue.js app with Azure AD, we can use the vue-adal package.