Blog

Unlocking Microsoft 365 Data with JavaScript

Imagine this: your team is building a productivity app that needs to pull in user calendars, emails, or OneDrive files from Microsoft 365. You’ve heard of Microsoft Graph, the unified API endpoint for accessing Microsoft 365 data, but you’re not sure where to start. The documentation feels overwhelming, and you just want to see a working example in JavaScript. Sound familiar?

Microsoft Graph is a goldmine for developers. It allows you to interact with Microsoft 365 services like Outlook, Teams, OneDrive, and more—all through a single API. But getting started can be tricky, especially when it comes to authentication and managing API calls securely. In this guide, I’ll walk you through how to set up and make your first Microsoft Graph API call using JavaScript. Along the way, I’ll share some hard-earned lessons, gotchas, and tips to ensure your implementation is both functional and secure.

Before We Dive In: Security Implications

Before writing a single line of code, let’s talk security. Microsoft Graph requires OAuth 2.0 for authentication, which means you’ll need to handle access tokens. These tokens grant access to sensitive user data, so mishandling them can lead to serious security vulnerabilities.

Additionally, always request the minimum set of permissions (scopes) your app needs. Over-permissioning is not only a security risk but also a violation of Microsoft’s best practices.

Step 1: Setting Up the Microsoft Graph JavaScript Client Library

The easiest way to interact with Microsoft Graph in JavaScript is by using the official @microsoft/microsoft-graph-client library. This library simplifies the process of making HTTP requests and handling responses.

First, install the library via npm:

npm install @microsoft/microsoft-graph-client

Once installed, you’ll also need an authentication library to handle OAuth 2.0. For this example, we’ll use msal-node, Microsoft’s official library for authentication in Node.js:

npm install @azure/msal-node

Step 2: Authenticating with Microsoft Graph

Authentication is the trickiest part of working with Microsoft Graph. You’ll need to register your application in the Azure portal to get a client_id and client_secret. Here’s how:

1. Go to the Azure Portal and navigate to “App Registrations.”
2. Click “New Registration” and fill in the required details.
3. Once registered, note down the Application (client) ID and Directory (tenant) ID.
4. Under “Certificates & Secrets,” create a new client secret. Store this securely; you’ll need it later.

With your app registered, you can now authenticate using the msal-node library. Here’s a basic example:

const msal = require('@azure/msal-node');

// MSAL configuration
const config = {
  auth: {
    clientId: 'YOUR_APP_CLIENT_ID',
    authority: 'https://login.microsoftonline.com/YOUR_TENANT_ID',
    clientSecret: 'YOUR_APP_CLIENT_SECRET',
  },
};

// Create an MSAL client
const cca = new msal.ConfidentialClientApplication(config);

// Request an access token
async function getAccessToken() {
  const tokenRequest = {
    scopes: ['https://graph.microsoft.com/.default'],
  };

  try {
    const response = await cca.acquireTokenByClientCredential(tokenRequest);
    return response.accessToken;
  } catch (error) {
    console.error('Error acquiring token:', error);
    throw error;
  }
}

In this example, we’re using the “client credentials” flow, which is ideal for server-side applications. If you’re building a client-side app, you’ll need to use a different flow, such as “authorization code.”
Step 3: Making Your First Microsoft Graph API Call
Now that you have an access token, you can use the Microsoft Graph client library to make API calls. Let’s fetch the authenticated user’s profile using the /me endpoint:
const { Client } = require('@microsoft/microsoft-graph-client');
require('isomorphic-fetch'); // Required for fetch support in Node.js

async function getUserProfile(accessToken) {
  // Initialize the Graph client
  const client = Client.init({
    authProvider: (done) => {
      done(null, accessToken);
    },
  });

  try {
    const user = await client.api('/me').get();
    console.log('User profile:', user);
  } catch (error) {
    console.error('Error fetching user profile:', error);
  }
}

// Example usage
(async () => {
  const accessToken = await getAccessToken();
  await getUserProfile(accessToken);
})();

This code initializes the Microsoft Graph client with an authentication provider that supplies the access token. The api('/me').get() call retrieves the user’s profile information.

💡 Pro Tip: Use the select query parameter to fetch only the fields you need. For example, client.api('/me').select('displayName,mail').get() will return only the user’s name and email.

Step 4: Handling Errors and Debugging
Working with APIs inevitably involves error handling. Microsoft Graph uses standard HTTP status codes to indicate success or failure. Here are some common scenarios:

401 Unauthorized: Your access token is invalid or expired. Ensure you’re refreshing tokens as needed.
403 Forbidden: Your app lacks the required permissions. Double-check the scopes you’ve requested.
404 Not Found: The endpoint you’re calling doesn’t exist. Verify the API URL.

To debug issues, enable logging in the Microsoft Graph client:
const client = Client.init({
  authProvider: (done) => {
    done(null, accessToken);
  },
  debugLogging: true, // Enable debug logging
});

Step 5: Scaling Your Implementation
Once you’ve mastered the basics, you’ll likely want to scale your implementation. Here are some tips:

Batch Requests: Use the /$batch endpoint to combine multiple API calls into a single request, reducing latency.
Pagination: Many Microsoft Graph endpoints return paginated results. Use the @odata.nextLink property to fetch additional pages.
Rate Limiting: Microsoft Graph enforces rate limits. Implement retry logic with exponential backoff to handle 429 Too Many Requests errors.

Conclusion
By now, you should have a solid understanding of how to make Microsoft Graph API calls using JavaScript. Let’s recap the key takeaways:

Use the @microsoft/microsoft-graph-client library to simplify API interactions.
Authenticate securely using the msal-node library and environment variables for sensitive credentials.
Start with basic API calls like /me and gradually explore more advanced features like batching and pagination.
Always handle errors gracefully and implement retry logic for rate-limited requests.
Request only the permissions your app truly needs to minimize security risks.

What will you build with Microsoft Graph? Share your thoughts and questions in the comments below!