Make your React application part of the Microsoft 365 ecosystem.

The file picker that we will be creating

The Microsoft 365 platform has really taken of in the last decade with a lot of transitional enterprises finally moving their IT-landscape to the cloud. For developers this means that there is more and more value to be gained by integrating their applications with those cloud environments. To facilitate this Microsoft has created the Microsoft Graph platform where all the different systems come together in a single OData gateway to the outside world.

In this article I want to show you how you can use Microsoft Graph to build a file picker that selects files from an users online drive. If you now have an application where users now upload files they created in their local office installation you can now upgrade this to work with files that are in their OneDrive folder.

Authentication with Microsoft Identity

To start using Graph you will first need to implement SSO with Azure Active Directory. The easiest way to do this is to follow this tutorial from Microsoft for React. You do only need the authentication code, you can stop at the ‘Get a calendar view’ step.

#typescript #microsoft #react