Secure Your React App with Azure SSO
Authentication is usually not easiest part of an application to put in place. However, it’s probably the most important part to include in your app as it’s the gate keeper to all the awesome stuff you’ve built for your users.
Currently, my team and I are in the process of rebuilding an AngularJS application in React and I was recently tasked with adding Azure SSO. The goal of this article is to help you avoid some of the pitfalls I experienced so you can have a relatively easier time implementing Azure SSO in your next project.
This article is based off of the react-adal package which you can find here
Project SetUp
Before you start any project it’s always a good idea to get a good understanding of the scope and requirements of a project so you can create a setup plan. This helps you avoid unnecessary blockers later when you’re coding. So for our set up we need to make sure we have everything set up in Azure, this way when when we start coding we can stay coding.
If you don’t have an Azure account set up you can set one up pretty easily. Microsoft’s documentation is pretty good on this topic so you can usually just follow each steps. You can find information here. (side note: if you’re using Mac you won’t be able to create a certificate since that’s only available to be created by powershell users. Use the application secret option instead)
After you’ve set up your new application you’ll need to grab some information that we will need to set up authentication. If you followed all the steps in the article you should already have your Client ID. You’ll also need to know your Tenant. This is the name you or your company is using on Azure. For example it would should look like this: acme.onmicrosoft.com. Once you have those two pieces of information you’re able to authenticate your application.
However, we still have a couple of issues. First, when you authenticate Azure will only allow certain URLs to get access to the app or information using the Client ID. Second, you’ll need to generate a token with which to verify the application with. This is a feature you have to turn on. To set this up you’ll want to navigate to your application and then go to Authentication. You’ll then see the page I’ve included below.
Under Redirect URIs you’ll want to include the local host you’re using. If or when you publish this app for the world to see you’ll want to add in the production URI here as well.
Next, under Implicit grant, make sure you check Access Tokens. You can check ID Tokens as well, but you usually only need one checked. This ensures that when a user authenticates they get a Token with which they can could access other places of your application too. It’s also helpful if you need to secure your backend as well.
Everything else here you don’t really need to worry about, but you can research these in the Azure documentation if you want to know more about them.
The final step is to set up your coding project itself. I always like to do this first as it saves me time down the line. First, you’ll want to create a .env file to hold all your information you obtained from Azure. You don’t want to commit this to GitHub as it will allow others to hijack your application. If you’re unsure how to do this, you can check out an article I wrote on this here.
Next, I like to create Utilities folder which will hold all my Authentication and other utils I’ll use in the project, but you can name yours whatever you like. Next let’s create a new file called Azure-Auth.js.
Now we are ready to start coding.
Authentication
In your Azure-Auth.js file, let’s import a couple of things from our React-Adal package.
Next, let’s create and export our adalConfig.
Finally, let’s create a few functions that we will need.
The first function authContext creates a new AuthenticationContext object with the adalConfig options we just created. This allows the package to authenticate and obtain information about the user from the response we get back from Azure.
The second function adalApiFetch is useful if you need to request additional information from Azure or if you want to send information to your server to authenticate the user.
The third function withAdalLoginApi is a HOC (higher order component) secures your component, only allowing those who are logged in to view it. It also will display a loading indicator of your choosing and an error message if the login was unsuccessful as we will see later.
Implement the Azure SSO
There are a few places that you could implement this, but the best place to ensure that your entire application is secured would be in your index.js file. This also be the place you would add your Providers or Stores as well.
Let’s start by importing a couple of things we will need here.
You’ll notice that we have our authContext that we created along with a new function from our package runWithAdal. The second function will be what we will wrap our App in.
The variable DO_NOT_LOGIN is there so you can choose how you want to authenticate your users. If you want to verify them as soon as they hit your application you change the variable to true if you’d like to verify them when they hit a certain point in your application you can change the variable to false and let the withAdalLoginApi do the authentication. Usually, you’ll want to make sure whoever comes to your app is authenticated right away so the variable will be set to true.
Let’s jump over to App.js and implement the withAdalLoginApi HOC.
The first line here is just our import of the function we created in our Utils folder.
The second line is one implementation of it. You’ll notice that the function takes a Component, a Loading indication (which could also be a component) and an error message to display to the user indicating what error happened at Authentication.
If you wanted to use this function for all or most of your components you could create another HOC that returns this function. Here is one way to do it:
I called this HOC withAuth . It takes your Component and returns it wrapped in the withAdalLoginApi HOC along with a circular progress bar from Material-UI and the error component. You can create this in your Utils file or wherever you like and then export it to use in your App.js file to wrap all of your components with Authentication.
Final Thoughts
That’s all there is to it. The most difficult part of this would probably be the set up and navigating Azure. Once you have all the information needed, coding it is not too difficult. Hopefully this will help you if you’re considering using Azure SSO with React for your next project.
If you liked this article, feel free to check out my other ones here.
