Implement Microsoft login in a react.js app

In one of the recent projects I had a requirement to do integration with Microsoft Office365 Calendar Api and for that I needed to implement Microsoft login in a react.js app. I tried to search for a readily available npm package which I could consume easily and which fits nicely in the react ecosystem, but unfortunately I couldn’t find any so I decided to write my own.

Hoping that this might be useful to someone else as well, I also published it react-ms-login on npm. Read on to know how to use it.

Registration

Before we start writing any code, we need to obtain application Id (or client id) by registering our app in Microsoft App Dev Center. While registering make sure you add web platform under the platforms section. Also provide a valid redirectUri. Redirect URI is essentially an HTTP endpoint where Microsoft Authorization Server will redirect OAuth agent (i.e browser) after successful login. In this case redirectUri is the path of an html file residing on your web server, for example http://localhost:9999/authComplete.html. Don’t worry about the content of this HTML file just yet, it’s mentioned next in the authComplete step below.

Select appropriate scopes from the Delegated Permissions Section, A full list of all the valid scopes is present here. Keep a note of these. You will need this information while using the react-ms-login. Now after setup part out of our way, let’s put this info to good use and create a simple example.

Install package

Install the package via

npm install react-ms-login --save

How to use?

We will create a simple react app, as shown below, which renders the Microsoft login button.

import React from "react";
import ReactDOM from "react-dom";

import ReactLoginMS from "react-ms-login";

class ButtonContent extends React.Component {
    render(){
        return (
        <span>
            MS Login
        </span>)
    }
}

ReactDOM.render(<ReactLoginMS
    clientId="a157e2ad-7d43-4478-9051-541fd1b2023f" // required: 'application id/client id' obtained from https://apps.dev.microsoft.com for your app
    redirectUri="http://localhost:9999/authComplete.html" // required: redirectUri registered in https://apps.dev.microsoft.com for your app
    scopes={["user.read"]} //optional: defaults to "user.read" full list is present https://developer.microsoft.com/en-us/graph/docs/concepts/permissions_reference
    responseType="token" //optional: valid values are "token" for `Implicite OAuth flow` and "code" for `Authorization Code flow` defaults to "token"
    cssClass="some-css-class" // optional: space separated class names which are applied on the html Button element
    btnContent={ButtonContent} // optional: can be string or a valid react component which can be rendered inside html Button element
    handleLogin={(data) => console.log(data)}// required: callback to receive token/code after successful login
/>, document.getElementById("app"));

as you can see in the code above, react-ms-login component takes few parameters which you can pass using attributes. Comment against each parameter gives more information about it. handleLogin attribute takes a callback function which will be called after successful login, passing all the information obtained from Microsoft Authorizatio server. This information will depend upon the value passed from responseType parameter. Make sure you provide the same redirectUri which you have provided while registering your app.

In order to style the render login button you can provide the css classes in the cssClass attribute, if you need to pass more than one class just separate them by space.

You can also change the content of Button element, it can be any text or a valid React component which can be rendered inside Button html element property. Use btnContent for this.

responseType parameter allows you to obtain either authorization token, if you pass “token” as it’s value, or authorization code if you pass “code” as it’s value. If nothing is provided it defaults to “token”.

authComplete

Last step to make all this work is to actually create a valid HTTP resource against the redirectUri you have setup while registering the app.

Create the html file with the correct name and in the correct location in you web server, based on the redirectUri. For example in this case since we have configured redirectUri as http://localhost:9999/authComplete.html, that means we need authComplete.html file at the root of the server. You can of course choose any path in your server, just make sure redirectUri reflects that path correctly.

Content of authComplete.html is shown below.

<!DOCTYPE html>
<html>

<head>
    <script src="dist/authComplete.js"></script>
    <script>
        ReactLoginMS.authComplete();
    </script>
</head>
<body>
    
</body>
</html>

first script reference points to authComplete.js, make sure you copy this file from the dist directory of react-ms-login package and put it in your server where it’s accessible and then change the script src to reflect the path.

Conclusion

If you have followed all the steps correctly, then at this point you will have a working “Microsoft Login” implementation.