Getting message "This app may have issues in the web version of teams" when adding the app

[nbelyh]

Started getting the issue when adding the app in a WEB browser:
The app is a few years old (not a new one).

If proceeding, there is an issue with login, this one (it launches the prompt in a completely new window, and getting teams token fails).

"Invalid authResponse received from msal for resource api ...."
The application is calling microsoftTeams.authentication.getAuthToken() at this point to get the teams token.

Any ideas what to look for? What does the first message mean, what are the changes?
If I switch to the "classic" (old) teams in the web browser, all works as expected.
Also in the desktop teams client it works like always.

[Prasad-MSFT]

@nbelyh - The error message indicates that there is an issue with the authentication process using MSAL (Microsoft Authentication Library) in your app. Please ensure that your authentication flow is compatible with both the desktop and web versions of Teams. and check if there have been any changes in the authentication process over the years that may affect the functionality of your app. Check if there are any outdated dependencies or libraries related to authentication that need to be updated to ensure compatibility with the latest Teams SDK and authentication mechanisms.

Also, could you please provide the app package if possible so that we can repro this at our end as well?

[nbelyh]

@Prasad-MSFT Thank you for the repsonse.
The application is VisPlan, just try to install it from the Microsoft Store. You need to use NEW teams and WEB browser (in desktop client or "old" version of teams it works properly)

I will try to update to the latest version of all libraries, currently using teamsjs 1.12.1 (i.e. v.1.x) - could this cause the issue? Do you have any thought what libraries should be updated? The autnetication fails when calling teamsjs, i.e. microsoftTeams.authentication.getAuthToken. The app cannot get teams token. The applications does not seem to use MSAL library explicitly at this point, i.e. the error above is returned by teamsjs call (getAuthToken)

Could you please give some insights what does the first message mean? I mean, "This application may have issues with web version of teams", what are the conditions for it to show up? (it is shown only in the "new" teams). The screen with the heap of exclamation marks that is. This is probably not directly related to authentication (but may be), it just started showing that screen recenlty when installing the app in web-version.

just in case the below is manifest (with placeholders)

{
  "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.16/MicrosoftTeams.schema.json",
  "manifestVersion": "1.16",
  "id": "{{APPLICATION_ID}}",
  "version": "{{VERSION}}",
  "packageName": "{{PACKAGE_NAME}}",
  "developer": {
    "name": "VisPlan",
    "websiteUrl": "https://visplan.com",
    "privacyUrl": "https://visplan.com/support/privacy-policy-for-visplan",
    "termsOfUseUrl": "https://visplan.com/support/terms-of-service",
    "mpnId": "...."
  },
  "name": {
    "short": "{{APPLICATION_NAME}}",
    "full": "{{APPLICATION_NAME}}"
  },
  "description": {
    "short": ".......",
    "full": "......"
  },
  "icons": {
    "outline": "{{ICON_OUTLINE}}",
    "color": "{{ICON_COLOR}}"
  },
  "accentColor": "#f0f0f0",
  "configurableTabs": [
    {
      "configurationUrl": "https://{{HOSTNAME}}/tab/config?name={loginHint}&tenant={tid}&group={groupId}&theme={theme}",
      "canUpdateConfiguration": true,
      "scopes": [
        "team"
      ]
    }
  ],
  "staticTabs": [
    {
      "entityId": "6bd761c2-658f-41d9-97a8-8ce92e126877",
      "scopes": [
        "personal"
      ],
      "context": [
        "personalTab"
      ],
      "name": "VisPlan",
      "contentUrl": "https://{{HOSTNAME}}/tab/personal?name={loginHint}&tenant={tid}&theme={theme}"
    }
  ],
  "permissions": [
    "identity",
    "messageTeamMembers"
  ],
  "validDomains": [
    "{{HOSTNAME}}"
  ],
  "defaultInstallScope": "team",
  "showLoadingIndicator": false,
  "publisherDocsUrl": "https://visplan.com/knowledge-base",
  "webApplicationInfo": {
    "id": "{{APPLICATION_ID}}",
    "resource": "api://{{HOSTNAME}}/{{APPLICATION_ID}}"
  },
  "localizationInfo": {
    "defaultLanguageTag": "en-us",
    "additionalLanguages": [
      {
        "languageTag": "sv-se",
        "file": "sv-se.json"
      }]
  }
}

[Prasad-MSFT]

Hi @nbelyh - We tried to repro this using VisPlan application. The first time when we tried to add the app in any team, it showed us the same error as you are encountering in New Teams Web browser. However, the next time when we tried to do the same it asked us to login and give consent using credentials and it worked successfully.

[nbelyh]

@Prasad-MSFT
Yes, exactly this is the problemn. I.e. this happens only FIRST TIME, when user has not consented yet (very first consent prompt is the problem). The new teams web client starts somehow switching windows (does some unexpected redirect??), and that results in the error in the issue description.

I.e. in principle "eventually" it works; it is the user interface in the new web client that appears to be "broken" somehow (or maybe not compatible with the old app), which may be indicated by the first screen with exclamation marks?

For new users this is really frustrating experience, and we would definitely like to have that fixed somehow.

[Prasad-MSFT]

@nbelyh - I agree with that. For new users that will not be good experience. We have raised a bug for the same. We will inform you once we get any further update from engineering team.

Thanks!

[rahul-chanana]

We are facing the same issue with our app.

microsoftTeams.authentication.getAuthToken() seems to be broken when we switch to new teams (v2) in web browser. It works fine in deskop clients though.

Additional info: as a result of above mentioned bug ("Invalid authResponse received from msal for resource api") the consent window is not opening up as a pop up but as a redirect in same browser tab as https://teams.microsoft.com/v2

Please provide an update about status of this bug.

[rahul-chanana]

Is there any update on the above mentioned problem "Invalid authResponse received from msal for resource::api:redacted" when using getAuthToken method of the library? Please note that due to this error consent for single-sign-on doesn't open as pop up in the browser version of Teams V2 but as a redirect in tab.

All works fine in desktop client though.

[jke-r]

@Prasad-MSFT : We have the same problem. This happens with our well established app as well with our newly developed app.
Everything works fine in Desktop app. But in the browser we get the same screen, everytime(!) the app is loaded. This is a huge problem because it gives our users a very untrustworthy experience.

We have recently updated to teams-js 2.21.0. But it worked stable after the migration for several weeks. We did not change anything else so far.

Interesting thing: This also happens without token retreival. Our latest app (currently in development) does not receive any tokens from teams-js. Only the context information.

Our environment:

• Windows 10, Edge browser
• Manifest version 1.16
• So is no error message in console log while the screen is shown or after.

Update 1: We have updated to teams-js 2.22.0 and cleared the cache of the browser -> No affect. Same behaviour.

Do you have any update on that matter?

[Prasad-MSFT]

Apologies, currently there is no update to share. We will check this with engineering team and will update this thread once we hear from them.
Thanks!