Neural Processing Mechanisms
Miss any of our Open RFC calls?Watch the recordings here! »


1.12.1 • Public • Published


npm npm bundle size npm

React component for a simple login with Microsoft services, based on Official Microsoft Authentication Library for JavaScript.



🚀 Get started

  1. Install package:

    npm i react-microsoft-login
    # or 
    yarn add react-microsoft-login
  2. Import and configure component:

    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} />
  3. YOUR_CLIENT_ID is the key which you need to generate for your Microsoft app. How to create Microsoft app? When finished, on the app Overview page, note down the Application (client) ID value.


Parameter Type Default Description
clientId string required Application (client) ID
authCallback function required Callback function which takes three arguments (error, authData, msalInstance)
graphScopes array [""] Array of Graph API permission names. More about Graph API permissions.
redirectUri string window.location.href The redirect URI of the application, this should be same as the value in the application registration portal.
tenantUrl string A URL indicating a directory that MSAL can request tokens from. More about MSAL tenant auth.
prompt enum("login", "select_account", "consent", "none") Specify custom prompt behavior
buttonTheme enum("dark_short", "light_short", "dark", "light") "light" Theme for button style that based on Official Microsoft brand design.
withUserData boolean Boolean flag to make an additional request to GraphAPI to get user data.
forceRedirectStrategy boolean Boolean flag to force redirect login strategy for all browsers. This strategy used by default just for IE browsers to avoid issues.
debug boolean Boolean flag to enable detailed logs of authorization process.
className string Additional class name string.
children ReactComponent Alternative way to provide custom button element as a children prop instead of Official Microsoft brand design

Sign out

Since version 1.12.0 and higher msalInstance returned as third argument in callback function, after success auth. With this instance you can do many things and logout is one of them:

import React, { useState } from "react";
import MicrosoftLogin from "../../dist";
const ExaplePage = () => {
  const [msalInstance, onMsalInstanceChange] = useState();
  const loginHandler = (err, data, msal) => {
    console.log(err, data);
    // some actions
    if (!err && data) {
  const logoutHandler = () => {
  return msalInstance ? (
    <button onClick={logoutHandler}>Logout</button>
  ) : (
    <MicrosoftLogin clientId={clientId} authCallback={loginHandler} />
export default ExaplePage;

📝 License



npm i react-microsoft-login

DownloadsWeekly Downloads






Unpacked Size

49.1 kB

Total Files


Last publish


  • avatar