Entraid auth clean

[jjsanchezms]

Purpose

• Adds a new call start / join option: “Authenticate with Entra ID (preview)” enabling users to join ACS calls using Microsoft Entra ID (organizational) credentials without issuing an ACS user/token from the sample server.
• Implements client-side Entra auth via InteractiveBrowserCredential + direct ACS token exchange using AzureCommunicationTokenCredential (resource + Entra federated auth flow).
• Provides graceful fallback config retrieval (/entraConfig) when build‑time environment variables are not supplied.
• Auto-joins Entra-authenticated group calls when a shared link contains ?groupId=...&entra=1 (auto triggers auth on load).
• Adds sign‑out / logout helper and status component (EntraAuthStatus) showing auth state and retry UX.
• Non-breaking: existing ACS / Teams / Rooms / PSTN flows unaffected.

Pull Request Type

[ ] Bugfix
[x] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Documentation content changes
[ ] Other... Please describe:

Upstream sample reference

Links to PR(s) that made the original change in the upstream sample:

• N/A (new functionality added in this repo first)

How to Test

• Get the code

git clone https://github.com/Azure-Samples/communication-services-web-calling-hero.git
cd communication-services-web-calling-hero
git checkout entraid-auth-clean
npm run setup

(Windows PowerShell example – set build-time env vars before start; or skip and rely on server fallback.)

# Required (client build-time) variables for direct config (option 1)
$env:REACT_APP_ENTRA_CLIENT_ID="<your-app-client-id>"
$env:REACT_APP_ENTRA_TENANT_ID="<tenant-id-or-organizations>"   # optional (defaults to 'organizations')
$env:REACT_APP_ACS_RESOURCE_ENDPOINT="https://<your-acs-resource>.communication.azure.com"
$env:REACT_APP_ENTRA_REDIRECT_URI="http://localhost:3000/entra-auth-callback"

npm start

Alternative (option 2 – fallback): Put these in Server/appsettings.json (add keys if missing):

"EntraClientId": "<your-app-client-id>",
"EntraTenantId": "<tenant-id-or-organizations>",
"EntraRedirectUri": "http://localhost:3000/entra-auth-callback"

Then just run:

npm start

Manual test steps:

1. Open http://localhost:3000
2. Select "🔐 Authenticate with Entra ID (preview)"
3. Click "Sign in" → complete Entra login → status shows signed-in persona
4. Click "Next" to enter call; URL updates with ?groupId=...&entra=1
5. Copy that URL into a new tab / browser profile → auto Entra auth triggers (no manual click) and joins call
6. Click "Sign out" in home screen auth status to validate logout (new tab to MS logout endpoint)
7. (Fallback test) Start without REACT_APP_* vars → ensure call to /entraConfig succeeds (Network tab) and flow still works

What to Check

Verify that the following are valid

• “🔐 Authenticate with Entra ID (preview)” option appears on Home screen (when not already in an existing non-Entra join flow).
• Sign-in launches Microsoft login and returns display name shown in persona (or default placeholder if claims missing).
• After Entra sign-in, “Next” is enabled without requiring manual display name input.
• URL for a new Entra-auth call contains both groupId and entra=1; sharing it triggers automatic auth attempt once (no infinite retries).
• Fallback to /entraConfig works when build-time env vars are omitted (observe successful JSON response).
• Sign-out opens logout URL and resets UI state (option selectable again; no lingering credential).
• Other call options (ACS, Rooms, Teams, PSTN) continue to function unchanged.
• No console errors during Entra auth flow (aside from expected optional claim absence warnings, if any).

Other Information

• New dependencies: @azure/identity (client). Uses InteractiveBrowserCredential with scope https://communication.azure.com/clients/VoIP and Graph token parsing for user display info (JWT claim decode only—no Graph REST call).
• Synthetic communicationUserId is generated when Entra path doesn’t supply an ACS user id (format: entra-<oid/email>); sufficient for UI adapter identity consistency.
• Auto-auth guarded by a ref to prevent multiple attempts (autoEntraTriedRef).
• Route /entraConfig enables deployments where front-end is built once and config is injected at runtime.
• No breaking API changes; optional environment variables and appsettings keys extend configuration surface.
• Limitations (current): Flow targets group calling scenarios; no separate per-user ACS token issuance for Entra path; display name derived from token claims only.
• Future enhancement candidates: Persist Entra user mapping server-side, add explicit documentation section, add automated tests for fallback route.