react-microsoft-login

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

DEMO HERE

🚀 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.

📖 API

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) {
      onMsalInstanceChange(msal);
    }
  };
 
  const logoutHandler = () => {
    msalInstance.logout();
  };
 
  return msalInstance ? (
    <button onClick={logoutHandler}>Logout</button>
  ) : (
    <MicrosoftLogin clientId={clientId} authCallback={loginHandler} />
  );
};
 
export default ExaplePage;

📝 License

MIT