Microsoft Graph Toolkit Electron Provider - But better than Microsoft version

The Microsoft Graph Toolkit (mgt) library is a collection of authentication providers and UI components powered by Microsoft Graph.

The msal-electron-provider package exposes the ElectronAuthenticator and ElectronProvider classes which use MSAL node to sign in users and acquire tokens to use with Microsoft Graph.

Changes on this version of package includes:

• Fix on Compiling both for cjs and esm modules
• Not Requiring Electron and getting the needed instances as an argument (fixes problems with webpack/react electron)

Usage

1. Install the packages

   npm install @microsoft/mgt-element msal-electron-provider

2. Initialize the provider in your renderer process (Front end, eg. renderer.ts)

   import { ipcRenderer } from 'electron';
   import { Providers } from '@microsoft/mgt-element';
   import { ElectronProvider } from 'msal-electron-provider/dist/[esm/cjs]/Provider';
   
   // initialize the auth provider globally
   Providers.globalProvider = new ElectronProvider(ipcRenderer);

3. Initialize ElectronAuthenticator in Main.ts (Back end)

   import { ipcMain, protocol } from 'electron';
   import { ElectronAuthenticator, MsalElectronConfig } from 'msal-electron-provider/dist/[esm/cjs]/Authenticator'; 
   ...
   let mainWindow =  new BrowserWindow({
     width: 800,
     height: 800,
     webPreferences: {
       nodeIntegration: true //Make sure this is true
     }
   });
   let config: MsalElectronConfig = {
     clientId: '<your_client_id>',
     authority: '<your_authority_url>', //optional, uses common authority by default
     mainWindow: mainWindow, //This is the BrowserWindow instance that requires authentication
     scopes: [
       'user.read', 
     ],
   };
   const myAuthenticator = new ElectronAuthenticator(config, ipcMain, protocol);

Note : Make sure nodeIntegration is set to true under webPreferences while creating a new BrowserWindow instance.

See provider usage documentation to learn about how to use the providers with the mgt components, to sign in/sign out, get access tokens, call Microsoft Graph, and more. See Electron provider documentation.

Cache Plugin

MSAL Node supports an in-memory cache by default and provides the ICachePlugin interface to perform cache serialization, but does not provide a default way of storing the token cache to disk. If you need persistent cache storage to enable silent log-ins or cross-platform caching, we recommend using the default implementation provided by MSAL Node here. You can import this plugin, and pass the instance of the cache plugin while initializing ElectronAuthenticator.

let config: MsalElectronConfig = {
  ...
  cachePlugin: new PersistenceCachePlugin(filePersistence)
};

For more details on how to implement this, refer to the sample for this extension here.

See also

• Build an electron app and integrate Microsoft Graph Toolkit
• Microsoft Graph Toolkit docs
• Microsoft Graph Toolkit repository
• Microsoft Graph Toolkit playground