Microsoft authorization with React

Step-by-step tutorial about configuring authorization with Microsoft in your React application with NPM package.

Create a Microsoft app

1. Go to portal.azure.com
2. Login with an existed Microsoft account or create a new one
3. Go to Azure Active Directory > App registrations > New registration
4. Fill input fields with actual data. For example:
   Name: My test app
   Supported account types: Accounts in any organizational directory
   Redirect URI (optional): [Web] http://localhost:3001
5. Click Register
6. Then, after a successful creation, you’ll see an application dashboard. Find Application (client) ID, we’ll use it in the next steps

Connect with React app

Project initialization is skipped because you should already complete it, and here are two last steps:

1. Install dependency:

npm i react-microsoft-login

2. Import and configure package:

import React from "react";
import MicrosoftLogin from "react-microsoft-login";

export default props => {

    const authHandler = (err, data) => {
        console.log(err, data)
    }

    return (
        <MicrosoftLogin
            clientId={YOUR_CLIENT_ID}
            authCallback={authHandler}
        />
    )
}

Paste your Application (client) ID instead of YOUR_CLIENT_ID, and your React application able to authorize to Microsoft services now.

More details about the react-microsoft-login you can find here