Microsoft authorization with React

Alexandr Tovmach
1 min readSep 18, 2019

--

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

--

--

Alexandr Tovmach

I’m web developer & designer and sometimes I like to write articles.