search

AzureAD / microsoft-authentication-library-for-js

Microsoft Authentication Library (MSAL) for JS
http://aka.ms/aadv2
MIT License
3.64k stars 2.65k forks source link

PublicClientApplication type mismatches #5971

Closed grosch-intl closed 1 year ago

grosch-intl commented 1 year ago

Core Library

MSAL.js v2 (@azure/msal-browser)

Core Library Version

2.37.0

Wrapper Library

MSAL Angular (@azure/msal-angular)

Wrapper Library Version

2.5.7

Public or Confidential Client?

Public

Description

After upgrading to the above npm version I'm now getting errors about incompatible PublicClientApplication types.

Error Message

Error: src/app/provide-azure.ts:36:55 - error TS2322: Type 'import("C:/Users/grosch/source/repos/newlamp/web/node_modules/@azure/msal-browser/dist/app/PublicCli entApplication").PublicClientApplication' is not assignable to type 'import("C:/Users/grosch/source/repos/newlamp/web/node_modules/@microsoft/mgt-msal2-provider /node_modules/@azure/msal-browser/dist/app/PublicClientApplication").PublicClientApplication'. Types have separate declarations of a private property 'activeSilentTokenRequests'.

36 Providers.globalProvider = new Msal2Provider({publicClientApplication})


Error: src/app/provide-azure.ts:55:55 - error TS2322: Type 'import("C:/Users/grosch/source/repos/newlamp/web/node_modules/@azure/msal-browser/dist/app/PublicCli
entApplication").PublicClientApplication' is not assignable to type 'import("C:/Users/grosch/source/repos/newlamp/web/node_modules/@microsoft/mgt-msal2-provider
/node_modules/@azure/msal-browser/dist/app/PublicClientApplication").PublicClientApplication'.

55         Providers.globalProvider = new Msal2Provider({publicClientApplication})

Msal Logs

No response

MSAL Configuration

{
    auth: {
        clientId: environment.azure.clientId,
        authority: 'https://login.microsoftonline.com/...',
        redirectUri: window.location.origin
    },
    cache: {
        cacheLocation: BrowserCacheLocation.LocalStorage,
        storeAuthStateInCookie: false
    }
}

Relevant Code Snippets

const publicClientApplication = new PublicClientApplication({
    auth: {
        clientId: environment.azure.clientId,
        authority: 'https://login.microsoftonline.com/...',
        redirectUri: window.location.origin
    },
    cache: {
        cacheLocation: BrowserCacheLocation.LocalStorage,
        storeAuthStateInCookie: false
    }
})

export const provideAzure = () => makeEnvironmentProviders([{
    provide: APP_INITIALIZER,
    useFactory: (msalService: MsalService) => async () => {
        Providers.globalProvider = new Msal2Provider({publicClientApplication})

Reproduction Steps

Just trying to compile the code.

Expected Behavior

Not a compiler error.

Identity Provider

Azure AD / MSA

Browsers Affected (Select all that apply)

Chrome

Regression

Not sure which version it was on previously.

Source

External (Customer)

grosch-intl commented 1 year ago

I found that if I completely removed both node_modules and .angular directories and started fresh then it works OK. That's somewhat painful to have to do though.

konstantin-msft commented 1 year ago

Hi @grosch-intl. This looks like a version mismatch issue. Once you bump the direct @azure/msal-browser dependency it might clash with the old version of @microsoft/mgt-msal2-provider/node_modules/@azure/msal-browser unless you upgrade @microsoft/mgt-msal2-provider. That's the reason why installing dependencies from scratch fixed the issue for you.

You may want to override @azure/msal-browser dependency version for @microsoft/mgt-msal2-provider to make sure it always matches the direct dependency version. Here is an example:

"dependencies": {
    "@azure/msal-browser": "2.37.0",
    "@microsoft/mgt-msal2-provider": "awesome-version"
}
"overrides": {
    "@microsoft/mgt-msal2-provider": {
        "@azure/msal-browser": "$@azure/msal-browser"
    }
}
grosch-intl commented 1 year ago

Hi @konstantin-msft

That doesn't seems to be making a difference for me. Slightly different issue, but same line of code. I upgraded @azure/msal-browser and @azure/msal-angular to the 3.0.0-alpha.0 version, and now, after a full reinstall, I get this:

Type 'PublicClientApplication' is missing the following properties from type 'PublicClientApplication': ac tiveSilentTokenRequests, trackPageVisibility, acquireTokenSilentAsync, browserCrypto, and 31 more.

konstantin-msft commented 1 year ago

May I ask you what package manager are you using? We have discovered an issue in 3.0.0-alpha.0 with yarn that prevents it from installing bundled @azure/msal-common package. If that is the case, I would suggest downgrading to the LTS version or switching to npm unless we rollout a fix. Also, did you check that node_modules/@azure/msal-browser and @microsoft/mgt-msal2-provider/node_modules/@azure/msal-browser versions match?

grosch-intl commented 1 year ago

I was using yarn, yes. I hope they push a fix for that soon. I switched to npm temporarily.

Looks like they don't match again:

$ grep version \@azure/msal-browser/package.json \@microsoft/mgt-msal2-provider/node_modules/\@azure/msal-browser/package.json
@azure/msal-browser/package.json:  "version": "3.0.0-alpha.0",
@microsoft/mgt-msal2-provider/node_modules/@azure/msal-browser/package.json:  "version": "2.37.0",

In my package.json I have this in dependencies:

    "@azure/msal-angular": "3.0.0-alpha.0",
    "@azure/msal-browser": "3.0.0-alpha.0",
    "@microsoft/mgt": "3.0.0-preview.1",
    "@microsoft/mgt-mock-provider": "3.0.0-preview.1",

and I added the overrides:

  "overrides": {
    "@microsoft/mgt-msal2-provider": {
      "@azure/msal-browser": "$@azure/msal-browser"
    }
  }
konstantin-msft commented 1 year ago

What version of npm are you using? It works for me with npm 9.6.6. Before switching to npm and alpha/preview packages did you try using yarn resolutions?

grosch-intl commented 1 year ago

I just upgraded to 9.6.6. I can't use the yarn resolutions because the azure package won't install via yarn yet. I explicitly added "@microsoft/mgt-msal2-provider": "^3.0.0-preview.1" to my package.json as well. Now i get no errors, but network calls don't happen. If I look in the package-lock.json I see this, which seems wrong:

    "node_modules/@microsoft/mgt-teams-msal2-provider/node_modules/@azure/msal-browser": {
      "version": "2.37.0",
      "resolved": "https://registry.npmjs.org/@azure/msal-browser/-/msal-browser-2.37.0.tgz",
      "integrity": "sha512-YNGD/W/tw/5wDWlXOfmrVILaxVsorVLxYU2ovmL1PDvxkdudbQRyGk/76l4emqgDAl/kPQeqyivxjOU6w1YfvQ==",
      "dependencies": {
        "@azure/msal-common": "13.0.0"
      },
      "engines": {
        "node": ">=0.8.0"
      }
    },
grosch-intl commented 1 year ago

Any thoughts, @konstantin-msft ? I'm assuming that because of the mismatch the MSAL interceptor is grabbing and rejecting the network call.

konstantin-msft commented 1 year ago

@grosch-intl Unfortunately I can't reproduce this on my machine. Thinking of your use case makes me realize this approach is error-prone. By enforcing @microsoft/mgt-teams-msal2-provider/node_modules/@azure/msal-browser dependency version we can never guarantee its compatibility with the parent package due to the potential breaking changes. I would recommend either pinning @microsoft/mgt-teams-msal2-provider and @azure/msal-browser versions in a way that direct and inderect @azure/msal-browser package versions match OR splitting their usage into different namespaces.

ghost commented 1 year ago

@grosch-intl This issue has been automatically marked as stale because it is marked as requiring author feedback but has not had any activity for 5 days. If your issue has been resolved please let us know by closing the issue. If your issue has not been resolved please leave a comment to keep this open. It will be closed automatically in 7 days if it remains stale.

IMBeniamin commented 6 months ago

I am facing the same problem even now using yarn

➜ yarn info @microsoft/mgt-msal2-provider
└─ @microsoft/mgt-msal2-provider@npm:4.1.0
   ├─ Version: 4.1.0
   │
   └─ Dependencies
      ├─ @azure/msal-browser@npm:^2.22.0 → npm:2.38.3
      ├─ @microsoft/mgt-element@npm:4.1.0 → npm:4.1.0
      └─ @microsoft/microsoft-graph-client@npm:3.0.2 → npm:3.0.2 [9bb35]
➜ yarn info @azure/msal-browser
└─ @azure/msal-browser@npm:3.11.0
   ├─ Version: 3.11.0
   │
   └─ Dependencies
      └─ @azure/msal-common@npm:14.8.0 → npm:14.8.0

Which results in 2 different msal-browser versions and causes the same TS2740: Type PublicClientApplication is missing the following properties from type PublicClientApplication: activeSilentTokenRequests, trackPageVisibility, acquireTokenSilentAsync, browserCrypto, and 31 more.

My package.json:

"dependencies": {
    "@azure/msal-browser": "^3.11.0",
    "@azure/msal-react": "^2.0.13",
    "@microsoft/mgt-element": "^4.1.0",
    "@microsoft/mgt-msal2-provider": "^4.1.0",
    "@microsoft/mgt-react": "^4.1.0",
    "@microsoft/microsoft-graph-client": "^3.0.7",

relevant code:

const azureConfig = {
  auth: {
    clientId: '<my_client_id>',
    authority: 'https://login.microsoftonline.com/<my_client_id>/',
    redirectUri: window.location.origin,
  },
}

const pca = new PublicClientApplication(azureConfig)
await pca.initialize()
MGT_Providers.globalProvider = new MGT_Msal2Provider({ publicClientApplication: pca })
//                                                     ^^^^^^^^^^^^^^^^^^^^^^^^error

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(
  <MsalProvider instance={pca}>
    <DevSupport ComponentPreviews={ComponentPreviews} useInitialHook={useInitial}>
      <App />
    </DevSupport>
  </MsalProvider>,
)

export { pca }
grosch-intl commented 6 months ago

@IMBeniamin Yes, these libraries are incredibly painful to work with, and cause issues every time I want to upgrade something. I tried going to version 4 like you and and it didn't work at all, so I went back, but essentially what you have to do is add this to your package.json:

  "resolutions": {
    "@azure/msal-angular": "^3.0.10",
    "@azure/msal-browser": "^3.7.0",
    "@microsoft/mgt-msal2-provider": "^3.1.3",
  },
  "overrides": {
    "@azure/msal-angular": "^3.0.10",
    "@azure/msal-browser": "^3.7.0",
    "@microsoft/mgt-msal2-provider": "^3.1.3",
  }

That way, whether someone uses yarn or npm, it'll force those versions in the other packages that try to reference them and you won't get the errors.

IMBeniamin commented 6 months ago

@IMBeniamin Yes, these libraries are incredibly painful to work with, and cause issues every time I want to upgrade something. I tried going to version 4 like you and and it didn't work at all, so I went back, but essentially what you have to do is add this to your package.json:

  "resolutions": {
    "@azure/msal-angular": "^3.0.10",
    "@azure/msal-browser": "^3.7.0",
    "@microsoft/mgt-msal2-provider": "^3.1.3",
  },
  "overrides": {
    "@azure/msal-angular": "^3.0.10",
    "@azure/msal-browser": "^3.7.0",
    "@microsoft/mgt-msal2-provider": "^3.1.3",
  }

That way, whether someone uses yarn or npm, it'll force those versions in the other packages that try to reference them and you won't get the errors.

Thank you for the tips, I managed to get it working by also overriding the mgt-element version, it indeed is finicky

Final overrides:

"resolutions": {
    "@azure/msal-react": "^2.0.14",
    "@azure/msal-browser": "^3.7.0",
    "@microsoft/mgt-msal2-provider": "^3.1.3",
    "@microsoft/mgt-element": "^4.2.1"
  },
  "overrides": {
    "@azure/msal-react": "^2.0.14",
    "@azure/msal-browser": "^3.7.0",
    "@microsoft/mgt-msal2-provider": "^3.1.3",
    "@microsoft/mgt-element": "^4.2.1"
  },