agentsclimarketplace

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).

Install
npx -y skills add ericsche/CodingSkills --skill teams-sso-spa

Assembled 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 (roles claim), 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)

  1. CSP frame-ancestors must 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 blocking X-Frame-Options.
  2. 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.
  3. teams-js @@ trap. index.html is a static file, not a .razor, so @@ stays literal and breaks the unpkg URL — the script never loads, window.microsoftTeams is undefined, 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.js on unpkg 404s.
  4. App ID URI must include the host domain: api://{full-domain}/{appId}. api://{appId} alone makes getAuthToken fail with "App resource defined in manifest and iframe origin do not match". Keep it in the manifest resource and in validDomains.
  5. Token audience is the appId GUID (v2 token), not the App ID URI. The API must expect the GUID as the audience.
  6. roles claim requires a security or M365 group — a distribution list does NOT emit the claim, so the token has no roles403. Assign the app role to a security group (or use groupMembershipClaims=ApplicationGroup, or an email/oid allowlist).
  7. The manifest does not auto-update. SWA code redeploys itself, but any manifest change (e.g. resource) requires re-uploading the package: bump version, remove and re-add the app (clear the Teams cache).

End-to-end workflow

  1. 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.
  2. Entra app registration: App ID URI api://{swa-domain}/{appId}; expose scope access_as_user; requestedAccessTokenVersion = 2; pre-authorize the Teams/Office clients; grant Graph admin consent; add SPA redirect /authentication/login-callback.
  3. SPA: load teams-js from the official CDN (single @); set CSP frame-ancestors incl. *.cloud.microsoft, no X-Frame-Options; call app.initialize() before getAuthToken(); attach the token via a DelegatingHandler (Teams SSO first, MSAL fallback only outside Teams).
  4. API: validate audience = appId GUID; authorize on multiple signals (roles, groups, allowlist).
  5. Manifest: resource = domain-form App ID URI; validDomains = SWA domain; no packageName; developer.name ≤ 32. Bump version and 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.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.