Unable to Authorize Azure Functions in Teams Toolkit App Debugged on Edge Browser

[lovey25]

Describe the bug When creating a new app in VS Code Teams Toolkit with the Fluent UI React template, the app fails to respond upon clicking the "Authorize and call Azure Functions" button during local debug on the Edge browser. The console shows an error indicating failure to initialize the Teams SDK.

To Reproduce Steps to reproduce the behavior:

1. Open VS Code Teams Toolkit and create a new app.
2. Choose the Fluent UI template with React and JavaScript.
3. Start local debugging with "Debug in Teams (Edge)".
4. Once the Edge window opens, log in to Teams.
5. Manually locate and open the newly installed app in Teams.
6. Click on "Authorize and call Azure Functions" in the app.
7. Observe no response in the app, and the following error appears in the console: [Tue, 05 Nov 2024 21:44:42 GMT] : @microsoft/teamsfx : Error - Initialize teams sdk failed due to not running inside Teams environment

Expected behavior The app should authorize and call Azure Functions successfully, with no errors in the console, and perform as expected without issues.

Screenshots

VS Code Extension Information (please complete the following information):

• OS: macOS
• Version 15.1

CLI Information (please complete the following information):

• OS: macOS
• Version 15.1

[hund030]

@lovey25 I can't reproduce your issue. The function app works perfectly in my side. The issue looks like teams-js SDK failed to initialize, which usually happens when user open the app outside teams. As long as you open your app in Teams, the error is not expected.

Could you provide the SDK version in your package-lock.json? The latest teams-js is 2.30.0 and the @microsoft/teamsfx is 2.3.3. You may want to update these packages and retry if you didn't use the latest.

[lovey25]

Hello,

Today, I started a new sample project in Teams Toolkit and observed the same issue as before. However, when I ran the same app in a Windows environment, it worked without any problems. The issue still persists on my Mac environment, which is the same setup I used when initially reporting the bug.

Additionally, The same project was working fine between November 1st and 3rd without any issues. I haven’t made a single code modification since then, but now it consistently fails on my Mac. (Same on new project.) I also removed all the previously problematic apps from Entra and tried again, but the issue persists. Do you have any insight as to why this might be happening?

Moreover, when I start a sample project in Teams Toolkit, it sets the library versions lower than those you mentioned. Could you guide me on the best way to update the libraries to the latest versions?

Thank you for your support.

Here is the information you requested:

• Teams Toolkit version: v5.10.0
• package.json:

{ "name": "test8", "version": "0.1.0", "engines": { "node": "18 || 20" }, "private": true, "dependencies": { "@fluentui/react-components": "^9.18.0", "@microsoft/teams-js": "^2.22.0", "@microsoft/teamsfx": "^2.2.0", "@microsoft/teamsfx-react": "^3.0.0", "axios": "^0.21.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.8.0", "react-scripts": "^5.0.1" }, "devDependencies": { "@types/node": "^18.0.0", "@types/react": "^18.0.0", "@types/react-dom": "^18.0.0", "@types/react-router-dom": "^5.3.3", "concurrently": "^8.2.2", "env-cmd": "^10.1.0" }, "scripts": { "dev:teamsfx": "concurrently \"npm run dev-tab:teamsfx\" \"npm run dev-api:teamsfx\"", "dev-tab:teamsfx": "env-cmd --silent -f .localConfigs npm run start", "dev-api:teamsfx": "cd api && npm run dev:teamsfx", "start": "react-scripts start", "build": "react-scripts build", "test": "echo \"Error: no test specified\" && exit 1", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "homepage": "." }

[hund030]

Your teams-js package are the latest. NPM will match the latest 2.x.x as your package.json specifies ^2.22.0. Seems your issue is caused by teams-js in mac, Iet's track it in the upstream issue: https://github.com/OfficeDev/microsoft-teams-library-js/issues/1181

[lovey25]

Thank you for analyzing the error and providing feedback. However, the upstream issue you mentioned seems to be related to enhancing logging during teams-js initialization to better track errors, which doesn’t appear directly relevant to this particular issue.

Today, I came across some additional information that might be helpful, and I’d appreciate it if you could review it. The tenant I’m testing on is using an MDCA (Microsoft Defender for Cloud Apps) session control policy. Both Mac devices and PCs are subject to session control. Although there were no changes to the code, intermittent errors have been occurring. As a precaution, I decided to disable the session control policy, and since doing so, the issue discussed in this thread has not reproduced.

As an additional recommendation for your review, it might be worth testing under conditions similar to the original bug report environment but with an additional setup: an MDCA session control that blocks downloads on devices that are not hybrid Azure AD-joined. This may help to reproduce the issue.

[MuyangAmigo]

Thanks @lovey25 for your infirmation. Are yiu suggesting us to try reproduce the issue under MDCA session control policy?

[lovey25]

Of course. I’ll share the MDCA conditions under which the issue is reproduced.

In Microsoft Defender for Cloud Apps, I configured the following policy under Policies > Policy Management > Conditional Access. The action for the policy is set to "Block." The purpose of this configuration is to block downloads when accessing under conditions that are not Intune compliant. Currently, only the devices using Teams Toolkit are set as an exception.

Let me know if you need further details.

[MuyangAmigo]

@lovey25 Thank you for your test case, we will see if this can be reproduced and analyze further. @hund030 would you mind following up?