loading...
Microsoft Azure

Connect your React app to Microsoft 365

waldekmastykarz profile image Waldek Mastykarz Originally published at blog.mastykarz.nl on ・3 min read

Connect your React app to Microsoft 365

With the Microsoft Graph Toolkit, you'll be able to connect your app to Microsoft 365 in a matter of minutes. Here is how you'd do it.

250 million reasons to build on Microsoft 365

Microsoft 365, previously known as Office 365, is the productivity cloud from Microsoft used by 250 million people every day to collaborate and communicate. It's also a highly extensible development platform. All the information about its users as well as the content they create is stored in Microsoft 365 and, bearing the necessary permissions, available for you to interact with in your applications.

Connect your app to Microsoft 365

There are a number of different types of apps you can build for Microsoft 365. You can tap into one or more extensibility points or you can connect your existing web- or mobile app to Microsoft 365 and combine the information from the person's organization to your app, making your app more valuable.

The easiest way to connect to Microsoft 365

You connect to Microsoft 365 using Microsoft Graph: a REST API that connects all services and data stored in Microsoft 365. And while you can communicate with it manually, building authentication and composing the right requests yourself, there is a better, much easier way to do it.

Microsoft Graph Toolkit is a set of web components that abstract away the plumbing behind connecting to Microsoft Graph and allow you to focus on your application instead. Microsoft Graph Toolkit is available as a generic set of web components distributed through the @microsoft/mgt npm package.

If you're building apps with React, you can use the @microsoft/mgt-react package which wraps MGT web component in React components making it easier to pass complex data and hook the components up to events.

Recently, we have published a new walkthrough taking you step-by-step through the process of creating a React app, connecting to Microsoft 365 and retrieving data for the currently signed in user.

React app showing data from Microsoft 365 using Microsoft Graph Toolkit

When you check out the walkthrough, notice, how throughout the whole process, you didn't need to issue a single request to Azure AD to get an access token, or ensure that you handle errors and edge cases properly. See, how you didn't need to manually build requests to Microsoft Graph to get the data and parse the response?

This is exactly what makes Microsoft Graph Toolkit shine. With Microsoft Graph Toolkit you can focus on building your application rather than its plumbing.

The above example is relatively simple - on purpose, to help you understand the main concepts when using Microsoft Graph Toolkit. Microsoft Graph Toolkit is highly customizable and versatile, and new components are being added to it regularly to help you build apps on Microsoft 365.

If you haven't tried Microsoft Graph Toolkit yet, I'd highly recommend you do. And I'd love to hear what you think of it.

Check out the walkthrough: Use the Microsoft Graph Toolkit with React

Discussion

pic
Editor guide