Authentication of Azure AD with Adal.js in NuxtJS

Here in this post we will create vue.js application with NuxtJs framework for authentication with Azure AD using Adal.js

Introduction

A sample Vue.js application showcasing usage of ADAL JS. using Nuxt.js framework.

The purpose of this example is to demonstrate usage of ADAL JS from the adal-angular module for managing authentication with Azure AD in the context of a typical Vue.js single page application with Nuxt.Js framework.

Steps to create Project

1- Setup Vue.js application with Nuxt.js framework

The first thing is to create a vue.js project with Nuxt.js framework using create-nuxt-app and you can do that by running the preceding command.

yarn create nuxt-app <project-name>

It will ask you some questions (name, Nuxt options, UI framework, TypeScript, linter, testing framework, etc. To find out more about all the options see the Create Nuxt app.

Screenshot as reference:

Once all questions are answered, it will install all the dependencies. The next step is to navigate to the project folder and launch it:

2- Dependencies

Install the adal-angular module for managing authentication with Azure AD.

yarn add adal-angular

3- ADAL wrapper module:

Then we create the file plugins/adal.js

Then we add the file path inside the plugins key of our nuxt.config.js. The plugins property lets you add Vue.js plugins easily to your main application. All the paths defined in the plugins property will be imported before initializing the main application.

plugins: [{ src:  '@/plugins/adal', ssr:  false, mode:  'client' }],

Initialise ADAL at application load in service injection — before the app is created. So no need to Initialise manually.

You’ll usually need to get an access token for some resource (usually an API you want your SPA to consume). The resource identifier should be associated with another Azure Active Directory application which represents the resource you’re requesting:

this.$adal
	.acquireToken()
	.then((token) => {
		console.log(token)
	})
	.catch((error) => {
		console.log(error)
	})

ADAL can be queried to determine whether the user has been properly authenticated:

this.$adal.isAuthenticated()

It can be useful to get access to the current users JWT token/profile. This will contain user information, assigned groups, app roles and other handy things.

this.$adal.getUserProfile()

Wrapper functions to invoke log in and log out actions:

signIn() {
  this.$adal.login();
},
signOut() {
  this.$adal.logOut();
}

In your Vue components

Use functions from ADAL in your Vue components to drive the view. i.e. — v-if="isAuthenticated"

Conclusion

In this article you have learned the below things..
1- How to create application using nuxt.js
2- Use adal-angular package as service in nuxt.js
3- How to use service in vue components

I hope this article was useful in order to use ADAL.js in nuxt.js framework. This service can be used in Microsoft teams for silent authentication as well. I may write about how to use @microsoft/teams-js and adal.js authentication in teams application in my next article.

Source Code

Please feel free to check out the repository here.