🐞 TTK Errors when building Tab projects - dupe Entra ID app for every new project

[andrewconnell]

Describe the bug
The first run experience creating a new project using the Tab > React with Fluent UI (TypeScript) option fails every time the first time I run it.

The problem is the teamaApp/create task fails to create an Entra ID app because one already exists with the same ID. But... it's the first time I'm creating the app so it shouldn't. Easy to fix: clear out the values set in the ./env/.env.local and retry... this time it works.

Click to view errors ❌ in the terminal window

[2024-09-27T10:57:38.558Z] [Info] - Current VS Code locale is: en-us
[2024-09-27T10:57:39.146Z] [Info] - Teams Toolkit extension is now active!
[2024-09-27T10:57:44.132Z] [Info] - Running 'Validate prerequisites' Visual Studio Code task.

(Total: 3 Steps) Teams Toolkit is checking the required prerequisites.

(1/3) Checking Node.js ...
(2/3) Checking Microsoft 365 Account ...
(3/3) Checking ports occupancy ...

Summary:

(√) Done: Node.js version (v18.20.1) is installed
(√) Done: Microsoft 365 Account ([email protected]) is logged in and custom app upload permission is enabled
(√) Done: Ports (53000, 7071, 9229) are not occupied

Visit https://aka.ms/teamsfx-tasks/check-prerequisites to learn more about 'Validate prerequisites' task.

[2024-09-27T10:57:49.203Z] [Info] - Finished 'Validate prerequisites' Visual Studio Code task in 5.45 seconds.
[2024-09-27T10:57:49.242Z] [Info] - Executing provision

Lifecycle stage: provision(9 step(s) in total). The following actions will be executed:
(1/9) Action aadApp/create: Create a Microsoft Entra app to authenticate users
(2/9) Action teamsApp/create: create a Teams app.
(3/9) Action script
(4/9) Action aadApp/update: Apply Microsoft Entra app manifest to an existing app
(5/9) Action teamsApp/validateManifest: validate a Teams app.
(6/9) Action teamsApp/zipAppPackage: build a Teams app package.
(7/9) Action teamsApp/validateAppPackage: validate a Teams app.
(8/9) Action teamsApp/update: update a Teams app.
(9/9) Action teamsApp/extendToM365: acquire an Microsoft 365 title with the app package

[2024-09-27T10:57:49.243Z] [Info] - Executing lifecycle provision
[2024-09-27T10:57:49.244Z] [Info] - Executing action aadApp/create
[2024-09-27T10:57:49.244Z] [Info] - Environment variable AAD_APP_CLIENT_ID does not exist, creating a new Microsoft Entra app...
[2024-09-27T10:57:50.098Z] [Info] - Created Microsoft Entra application with object id 2bfd8c69-cd1a-43d3-b7b8-fde9f3714abb
[2024-09-27T10:57:50.098Z] [Info] - Environment variable SECRET_AAD_APP_CLIENT_SECRET does not exist, generating client secret for Microsoft Entra app...
[2024-09-27T10:57:50.264Z] [Info] - Generated client secret for Microsoft Entra application with object id 2bfd8c69-cd1a-43d3-b7b8-fde9f3714abb
[2024-09-27T10:57:50.264Z] [Info] - Action aadApp/create executed successfully
[2024-09-27T10:58:00.777Z] [Error] - Failed to Execute lifecycle provision due to failed action: teamsApp/create. TeamsAppCreateConflict:Unable to create Teams app, which may be because your app ID is conflicting with another app's ID in your tenant. Click 'Get Help' to resolve this issue.. Env output: {"AAD_APP_CLIENT_ID":"49c2d9a8-a175-4f8f-bf63-b053b7238d8e","AAD_APP_OBJECT_ID":"2bfd8c69-cd1a-43d3-b7b8-fde9f3714abb","AAD_APP_TENANT_ID":"57542ea4-XXXX-XXXX-XXXX-4693cdaffcf0","AAD_APP_OAUTH_AUTHORITY":"https://login.microsoftonline.com/57542ea4-XXXX-XXXX-XXXX-4693cdaffcf0","AAD_APP_OAUTH_AUTHORITY_HOST":"https://login.microsoftonline.com","SECRET_AAD_APP_CLIENT_SECRET":"******"}
[2024-09-27T10:58:00.783Z] [Info] - Execution summary:

Summary:
(×) Error: Lifecycle stage provision failed.
  (√) Done: aadApp/create was executed successfully.
    (√) Done: Created Microsoft Entra application with object id 2bfd8c69-cd1a-43d3-b7b8-fde9f3714abb
    (√) Done: Generated client secret for Microsoft Entra application with object id 2bfd8c69-cd1a-43d3-b7b8-fde9f3714abb
  (×) Error: teamsApp/create failed.
    (×) Error: Unable to create Teams app, which may be because your app ID is conflicting with another app's ID in your tenant. Click 'Get Help' to resolve this issue.
  (!) Warning: script was not executed.
  (!) Warning: aadApp/update was not executed.
  (!) Warning: teamsApp/validateManifest was not executed.
  (!) Warning: teamsApp/zipAppPackage was not executed.
  (!) Warning: teamsApp/validateAppPackage was not executed.
  (!) Warning: teamsApp/update was not executed.
  (!) Warning: teamsApp/extendToM365 was not executed.

[2024-09-27T10:58:00.856Z] [Error] - code:AppStudioPlugin.TeamsAppCreateConflict, message: Unable to create Teams app, which may be because your app ID is conflicting with another app's ID in your tenant. Click 'Get Help' to resolve this issue.
 Help link: https://aka.ms/teamsfx-switch-account-or-subscription-help

To Reproduce
Steps to reproduce the behavior:

1. Create a new project using the Tab > React w/ Fluent UI > TypeScript template
2. Start debugging using the Run & Debug > PLAY
3. Watch for the terminal window to launch & fail with errors listed above

Expected behavior
Initial build works without errors & launches the browser to install the tab.

Screenshots
If applicable, add screenshots to help explain your problem.

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

• OS: MacOS v14 & v15
• Version: v5.8.1

CLI Information (please complete the following information):

• OS: MacOS v14 & v15
• Version: v3.0.2

Additional context
On thing that's strange... when the error happens, SOME of the values get set in the ./env/.env.local file, but not all... after the error, here's what I see:

# Built-in environment variables
TEAMSFX_ENV=local
APP_NAME_SUFFIX=local

# Generated during provision, you can also add your own variables. If you're adding a secret value, add SECRET_ prefix to the name so Teams Toolkit can handle them properly
TAB_DOMAIN=
TAB_ENDPOINT=
TEAMS_APP_ID=
TEAMS_APP_TENANT_ID=
AAD_APP_CLIENT_ID=27b70692-4355-47d1-a614-7b9d5bd0d657
AAD_APP_OBJECT_ID=a01083c7-ab1e-4665-919a-0da772778175
AAD_APP_TENANT_ID=57542ea4-xxxx-xxxx-xxxx-4693cdaffcf0
AAD_APP_OAUTH_AUTHORITY=https://login.microsoftonline.com/57542ea4-xxxx-xxxx-xxxx-4693cdaffcf0
AAD_APP_OAUTH_AUTHORITY_HOST=https://login.microsoftonline.com
AAD_APP_ACCESS_AS_USER_PERMISSION_ID=30cb1da3-1145-4d8d-9a6f-c422e59ee0ca
TEAMS_APP_PACKAGE_PATH=
FUNC_NAME=
FUNC_ENDPOINT=

Workaround: remove all those values, save the file, and retry building & deploying (Run & Debug > PLAY).

I thought there was a mistake in the template that had the values initially set as that's the behavior I see, but no... it's empty on new projects.

I confirmed the Entra ID app did NOT exist BEFORE I started debugging the project the first time, but after I see the error, the Entra ID app is present.

[microsoft-github-policy-service]

Thank you for contacting us! Any issue or feedback from you is quite important to us. We will do our best to fully respond to your issue as soon as possible. Sometimes additional investigations may be needed, we will usually get back to you within 2 days by adding comments to this issue. Please stay tuned.