How to Set Up Microsoft Graph and PnPjs Correctly in a Word Office Add-on

How to Initialize PnPjs and Access Microsoft Graph in a Word Office Add-in

This solution demonstrates how to configure PnPjs for use in an Office Add-in, focusing on backend script modularity and integration with Microsoft Graph.

// Import necessary modules from PnPjs
import { graphfi } from "@pnp/graph";
import "@pnp/graph/users"; // For accessing user data
import { DefaultInit } from "@pnp/graph/presets/all";
// Authentication Service Integration
class AuthService {
    async getGraphApiToken(authority) {
        // Replace this with your actual token fetch logic
        return { accessToken: "your-access-token" };
    }
}
// Main configuration class
class GraphConfig {
    constructor(authService) {
        this.authService = authService;
        this.graph = null;
    }
    async initialize() {
        this.graph = graphfi().using(DefaultInit(), (instance) => {
            instance.on.auth.replace(async (url, context) => {
                const tokenResponse = await this.authService.getGraphApiToken("your-authority");
                if (!tokenResponse) {
                    console.error("Token retrieval failed");
                    return;
                }
                context.headers = {
                    ...context.headers,
                    Authorization: `Bearer ${tokenResponse.accessToken}`
                };
            });
        });
    }
    async testTokenValidity() {
        try {
            const userInfo = await this.graph.me();
            console.log("User info:", userInfo);
        } catch (error) {
            console.error("Token is not valid:", error);
        }
    }
}
// Usage example
const authService = new AuthService();
const graphConfig = new GraphConfig(authService);
await graphConfig.initialize();
await graphConfig.testTokenValidity();

Alternative Approach: Use MSAL for Token Management and PnPjs Initialization

This method uses the MSAL.js library to manage authentication tokens and integrate them into PnPjs for Graph API access.

// Import necessary modules
import * as msal from "@azure/msal-browser";
import { graphfi } from "@pnp/graph";
import "@pnp/graph/users";
// MSAL Configuration
const msalConfig = {
    auth: {
        clientId: "your-client-id",
        authority: "https://login.microsoftonline.com/your-tenant-id",
        redirectUri: "your-redirect-uri"
    }
};
// Initialize MSAL client
const msalClient = new msal.PublicClientApplication(msalConfig);
// Acquire token silently or interactively
async function getToken() {
    try {
        const response = await msalClient.acquireTokenSilent({
            scopes: ["https://graph.microsoft.com/.default"]
        });
        return response.accessToken;
    } catch (error) {
        if (error instanceof msal.InteractionRequiredAuthError) {
            const response = await msalClient.acquireTokenPopup({
                scopes: ["https://graph.microsoft.com/.default"]
            });
            return response.accessToken;
        }
        throw error;
    }
}
// Initialize PnPjs with MSAL token
const graph = graphfi().using((instance) => {
    instance.on.auth.replace(async (url, context) => {
        const token = await getToken();
        context.headers = {
            ...context.headers,
            Authorization: `Bearer ${token}`
        };
    });
});
// Test API
async function testApi() {
    try {
        const user = await graph.me();
        console.log("User info:", user);
    } catch (error) {
        console.error("API call failed:", error);
    }
}
// Execute test
testApi();

Common Questions About Integrating PnPjs and Microsoft Graph

1. What is graphfi() used for?
2. graphfi() initializes a PnPjs Graph instance, enabling interaction with Microsoft Graph APIs.
3. How do I inject tokens using on.auth.replace?
4. The on.auth.replace method allows you to replace the default authentication flow with custom logic to insert the token into request headers.
5. What does DefaultInit() provide?
6. DefaultInit() simplifies the configuration for PnPjs, providing prebuilt defaults for typical use cases.
7. How does MSAL handle silent token requests?
8. acquireTokenSilent() retrieves tokens from the cache without user interaction, ensuring seamless operation.
9. What are the benefits of batching API requests?
10. Batching with PnPjs reduces the number of API calls, improving performance and reducing latency for data retrieval operations.

Seamless Integration of PnPjs and Microsoft Graph

Efficiently setting up PnPjs in an Office Add-in ensures that your application is ready to securely fetch data and interact with Microsoft Graph. This framework simplifies handling SharePoint content and user data while prioritizing security and performance. Proper implementation is crucial for reliability.

By following the steps and examples provided, developers can resolve common issues like authentication failures and optimize their add-ins for better user experience. With these tools and best practices in place, your Word Add-in can become a powerful tool for enterprise productivity. 🛠️