React Application Integration To Microsoft Graph Using Microsoft Graph SDK

Application Registration in Azure AD

Microsoft Graph API, which is used to connect the M365 Application, is secured with OAuth 2.0. To connect M365 Apps, you need to register service application in the azure active directory and grant this app to access specific resources like directory, SharePoint Site, or Teams artifacts.

To create the app in Azure Active Directory,

• Login to Azure portal
• Select Azure Active Directory.
• Select App registrations.
• Click the New registration button.
• Enter the name “m365integration” for this app
• Select Accounts in any organizational directory in the type of account
• Select Single Page Application (SPA) in the redirect URL field
• Enter http://localhost:3000 in URL Field
• Click the Register button to save all changes
• Copy application ID from created application in Azure Active directory, You will get it from the overview tab.

Integrate Microsoft Graph SDK to React

We need to import a couple of packages for authentical providers and initialize MsalProvider in the Application.

Add the below code in file "src/index.tsx".

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Providers } from '@microsoft/mgt-element';
import { Msal2Provider } from '@microsoft/mgt-msal2-provider';
Providers.globalProvider = new Msal2Provider({
  clientId: '<Azure AD Application ID>' // Add your application ID which is registered in Azure
});
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
reportWebVitals();

Let us add the Login component.

Add below code in file "src/App.tsx".

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { Login } from '@microsoft/mgt-react'; // import login component
function App() {
  return (
    <div className="App">
      <header>
        <Login /> // Use login component
      </header>
    </div>
  );
}
export default App;

Let's run the application.

npm start

The output will be as below,

Let's add a person component in React Application.

Install the below npm package in Application,

import { Providers, ProviderState } from '@microsoft/mgt';

Update file "src/App.tsx" with below code.

import React, { useState, useEffect } from 'react';
import { Providers, ProviderState } from '@microsoft/mgt';
import logo from './logo.svg';
import './App.css';
import { Login } from '@microsoft/mgt-react';
import { Person } from '@microsoft/mgt-react';
function useIsSignedIn(): [boolean] {
  const [isSignedIn, setIsSignedIn] = useState(false);
  useEffect(() => {
    const updateState = () => {
      const provider = Providers.globalProvider;
      setIsSignedIn(provider && provider.state === ProviderState.SignedIn);
    };

    Providers.onProviderUpdated(updateState);
    updateState();

    return () => {
      Providers.removeProviderUpdatedListener(updateState);
    }
  }, []);

  return [isSignedIn];
}
function App() {
  const [isSignedIn] = useIsSignedIn();
  const [people, setPeople] = useState([]);

  const handleSelectionChanged = (e: any) => {
    setPeople(e.target.selectedPeople);
  };
  return (
    <div className="App">
      <header>
        <Login />
      </header>
      {isSignedIn &&    // Checking if user is signed in that below HTML will be rendered
        <div>
          <div>
            <p>Person Component : <Person personQuery="me"></Person></p>
          </div>
        </div>}
    </div>
  );
}
export default App;

Let us add People Picker and People Component.

Open file "src/App.tsx" and import the below package on the top section of the file.

import { PeoplePicker, People } from '@microsoft/mgt-react';

Update App() function with below code,

function App() {
  const [isSignedIn] = useIsSignedIn();
  const [people, setPeople] = useState([]);

  const handleSelectionChanged = (e: any) => {
    setPeople(e.target.selectedPeople);
  };
  return (
    <div className="App">
      <header>
        <Login />
      </header>
      {isSignedIn &&
        <div>
          <div>
            <p>Person Component : <Person personQuery="me"></Person></p>
          </div>
          <div style={{ width: "400px" }}>
            <p>People Picker Component : <PeoplePicker selectionChanged={handleSelectionChanged} /></p>
            <p>People Component: <People people={people} /></p>
          </div>
        </div>}
    </div>
  );
}

Let's run the application again.

npm Start

The output will be as below,

Conclusion

In this article, we learned how to integrate React App with Microsoft Graph and how to implement the Microsoft Graph SDK component in React Application.

I hope you enjoyed this article.