Vue3 Sample App does not work

[manud99]

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

3.0.2

Wrapper Library

Not Applicable

Wrapper Library Version

None

Public or Confidential Client?

Public

Description

The Vue3 Sample App does not work. I downloaded the vue3-sample-app folder, installed all dependencies with npm, configured the authentication details and started the Vite dev server (npm start). Then I opened the app in my browser and tried to sign in. Unfortunately, this did not work neither with the popup nor with the redirect. Instead I got this error in the console:

Uncaught (in promise) BrowserAuthError: uninitialized_public_client_application: You must call and await the initialize function before attempting to call any other MSAL API. For more please visit aka.ms/msaljs/browser-errors.
    at BrowserAuthError.createUninitializedPublicClientApplication (BrowserAuthError.ts:676:16)
    at BrowserUtils.blockAPICallsBeforeInitialize (BrowserUtils.ts:154:36)
    at Proxy.preflightBrowserEnvironmentCheck (StandardController.ts:1330:22)
    at Proxy.acquireTokenPopup (StandardController.ts:576:18)
    at Proxy.loginPopup (StandardController.ts:1815:21)
    at Proxy.loginPopup (PublicClientApplication.ts:257:32)
    at loginPopup (SignInButton.vue:20:12)
    at callWithErrorHandling (runtime-core.esm-bundler.js:158:18)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:166:17)
    at emit (runtime-core.esm-bundler.js:664:5)

In the code I could not find an occurrence of any call to the initialize function.

Error Message

No response

Msal Logs

No response

MSAL Configuration

export const msalConfig = {
  auth: {
    clientId: '<my_clientId>',
    authority: 'https://login.microsoftonline.com/consumers',
    redirectUri: '/', // Must be registered as a SPA redirectURI on your app registration
    postLogoutRedirectUri: '/' // Must be registered as a SPA redirectURI on your app registration
  },
  cache: {
    cacheLocation: 'localStorage'
  },
  system: {
      loggerOptions: {
          loggerCallback: (level: LogLevel, message: string, containsPii: boolean) => {
              if (containsPii) {
                  return;
              }
              switch (level) {
                  case LogLevel.Error:
                      console.error(message);
                      return;
                  case LogLevel.Info:
                      console.info(message);
                      return;
                  case LogLevel.Verbose:
                      console.debug(message);
                      return;
                  case LogLevel.Warning:
                      console.warn(message);
                      return;
                  default:
                      return;
              }
          },
          logLevel: LogLevel.Verbose
      }
  }
};

Relevant Code Snippets

See here: https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-browser-samples/vue3-sample-app

Reproduction Steps

1. Install the app
2. Configure the auth details
3. Run the Vite dev server
4. Open the app in the browser
5. Try to sign in

Expected Behavior

I expect to see a login screen. Either in the popup or with the redirect.

Identity Provider

Azure AD / MSA

Browsers Affected (Select all that apply)

Chrome

Regression

No response

Source

External (Customer)

[lalimasharda]

Hey @manud99 , thanks for bring this to our attention. We are currently working on updating all our samples. Until then you can add the initialize step as mentioned in this migration guide.

[microsoft-github-policy-service]

@manud99 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.