Vue build fails in msal-browser v3.1.0

[jnunderwood]

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

3.1.0

Wrapper Library

Not Applicable

Wrapper Library Version

None

Public or Confidential Client?

Public

Description

I have written a Vue.js app using msal-browser. Everything works well using v2.38.2. However, when I upgrade to v3.1.0, the build fails with an error from MsalPlugin.ts. Other than minor formatting changes, this file is exactly the same as the one from the vue3-sample-app. I am using vue-3.3.4 with vite-4.4.9 and node-18.17.1. Note that I am also using typescript-5.2.2.

Error Message

src/plugins/MsalPlugin.ts:82:9 - error TS2322: Type 'InteractionStatus' is not assignable to type '"startup"'.
  Type '"login"' is not assignable to type '"startup"'.

82         state.inProgress = status
           ~~~~~~~~~~~~~~~~

Found 1 error in src/plugins/MsalPlugin.ts:82
ERROR: "type-check" exited with 2.
Process finished with exit code 1

Msal Logs

N/A

MSAL Configuration

auth: {
    clientId: import.meta.env.VITE_OIDC_CLIENT_ID,
    authority: import.meta.env.VITE_OIDC_CLOUD_INSTANCE + import.meta.env.VITE_OIDC_TENANT_ID,
    redirectUri: "/",
    postLogoutRedirectUri: "/logout",
  },
  cache: {
    cacheLocation: BrowserCacheLocation.SessionStorage,
  }

Relevant Code Snippets

// msalPlugin.ts; @see "https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/samples/msal-browser-samples/vue3-sample-app/src/plugins/msalPlugin.ts"

import type { App } from "vue"
import { reactive } from "vue"
import type { AccountInfo, EventMessage } from "@azure/msal-browser"
import {
  EventMessageUtils,
  EventType,
  InteractionStatus,
  PublicClientApplication,
} from "@azure/msal-browser"

type AccountIdentifiers = Partial<
  Pick<AccountInfo, "homeAccountId" | "localAccountId" | "username">
>

/**
 * Helper function to determine whether 2 arrays are equal
 * Used to avoid unnecessary state updates
 * @param arrayA
 * @param arrayB
 */
function accountArraysAreEqual(
  arrayA: Array<AccountIdentifiers>,
  arrayB: Array<AccountIdentifiers>
): boolean {
  if (arrayA.length !== arrayB.length) {
    return false
  }

  const comparisonArray = [...arrayB]

  return arrayA.every((elementA) => {
    const elementB = comparisonArray.shift()
    if (!elementA || !elementB) {
      return false
    }

    return (
      elementA.homeAccountId === elementB.homeAccountId &&
      elementA.localAccountId === elementB.localAccountId &&
      elementA.username === elementB.username
    )
  })
}

export const msalPlugin = {
  install: (app: App, msalInstance: PublicClientApplication) => {
    const inProgress = InteractionStatus.Startup
    const accounts = msalInstance.getAllAccounts()

    const state = reactive({
      instance: msalInstance,
      inProgress: inProgress,
      accounts: accounts,
    })

    app.config.globalProperties.$msal = state

    msalInstance.addEventCallback((message: EventMessage) => {
      switch (message.eventType) {
        case EventType.ACCOUNT_ADDED:
        case EventType.ACCOUNT_REMOVED:
        case EventType.LOGIN_SUCCESS:
        case EventType.SSO_SILENT_SUCCESS:
        case EventType.HANDLE_REDIRECT_END:
        case EventType.LOGIN_FAILURE:
        case EventType.SSO_SILENT_FAILURE:
        case EventType.LOGOUT_END:
        case EventType.ACQUIRE_TOKEN_SUCCESS:
        case EventType.ACQUIRE_TOKEN_FAILURE: {
          const currentAccounts = msalInstance.getAllAccounts()
          if (!accountArraysAreEqual(currentAccounts, state.accounts)) {
            state.accounts = currentAccounts
          }
          break
        }
      }

      const status = EventMessageUtils.getInteractionStatusFromEvent(message, state.inProgress)
      if (status !== null) {
        state.inProgress = status
      }
    })
  },
}

Reproduction Steps

1. npm run build

Expected Behavior

Build should produce no errors.

Identity Provider

Azure AD / MSA

Browsers Affected (Select all that apply)

None (Server)

Regression

@azure/msal-browser 2.38.2

Source

External (Customer)

[microsoft-github-policy-service[bot]]

This issue requires attention from the MSAL.js team and has not seen activity in 5 days. @hectormmg please follow up.

[microsoft-github-policy-service[bot]]

This issue requires attention from the MSAL.js team and has not seen activity in 5 days. @hectormmg please follow up.

[alaouizoubair]

I do have the same error with @azure/msal-browser v3.1.0 in Angular. ./src/app/app.module.ts:11:0-82 - Error: Module not found: Error: Package path ./dist/utils/BrowserConstants is not exported from package node_modules\@azure\msal-browser (see exports field in node_modules\@azure\msal-browser\package.json)

[JLib96]

I'm encountering the same error in my Vue 3 project src/plugins/msalPlugin.ts:82:9 - error TS2322: Type 'InteractionStatus' is not assignable to type '"startup"'. Type '"none"' is not assignable to type '"startup"'. 82 state.inProgress = status;

[mariush2]

I'm also encountering issues when building with vite:

"ServerResponseType" is not exported by "node_modules/@azure/msal-common/dist/index.js", imported by "node_modules/@azure/msal-browser/dist/config/Configuration.mjs".

[Dunowen]

As a temporary workaround you can explicitly set the type of inProgress like this in your plugins:

const inProgress = InteractionStatus.Startup as InteractionStatus;

instead of this:

const inProgress = InteractionStatus.Startup 

[jnunderwood]

As a temporary workaround you can explicitly set the type of inProgress like this in your plugins:

This does indeed fix that issue. Thank you!

Unfortunately, even with that fix, I can no longer authenticate using v3.1.0. The browser console shows a message, but no errors:

@azure/msal-common@14.0.3 : Info - CacheManager:getIdToken - No token found"

When running v2.38.2, I see additional messages in the browser console, such as:

@azure/msal-browser@2.38.2 : Info - Emitting event: msal:handleRedirectStart"
@azure/msal-browser@2.38.2 : Info - Emitting event: msal:acquireTokenStart"

At this point, without an error message or some indication of a code problem, I am not sure how to proceed.

[Dunowen]

To be honest I had the failing line of code completely commented out and my solution still worked, I could still log in and out. I feel like your problem will be with the migration from 2.x to 3.x. I haven't used 2.x before, I just implemented MSAL for my Vue application recently, straight with the latest available version. I can only recommend to go through the migration guide again, maybe you'll find something there:

https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/v2-migration.md

[microsoft-github-policy-service[bot]]

This issue requires attention from the MSAL.js team and has not seen activity in 5 days. @hectormmg please follow up.

[jnunderwood]

I had already reviewed the migration guide. However, I reviewed it again and it looks like I missed something the first time. I also upgraded to v3.2.0. Everything seems to be working now. Thanks for everyone's comments and help!

[jnunderwood]

Closing issue since things are working now.