One of my current projects is focused on improving the developer experience when it comes to getting up and running with the numerous cool things possible with Microsoft Azure.

I always knew Azure was A Thing, and I know it’s been very profitable for the company…but I never quite understood what I could do with Azure, outside of using AzureAD for authentication.

Turns out Azure is pretty sweet. Not only can you host fully-featured websites and web applications, you can create serverless functions that can cost as little as…nothing! Microsoft has a free app service tier available. There are a few limitations, but it’s great if you’re just getting started on Azure development. Check out the service plan pricing and features over here.

Several years ago, I made a silly little single-page website for looking up TLAs (aka three-letter acronyms) used at Microsoft, simply because there are so many acronyms. Seriously, though. I think I need to keep flashcards at my desk so I don’t forget them all.

Since a recent policy change prevents just anyone from registering an app for authentication with a Microsoft employee AzureAD account, I’ve decided to set up authentication for consumer Microsoft accounts. I plan on making an Azure function that will ask for the user’s @microsoft.com email, send a verification link, and confirm whether or not the logged-in user should be accessing the app.

So, the first thing my page needs is authentication. Luckily for me (and you!), Microsoft maintains public libraries for handling authentication a variety of platforms, including JavaScript.

You only need one line in your webpage’s header (or at the bottom of the HTML block):

<script src="https://secure.aadcdn.microsoftonline-p.com/lib/0.2.3/js/msal.min.js" type="text/javascript"></script>

Now that we’ve got the MSAL library, we can actually handle authentication. It’s crazy simple, too!

First, we need to set our Client ID and the endpoint we’ll use for authentication. MSAL only supports authenticating to Microsoft’s account services – this means AzureAD (organization) and consumer Microsoft accounts.

var clientId = '380ef3c0-bb31-440f-89bd-b859b04f9d87';
 
// allow anyone to sign in
var authPoint = 'https://login.microsoftonline.com/common/';
 
// allow only Microsoft Accounts
var authPoint = 'https://login.microsoftonline.com/consumers/';
 
// allow only AzureAD accounts
var authPoint = 'https://login.microsoftonline.com/organizations/';
 
// allow only AzureAD accounts from a single directory
var authPoint = 'https://login.microsoftonline.com/microsoft.onmicrosoft.com/';

Now we can create an MSAL application. The third parameter in this class points to a function that should be run once authentication is complete.

This function is invoked in my page body’s onLoad() property. The authCallBack function is invoked when the MSAL application is instantiated. This can be used to catch login errors in the user’s browser console.

var clientApplication;
function loadPage() {
    // init app object
    if (!clientApplication) {
        try {
            clientApplication = new Msal.UserAgentApplication(clientId,
                authPoint, authCallback);
        } catch (e) {
            console.log(e);
        }
    }
    silentRefresh();
}

My authCallBack() function is simple – it only traps errors.

function authCallback(errorDesc, token, error, tokenType) {
    if (token) {} else {
        log(error + ": " + errorDesc);
    }
}

You’ll notice at the end of the function, it calls another function, silentRefresh(). Because I don’t want my users to have to log in every time the page loads, I’m going to see if the current browser session can refresh the user’s identity token silently, so they aren’t prompted to log in.

If the user isn’t signed in, they’ll be redirected to the login page.

function silentRefresh() {
    let theUser = clientApplication.getUser();
    if (theUser) {
        clientApplication.acquireTokenSilent([clientId], null, theUser);
        onSignin();
    }
}

My onSignin() function handles stuff my page should do after the user is logged in, but that’s another show.

The last bit is the actual authentication. On my page, this is invoked when the user clicks the “log in” button. It’s very straightforward – if a user exists in the MSAL object, refresh the token. Otherwise, redirect the user to the Microsoft login page, then run onSignin().

function loginUser() {
    let theUser = clientApplication.getUser();
    if (!theUser) {
        clientApplication.loginRedirect();
        onSignin();
    } else {
        silentRefresh();
    }
}

That’s it! With Microsoft’s MSAL JavaScript library, you can easily add Microsoft authentication to your web clients. I avoid using JavaScript frameworks as much as possible, so this is also pure vanilla JS, plus the Microsoft library.