Using Microsoft Azure Identity for Login in a React Native app
How to integrate the new Microsoft sign in with pure React Native (no lib. needed).
[UPDATE — September 2021] Library has been updated
[UPDATE] We’ve updated the library with an example using Expo, if you want to see it running check out the Github
Authenticating users into your application is quite a bread and butter requirement when developing an app.
Most app users are familiar with the idea of signing into an application using an existing service like Facebook or Google OAuth, and sometimes this can be the best option when a new application requires an account setup.
Leveraging existing user data from an OAuth service can have many advantages for both users and developers when integrating with an application:
- Users don’t have to enter a ton of information;
- Users don’t need to remember yet another password; and
- Developers cut out significant development time not having to build a secure and complex authentication system.
Here at Sheda, we tend to use Firebase and React Native for most of our mobile development projects.
Firebase comes with some handy features such as real time-database service, user authentication and file storage which means our development process can move at a super-fast pace.
Which in turn, means that we get products to market at a faster rate and get that all-important customer feedback quicker, resulting in faster iterations and a better overall product for users.
The Firebase user authentication service allows us to integrate sign-in services from major social media platforms, like Facebook and Twitter, into the application with a few lines of code.
With this capability, our developers can focus on its core functionality instead.
Firebase authentication supports many service providers, but unfortunately, Microsoft Account is an exception.
While this is a bummer, Firebase does still allow you to register new users with a custom token which means we can handle the login mechanism by ourselves and save Microsoft Identity user credentials to Firebase for later use.
We’ll explain how to get this working in your react native app.
Understanding Microsoft Identity Accounts
Trying to access a Microsoft account is kind of bizarre.
Microsoft previously separated their user accounts into two different domains — one for their cloud platform Microsoft Azure and another for general users who are using their services like Hotmail, One Drive or Xbox.
This meant developers had to use different authentication endpoints in order to authenticate users from different services.
Thankfully, they recently converged their disparate authentication service into a single service called ‘v2.0 endpoint’ which allows you to use OAuth authentication for whichever Microsoft service account you have.
Authenticating a user via the v2 endpoint will give us access to a custom bearer token, this token allows us to consume REST APIs from the Microsoft Graph (a single endpoint into all Microsoft services) and allows your app to request simple user data, for example, first name, last name, email and get other information like email messages, contacts and notes associated with their accounts.
Understanding the authentication flow
As I have stated earlier, Microsoft used OAuth 2.0 protocol for user authentication.
If you are familiar with OAuth 2.0 you may skip this part. Otherwise, let’s see how this thing works to have a clear understanding of what we are going to implement.
The authentication process gets started from a web browser (WebView in this case) requests a login page from the Microsoft authentication server (http://login.microsoftonline.com/common).
In this step, when requesting to the server, we need to equip our application identification as a query string to allow the Microsoft server to identify which application we are using.
After a user enters their credentials and goes through the general login process, the Microsoft server will redirect a user back to the URL that was provided when registering an application with a temporary code, which is a crucial piece of data that we need to use in order to obtain the access token for using to consume REST APIs.
The last step in this part would be requesting an access token. Once we have a temporary code from the last step, we have to use it as a part of the payload to gain an access token.
Getting your app registered with Microsoft
To allow the application to interact with the Microsoft server, it needs to be registered through Microsoft Application Registration Portal. (see how to register an app in Azure)
Once the app is registered, an Application ID will be generated.
In order to get the authentication to work on React Native, without using other third-party libraries, we will utilize React Native WebView component.
Consequently, we are going to need a secret key for communicating with the Microsoft Authentication service through the web interface.
Go to the Certificates & Secrets section on the left and click New client secret, give your secret a name and click the Add button to get the secret key generated.
It will take two to three seconds before the secrete key will be shown on the screen. Keep in mind that, it will be shown just only once — so be sure to record it in a safe place.
Everything seems to be pretty good, but one more thing we have to tell Microsoft is which platform we are going to integrate this app on.
Go to Authentication > Add a platform > Web if you haven’t already added a redirect URI do so, the value can be to a localhost address.
The ‘Add Platform’ dialogue will be prompted, in this case, we will go with Web platform as we’ll be using JavaScript to access the service.
Then, define a callback URL. Make sure that it’s using HTTPS protocol if you are going to integrate this application with iOS to avoid problems that may occur.
Once everything is set, scroll down to the bottom, hit ‘Save’ and we are done with the Application Register on the Microsoft Application Portal.
Integrating with React Native
React Native is a JavaScript library developed by Facebook. It allows you to develop native applications for both iOS and Android by using JavaScript.
React Native has its origins and shares the same syntax and other design considerations as ReactJS, which is the web application version of the library.
One of the main design paradigms for React apps is to split each component of the application into independent, reusable pieces and think about each piece in isolation.
This allows components to be reused across a whole application where appropriate.
Apart from creating all components ourselves, developers can also integrate the other components from around the world created by other developers into their application through a package manager like NPM or Yarn.
Since we are going to reuse the Microsoft authentication service with our future projects as well, we have decided to create a separate NPM module called ‘react-native-azure-ad-2’.
Project structure
The module contains three main components where:
- AzureLoginView is literally a WebView with extra functionality to handle the URL redirection and retrieving a temporary token from the redirect URL. Also, it’s the component that’s responsible for rendering a login view;
- AzureInstance provides helper functions such as getToken and getUserInfoafter the access token has been granted; and
- Auth will handle all access token requests after having temporary code from AzureLoginView.
How this component works
As shown in the diagram:
- Once the application is initiated it will also create an AzureInstance which contain all Microsoft application credentials;
- As soon as a user initiates a login process, for example clicking on login button, AzureLoginView will be created and loaded up on the login page from the Microsoft authentication server;
- After a user enters their login credential and submits, Microsoft authentication server will authenticate the user and redirect the user to a callback URL and also send back a temporary code as a query string;
- AzureLoginViews on NavigationStateChange listener will be triggered when Microsoft redirects users to a call back and AzureLoginView will take a temporary code out of the URL;
- When a temporary code is derived, Auth will be called to perform a second step of authentication to request for an access token from Microsoft server; and
- Once the server replies back, AzureLoginView will set the token back toAzureInstance.
Usage
After implementing the component, using it is quite easy.
First, import the ‘react-native-azure-ad-2’ component.
Then create an AzureInstance by using Microsoft application credentials that we registered above.
Also, add application scope in order to ask users to consent when they login.
For more information about scope visit Microsoft blog.
After that, return AzureLoginView where you want the login WebView to be rendered and pass along with azureInstance that we have created from the last step.
With AzureLoginView, we can have a few prop options to render the view differently.
- loadingMessage — a message that will be shown when requesting access token is in progress.
- loadingView (optional) — an actual view that will be shown when requesting access token is in progress.
- onSuccess — a call back function that will be called when login is a success.
HERE IS AN EXAMPLE WHEN WE PUT EVERYTHING TOGETHER
That should make it easy to integrate Microsoft Azure authentication into your React Native app. If you encounter any issues drop us a line in the comments below or on Github.
Want some help building your technology startup, growing your business and creating products/services that your customers will love? Contact Sheda and let’s see how we can help.
