Teams sso spa
Skill ericsche/CodingSkills/plugins/codingskills/skills/teams-sso-spa
Custom agent skills for GitHub Copilot & Claude Code, from Microsoft-ecosystem dev experience (Azure, .NET, M365, Graph).
npx -y skills add ericsche/CodingSkills --skill teams-sso-spaAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
2 things to look at
- 20 days oldThe repository was created 20 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
- 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
Build a Microsoft Teams app with a personal tab as a Blazor WebAssembly SPA authenticated via Teams SSO (silent Entra token, no redirect), hosted on Azure Static Web Apps and calling an Azure Functions API. Use when creating or debugging a Teams tab, Teams SSO, "refused to connect" in the new Teams, getAuthToken "App resource ... do not match", missing roles/403, iframe/CSP framing, or linking a private Functions backend to a SWA. See reference.md for the full guide.
The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.
SKILL.md
5.2 KB, ~1.2k tokens by cl100k_base, as published. Nobody here has run it
Teams tab (Blazor WASM SPA) with Teams SSO
Field-tested guide for shipping a Microsoft Teams personal tab as a Blazor WebAssembly SPA on a separate Static Web App (SWA), authenticating the user with Teams SSO (a silent Entra token passed as a Bearer token to an Azure Functions API). For exhaustive detail, error tables, and code, read reference.md.
When to use this skill
Use it when you are building or troubleshooting any of:
- A Teams personal tab rendered as a SPA (Blazor WASM) inside the Teams iframe.
- Teams SSO /
getAuthToken, app registration for SSO, token validation in the API. - Framing errors ("refused to connect"), CSP
frame-ancestors, iframe login issues. - Linking a (private) Azure Functions backend to a Static Web App.
Core architecture decisions
- Blazor WASM (SPA) on a dedicated SWA. Static content is SWA-hostable. TeamsFx Blazor Server samples do not transpose to a SWA.
- Auth = MSAL + Teams SSO → Bearer token, validated in the API. Do NOT use SWA Easy Auth for a Teams tab — Easy Auth relies on session cookies and a redirect login, which is incompatible with the Teams iframe (login pages refuse to be framed). Teams SSO returns an Entra token directly: no cookie, no redirect.
- Authorization = Entra app role in the JWT (
rolesclaim), checked in API code. - Networking: if the backend is private, use a dedicated Functions app
integrated into the same VNet and linked to the admin SWA (call
/api/*same-origin through the SWA).
Highest-value pitfalls (the ones that cost the most time)
- CSP
frame-ancestorsmust include*.cloud.microsoft. The new Teams, Outlook, and M365 web migrate to*.cloud.microsoft; without it the tab shows "refused to connect" even though the URL returns 200 directly. Also do not send a blockingX-Frame-Options. - No redirect-based auth in the iframe. Remove any gating that redirects to
the IdP (
AuthorizeRouteView+RedirectToLogin). Attempt silent SSO; show a sign-in button only outside Teams. - teams-js
@@trap.index.htmlis a static file, not a.razor, so@@stays literal and breaks the unpkg URL — the script never loads,window.microsoftTeamsisundefined, the app thinks it is outside Teams and never attempts SSO. Use a single@, and prefer the official CDN (res.cdn.office.net/teams-js/...);dist/MicrosoftTeams.min.json unpkg 404s. - App ID URI must include the host domain:
api://{full-domain}/{appId}.api://{appId}alone makesgetAuthTokenfail with "App resource defined in manifest and iframe origin do not match". Keep it in the manifestresourceand invalidDomains. - Token audience is the appId GUID (v2 token), not the App ID URI. The API must expect the GUID as the audience.
rolesclaim requires a security or M365 group — a distribution list does NOT emit the claim, so the token has noroles→ 403. Assign the app role to a security group (or usegroupMembershipClaims=ApplicationGroup, or an email/oid allowlist).- The manifest does not auto-update. SWA code redeploys itself, but any
manifest change (e.g.
resource) requires re-uploading the package: bumpversion, remove and re-add the app (clear the Teams cache).
End-to-end workflow
- Infra: dedicated Standard SWA (+ deploy token as a GitHub secret). If the backend is private, create a dedicated VNet-integrated Functions app, replicate app settings and managed-identity roles, and link it as the SWA backend.
- Entra app registration: App ID URI
api://{swa-domain}/{appId}; expose scopeaccess_as_user;requestedAccessTokenVersion = 2; pre-authorize the Teams/Office clients; grant Graph admin consent; add SPA redirect/authentication/login-callback. - SPA: load teams-js from the official CDN (single
@); set CSPframe-ancestorsincl.*.cloud.microsoft, noX-Frame-Options; callapp.initialize()beforegetAuthToken(); attach the token via aDelegatingHandler(Teams SSO first, MSAL fallback only outside Teams). - API: validate audience = appId GUID; authorize on multiple signals
(
roles,groups, allowlist). - Manifest:
resource= domain-form App ID URI;validDomains= SWA domain; nopackageName;developer.name≤ 32. Bumpversionand re-upload on any manifest change.
Reference
- reference.md — full guide: architecture, framing/CSP, teams-js loading, Entra registration, API token validation, Teams manifest lifecycle, networking to a private API, Fluent UI theming, an end-to-end checklist, and a symptom → cause → fix table.
Gives 0 of the 12 instructions most auth identity skills give in ~1.2k tokens
Counted across 409 of the 410 authors here whose files we hold, read 2026-08-06
- hash passwords with bcrypt or argon2in 53 of 409, across 43 files
- use parameterized queriesin 47 of 409, across 39 files
- load SECRET_KEY from environment variablesin 23 of 409, across 14 files
- validate all input server-sidein 19 of 409, across 11 files
- refresh access tokens before expiryin 17 of 409, across 9 files
- store tokens in httponly cookiesin 17 of 409, across 16 files
- store refresh tokens securelyin 16 of 409, across 6 files
- validate webhook signatures before processingin 15 of 409, across 5 files
- sanitize user inputsin 15 of 409, across 9 files
- implement rate limiting on auth endpointsin 14 of 409, across 9 files
- encrypt sensitive data at restin 13 of 409, across 10 files
- validate uploaded file extensions and sizesin 12 of 409, across 5 files
Said here and by no other author read
- host the blazor app on a dedicated swa
- use teams sso for silent authentication
- check entra app roles for authorization
- include cloud.microsoft in frame-ancestors
- initialize teams-js before calling getauthtoken
- set the app id uri to include the host domain
Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.