Do more with the new 3.0.0 release of the Microsoft Graph JavaScript SDK. This release includes support for multiple authentication flows and enhancements to the large file upload task. The changes introduced in the new version are not backward-compatible; for details about how to update your client, see the upgrade guide.

The Microsoft Graph JS SDK 3.0.0 requires Node.js 12 LTS or higher. The source code is implemented using TypeScript 4.x.

Authentication Enhancements

In this update,  we have added support for multiple authentication flows by adding support for @azure/msal-browser and @azure/identity. This update also includes the removal of the ImplicitMSALAuthenticationProvider.

Support for Authentication Code Flow using @azure/msal-browser

The Microsoft Graph JavaScript SDK 3.0.0 enhances authentication by introducing the AuthCodeMSALBrowserAuthenticationProvider class. This class adds support for authentication using the @azure/msal-browser. This MSAL library supports the Authorization Code Flow with PKCE for browser-based applications.

Wondering whether this is the authentication provider you need? Learn more about how to choose a Microsoft Graph authentication provider based on scenario.

import {
  PublicClientApplication,
  InteractionType,
  AccountInfo,
} from "@azure/msal-browser";
import {
  AuthCodeMSALBrowserAuthenticationProvider,
  AuthCodeMSALBrowserAuthenticationProviderOptions,
} from "@microsoft/microsoft-graph-client/authProviders/authCodeMsalBrowser";

const options: AuthCodeMSALBrowserAuthenticationProviderOptions = {
  account,
  interactionType: InteractionType.PopUp,
  scopes: ["user.read", "mail.send"],
};

const authProvider = new AuthCodeMSALBrowserAuthenticationProvider(
  publicClientApplication,
  options
);

const graphClient = Client.initWithMiddleware({
  authprovider,
});

Enabling Client Credential Flow and more with @azure/identity

The JavaScript SDK 3.0.0 introduces the TokenCredentialAuthenticationProvider class, which enables the use of @azure/identity credential classes for authentication.

The TokenCredentialAuthenticationProvider class adds the following new capabilities:

• Server-side authentication using credential classes such as ClientSecretCredential or ClientCertificateCredential.
• Support for multiple authentication flows using credential classes such as DeviceCodeCredential, VisualStudioCodeCredential, and DefaultAzureCredential.

TokenCredentialAuthenticationProvider.

creating an instance of TokenCredentialAuthentication

ImplicitMSALAuthenticationProvider is removed

The ImplicitMSALAuthenticationProvider class will not be available starting with version 3.0.0 of the Microsoft Graph JavaScript SDK.

In accordance with OAuth 2.0 Implicit Grant, we no longer recommend the use of ImplicitMSALAuthenticationProvider, that is, using the implicit authorization flow.

Upload larger files using Node.js Stream

The LargeFileTaskUpload class enables you to upload files to OneDrive, Outlook, and Universal Print. With this release, we added StreamUpload, which supports Node.JS stream, and FileUpload, which supports upload of file formats like ArrayBuffer, Blob, and Buffer.

You can now track the progress of the upload by using UploadEventHandlers.

The following example shows how you can use the new StreamUpload class.

import StreamUpload from "@microsoft/microsoft-graph-client";

import * as fs from "fs";

const fileName = "<FILE_NAME>";

const stats = fs.statSync(`./test/sample_files/${fileName}`);

const totalsize = stats.size;

const readStream = fs.createReadStream(`./test/sample_files/${fileName}`);

const fileObject = new StreamUpload(readStream, fileName, totalsize);

const progress = (range?: Range, extraCallBackParam?: unknown) => {

  // Handle progress event

};

const uploadEventHandlers: UploadEventHandlers = {

  progress,

  extraCallBackParam,

};

const options: LargeFileUploadTaskOptions = {

  rangeSize: 327680,

  uploadEventHandlers: UploadEventHandlers,

};

const uploadTask = new LargeFileUploadTask(client, fileObj, uploadSession, options);

const uploadResult: UploadResult = await uploadTask.upload();

To learn more about the new updates, see Large file upload task.

We love hearing from you

Thank you to all the community members who continue to provide feedback on this library. We encourage you to upgrade to the new version of our Microsoft Graph JavaScript SDK. See the upgrade guide and npm packages. Submit any issues or feature requests on the Issues tab of the GitHub repo.

This post is written by Nikitha Chettiar and Roina Ochieng