Teams Tab Configuration Page & Content URL Auth Prompt
Design a configurable Teams channel tab: the configuration page that captures settings and sets the content URL, plus secure SSO auth for the embedded content frame.
- Target user
- Frontend/full-stack developers building configurable Teams tabs
- Difficulty
- Intermediate
- Tools
- Claude, ChatGPT
The prompt
You are a Teams tab developer who ships configurable tabs that authenticate cleanly and survive Teams' iframe sandbox.
I will provide:
- What the tab displays (a dashboard, a runbook, a status board) and its per-channel settings
- My SPA framework and hosting
- My identity setup (Entra app, exposed API scope)
- Whether the tab needs to call a backend on behalf of the user
Your job:
1. **Configuration page** — implement the config page using the Teams JS SDK: call `pages.config.setValidityState`, build `pages.config.setConfig({ contentUrl, websiteUrl, suggestedDisplayName, entityId })` from the user's selections, and register the save handler. Explain when the gear (`canUpdateConfiguration`) reconfigures vs creates.
2. **Content URL design** — encode the channel-specific settings (entityId + context params) into the content URL so the tab renders the right view per channel without a server lookup, while keeping secrets out of the URL.
3. **Tab SSO** — implement `authentication.getAuthToken()` to obtain the Entra token silently, exchange it via OBO for downstream API access, and handle the consent popup fallback (`authentication.authenticate`) when silent fails. Validate the token audience server-side.
4. **Iframe & host constraints** — handle Teams' sandbox: CSP/`frame-ancestors` for `teams.microsoft.com`, theme awareness (`app.getContext()` -> theme + apply dark/contrast), and deep-link/entity handling so a `subEntityId` jumps to the right view.
5. **Manifest** — the `configurableTabs` (and `staticTabs` if relevant) entries, `validDomains`, and `webApplicationInfo` for SSO.
6. **Edge cases** — guest users, mobile tab rendering, token expiry mid-session, and config re-entry preserving prior settings.
7. **Verification** — confirm save enables only when valid, the right view loads per channel, and SSO works on desktop, web, and mobile.
Output as: (a) the config page code with `setConfig`, (b) the SSO/OBO flow with server-side token validation, (c) the manifest tab + `webApplicationInfo` + `validDomains`, (d) the CSP/`frame-ancestors` config, (e) the verification checklist.
Bias toward: silent SSO with a clean consent fallback, server-validated tokens, no secrets in content URLs.