How do I authenticate a Vue.js progressive web app with the Microsoft Graph

Question

I have a Vue.js app. This app is a progressive web app, so it's intended to primarily run on the client-side. However, during the initial start-up, I need to authenticate the user in my Azure Active Directory, get data associated with their account, and store it for offline use.

I have a server-side API in place already for retrieving the data associated with a user account. I also know how to store it for offline use. However, my question is: how do I authenticate with the Microsoft Graph from my Vue.js app? Everything I see relies on using Node.js middleware, but unless I'm misunderstanding something, my progressive web app isn't a Node.js app. It's just straight up JavaScript, HTML, and CSS.

If the user closes the app, then revisits it in a couple of days, I believe I would need to use the refresh token to get a new access token. Still, once again, everything I see relies on Node.js middleware. I believe I need a solution that works purely in Vue.js / JavaScript. Am I mistaken?

Updates

1) Installed the Microsoft Graph Client via NPM (npm install @microsoft/microsoft-graph-client --save). This installed v1.7.0.

2) In my Vue.js app, I have:

import * as MicrosoftGraph from '@microsoft/microsoft-graph-client';
import * as Msal from 'msal';

let clientId = '<some guid>';
let scopes = ['user.read'];
let redirectUrl = 'http://localhost:1234/';  // This is registered in Azure AD.

let cb = (message, token, error, tokenType) => {
  if (error) {
    console.error(error);
  } else {
    console.log(token);
    console.log(tokenType);
  }
}

let reg = new Msal.UserAgentApplication(clientId, undefined, cb, { redirectUrl });
let authProvider = new MicrosoftGraph.MSALAuthenticationProvider(reg, scopes);

The last line generates an error that says: export 'MSALAuthenticationProvider' (imported as 'MicrosoftGraph') was not found in '@microsoft/microsoft-graph-client'

Answer 1

The last line generates an error that says: export 'MSALAuthenticationProvider' (imported as 'MicrosoftGraph') was not found in '@microsoft/microsoft-graph-client'

This error occurs because the main script (lib/src/index.js) of @microsoft/microsoft-graph-client does not export that symbol. You'll notice that logging MicrosoftGraph.MSALAuthenticationProvider yields undefined. Actually, the main script is intended to be run in Node middleware.

However, @microsoft/microsoft-graph-client provides browser scripts that do make MSALAuthenticationProvider available:

lib/graph-js-sdk-web.js

• browserified bundle (not tree-shakable)
• sets window.MicrosoftGraph, which contains MSALAuthenticationProvider
• does not export any symbols itself

import '@microsoft/microsoft-graph-client/lib/graph-js-sdk-web'

let authProvider = new window.MicrosoftGraph.MSALAuthenticationProvider(/* ... */)

demo 1

lib/es/browser/index.js

• ES Modules (tree-shakable)
• exports MSALAuthenticationProvider

import { MSALAuthenticationProvider } from '@microsoft/microsoft-graph-client/lib/es/browser'

let authProvider = new MSALAuthenticationProvider(/* ... */)

demo 2

lib/src/browser/index.js

• CommonJS module (not tree-shakable)
• exports MSALAuthenticationProvider

import { MSALAuthenticationProvider } from '@microsoft/microsoft-graph-client/lib/src/browser'

let authProvider = new MSALAuthenticationProvider(/* ... */)

demo 3