@khester/create-dynamics-app 2.9.0 → 3.0.0

package/templates/power-pages-island/README.md

@@ -0,0 +1,81 @@
+# {{projectName}} — Power Pages island
+
+A React **island** you mount into an **existing traditional (Liquid) Power Pages portal** — React
+hydrates only the nodes you tag in Liquid, leaving the rest of the server-rendered page untouched.
+
+This is the delta Microsoft's Power Pages tooling doesn't cover: the `pac`/plugin **code-site**
+scaffolder builds a whole-page React SPA that *is* the site. It cannot drop a React widget into an
+existing Liquid portal. This template does exactly that.
+
+## Data access — host-portable seam
+
+The widget (`src/Component.tsx`) is written against an injected **`IApiService`** (the create-app
+6-method `dataverse-seam`). In the browser it's given **`PortalSeamService`** from
+[`@dataverse-kit/portal-api-service`](https://www.npmjs.com/package/@dataverse-kit/portal-api-service),
+which talks to the portal Web API (`/_api/`) and handles the anti-forgery token
+(`__RequestVerificationToken`), 403-retry, and idempotency-aware retry for you. On `localhost` it
+falls back to an in-memory `MockApiService`, so it renders with no portal.
+
+Because the widget depends only on the seam, **the same `src/Component.tsx` runs unchanged** as a PCF
+control, a Dynamics custom page, or a web resource (`create-dynamics-app … --artifact host-swap`) — the
+only thing that changes is the host wrapper and the injected service.
+
+| Path | Role |
+|------|------|
+| `src/islands.tsx` | Entry — mounts React into every `[data-dvkit-island]` node (idempotent) |
+| `src/App.tsx` | Picks `MockApiService` (localhost) or `PortalSeamService` (portal); injects it |
+| `src/Component.tsx` | The host-agnostic widget (an accounts `DetailsList`), depends only on `IApiService` |
+| `src/core/services/*` | The data-access seam — `IApiService` + `Xrm`/`Fetch`/`ServiceFactory` injected from `_shared`; `MockApiService` seed is per-project |
+| `src/core/services/portalSeam.assert.ts` | Compile-time drift guard: `PortalSeamService` stays assignable to the seam |
+
+## Build & preview
+
+```bash
+npm install
+npm run dev      # webpack dev server on http://localhost:8080 (renders the island from the mock)
+npm run build    # tsc --noEmit + webpack --mode production → dist/{{projectName}}.js
+```
+
+## Deploy to a traditional portal
+
+1. **Build** → `dist/{{projectName}}.js` (a single, stable-named bundle — no content hash, so the URL
+   is fixed).
+2. **Upload it as a portal Web File** (Power Pages Management app → *Web Files*, or `pac`): set its
+   **Parent Page = Home**, give it a partial URL like `{{projectName}}.js`, set the MIME type to
+   `text/javascript`, and set **Publishing State = Published**. A web file's URL is its parent page's
+   path joined with the partial URL, so parenting to **Home** makes it resolve at the site root:
+   `https://<your-portal>/{{projectName}}.js`. (Parent it elsewhere — e.g. under `/documents` — and the
+   URL becomes `/documents/{{projectName}}.js`, so the root-relative `<script src>` in step 3 won't find
+   it. Either parent to Home, or match the `<script src>` path to the web file's actual URL.)
+3. **Place the island** on any existing page — paste this into a **Web Template** or **Content Snippet**
+   the page renders:
+
+   ```html
+   <div data-dvkit-island="accounts"></div>
+   <script src="/{{projectName}}.js"></script>
+   ```
+
+   Add more `<div data-dvkit-island="…">` nodes to mount the widget in several places; the
+   `data-dvkit-island` value is a hook for routing multiple widgets later.
+
+## Portal requirements (per table you read/write)
+
+The portal Web API is gated per table. For `account` (the sample), configure **Site Settings**:
+
+- `Webapi/account/enabled` = `true`
+- `Webapi/account/fields` = the exact columns you read/write (e.g. `name,telephone1` — list the
+  `_<lookup>_value` read form too), **mandatory**
+- a **Table Permission** for the signed-in user's Web Role (and, for a `@odata.bind`/associate write,
+  **both Append AND AppendTo on both** the source and target permissions)
+
+Notes:
+- **Fluent UI v8** — Fluent v9 is broken on Power Pages portals. This template pins v8.
+- **React 18** — pinned (Fluent v8 peers `<19`).
+- Portals expose **no metadata endpoints** — hard-code any option-set labels at dev time.
+
+## Verification status
+
+This starter is **build-verified** (`tsc` + webpack bundle) and **localhost-mock-verified**
+(`npm run dev`). Live behavior against a real traditional portal (the web-file upload, the Liquid
+snippet, and `PortalSeamService` against live `/_api/`) is the deploy step above — verify it on your
+own portal.

package/templates/power-pages-island/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "{{projectName}}",
+  "version": "1.0.0",
+  "private": true,
+  "description": "{{projectName}} — React island mounted into an existing traditional Power Pages (Liquid) portal (webpack)",
+  "scripts": {
+    "dev": "webpack serve --mode development",
+    "build": "tsc --noEmit && webpack --mode production",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@dataverse-kit/portal-api-service": "^0.2.0",
+    "@fluentui/react": "^8.120.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "html-webpack-plugin": "^5.5.3",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.3.3",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
+  }
+}

package/templates/power-pages-island/public/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{{projectName}} — Power Pages island (dev preview)</title>
+  </head>
+  <body>
+    <!-- On a real portal this node lives in a Liquid web template / content snippet.
+         The bundle mounts React into EVERY [data-dvkit-island] node on the page. -->
+    <div data-dvkit-island="accounts"></div>
+  </body>
+</html>

package/templates/power-pages-island/src/App.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import type { IApiService } from "./core/services/IApiService";
+import { MockApiService } from "./core/services/MockApiService";
+import { PortalSeamService } from "@dataverse-kit/portal-api-service";
+import { Component } from "./Component";
+
+// A Power Pages island is served from the portal origin, so a same-origin `/_api`
+// fetch is authenticated by the portal session cookie + anti-forgery token —
+// PortalSeamService handles both (token fetch/cache, 403-retry, idempotency-aware
+// retry). On localhost (the webpack dev server) fall back to the in-memory mock so
+// it renders with no portal.
+//
+// PortalSeamService implements the create-app 6-method `dataverse-seam`, so it is
+// structurally assignable to IApiService with NO cast — and THIS assignment is the
+// load-bearing compile-time drift guard: if the seam shapes ever diverge, this line
+// fails `tsc`. (See core/services/portalSeam.assert.ts for the explicit fixture.)
+export const App: React.FC<{ island?: string }> = () => {
+  // `island` is the `data-dvkit-island` value — a hook for routing multiple widgets
+  // on a page. The starter renders the accounts widget for any island.
+  const api = React.useMemo<IApiService>(() => {
+    const onLocalhost = /^(localhost|127\.0\.0\.1)$/.test(window.location.hostname);
+    return onLocalhost ? new MockApiService() : new PortalSeamService();
+  }, []);
+  return <Component api={api} />;
+};

package/templates/power-pages-island/src/Component.tsx

@@ -0,0 +1,89 @@
+import * as React from "react";
+import {
+  DetailsList,
+  SelectionMode,
+  MessageBar,
+  MessageBarType,
+  Spinner,
+  Stack,
+  Text,
+  type IColumn,
+} from "@fluentui/react";
+import { initializeIcons } from "@fluentui/react/lib/Icons";
+import type { IApiService } from "./core/services/IApiService";
+
+// Initialize Fluent UI icons once (DetailsList sort/column glyphs).
+initializeIcons();
+
+/**
+ * The ONE host-agnostic component. It depends on nothing but an injected
+ * `IApiService` — no PCF `context`, no Xrm, no lifecycle, no bundler globals — so
+ * the SAME source renders unchanged inside a PCF control and a Dynamics custom
+ * page. Each host's thin wrapper builds the right `IApiService` and mounts this.
+ */
+export interface ComponentProps {
+  api: IApiService;
+}
+
+const ACCOUNTS_FETCHXML = [
+  '<fetch top="25">',
+  '  <entity name="account">',
+  '    <attribute name="accountid" />',
+  '    <attribute name="name" />',
+  '    <attribute name="telephone1" />',
+  '    <order attribute="name" />',
+  "  </entity>",
+  "</fetch>",
+].join("\n");
+
+interface AccountRow {
+  accountid: string;
+  name?: string;
+  telephone1?: string;
+}
+
+const COLUMNS: IColumn[] = [
+  { key: "name", name: "Account", fieldName: "name", minWidth: 180, maxWidth: 320, isResizable: true },
+  { key: "telephone1", name: "Phone", fieldName: "telephone1", minWidth: 140, isResizable: true },
+];
+
+export const Component: React.FC<ComponentProps> = ({ api }) => {
+  const [rows, setRows] = React.useState<AccountRow[] | null>(null);
+  const [error, setError] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    let cancelled = false;
+    api
+      .retrieveMultipleRecords("accounts", ACCOUNTS_FETCHXML)
+      .then((res) => {
+        if (!cancelled) setRows(res.entities as AccountRow[]);
+      })
+      .catch((e) => {
+        if (!cancelled) setError(e instanceof Error ? e.message : String(e));
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [api]);
+
+  return (
+    <Stack tokens={{ childrenGap: 12 }} styles={{ root: { padding: 16 } }}>
+      <Text variant="xLarge">Accounts</Text>
+      <Text variant="small">
+        One host-agnostic component — the same source renders in a PCF control and a
+        Dynamics custom page; only the thin host wrapper changes.
+      </Text>
+      {error && <MessageBar messageBarType={MessageBarType.error}>{error}</MessageBar>}
+      {!rows && !error && <Spinner label="Loading accounts…" />}
+      {rows && (
+        <DetailsList
+          items={rows}
+          columns={COLUMNS}
+          setKey="accounts"
+          getKey={(item: AccountRow) => item.accountid}
+          selectionMode={SelectionMode.none}
+        />
+      )}
+    </Stack>
+  );
+};

package/templates/power-pages-island/src/core/services/MockApiService.ts

@@ -0,0 +1,58 @@
+import { IApiService } from "./IApiService";
+import { logCrud } from "./crudLogging";
+
+// A few seeded in-memory accounts so the control/page renders with no org or
+// token (the PCF test harness and `npm run dev` both land here). Replace this
+// seed as your component grows. The other IApiService impls (Xrm/Fetch) and the
+// shared contract are pulled from templates/_shared/dataverse-seam at scaffold.
+const SEED_ACCOUNTS = [
+  { accountid: "00000000-0000-0000-0000-000000000001", name: "Contoso Ltd", telephone1: "+1 (425) 555-0100" },
+  { accountid: "00000000-0000-0000-0000-000000000002", name: "Fabrikam Inc", telephone1: "+1 (206) 555-0140" },
+  { accountid: "00000000-0000-0000-0000-000000000003", name: "Adventure Works", telephone1: "+1 (312) 555-0190" },
+];
+
+export class MockApiService implements IApiService {
+  private accounts: Record<string, any> = Object.fromEntries(
+    SEED_ACCOUNTS.map((a) => [a.accountid, { ...a }]),
+  );
+  private nextId = SEED_ACCOUNTS.length + 1;
+
+  retrieveMultipleRecords(entity: string): Promise<{ entities: any[] }> {
+    return logCrud(
+      { op: "READ", entity, resultCount: (r) => r?.entities?.length },
+      async () => ({
+        entities: entity === "accounts" ? Object.values(this.accounts) : [],
+      }),
+    );
+  }
+
+  createRecord(entity: string, record: any): Promise<any> {
+    return logCrud({ op: "CREATE", entity, resultId: (r) => r?.id }, async () => {
+      const id = `00000000-0000-0000-0000-${String(this.nextId++).padStart(12, "0")}`;
+      if (entity === "accounts") this.accounts[id] = { accountid: id, ...record };
+      return { id };
+    });
+  }
+
+  updateRecord(entity: string, id: string, record: any): Promise<any> {
+    return logCrud({ op: "UPDATE", entity, id }, async () => {
+      const key = id.replace(/[{}]/g, "");
+      if (this.accounts[key]) this.accounts[key] = { ...this.accounts[key], ...record };
+      return { success: true };
+    });
+  }
+
+  deleteRecord(entity: string, id: string): Promise<void> {
+    return logCrud({ op: "DELETE", entity, id }, async () => {
+      delete this.accounts[id.replace(/[{}]/g, "")];
+    });
+  }
+
+  executeRequest(requestName: string): Promise<any> {
+    return logCrud({ op: "EXECUTE", entity: requestName }, async () => ({}));
+  }
+
+  associateRecord(entity: string, id: string): Promise<void> {
+    return logCrud({ op: "ASSOCIATE", entity, id }, async () => undefined);
+  }
+}

package/templates/power-pages-island/src/core/services/portalSeam.assert.ts

@@ -0,0 +1,14 @@
+// Compile-time drift guard (typechecked by `npm run build` → `tsc --noEmit`, and by
+// the create-dynamics-app power-pages-island template build e2e). `PortalSeamService`
+// — the create-app 6-method `dataverse-seam` adapter shipped in
+// `@dataverse-kit/portal-api-service` — MUST stay structurally assignable to THIS
+// template's local seam `IApiService`, so `App.tsx` can inject it with no cast. That
+// package can't import the create-app template interface, so the assertion lives here,
+// where both types resolve. Type-only — no runtime, tree-shaken from the bundle.
+import type { IApiService } from "./IApiService";
+import type { PortalSeamService } from "@dataverse-kit/portal-api-service";
+
+// If PortalSeamService drifts from the seam shape, `true` is no longer assignable to
+// `never` and this fails to compile.
+type PortalSeamSatisfiesSeam = PortalSeamService extends IApiService ? true : never;
+export const _portalSeamDriftGuard: PortalSeamSatisfiesSeam = true;

package/templates/power-pages-island/src/island-env.d.ts

@@ -0,0 +1,12 @@
+// Webpack/ts-loader builds have no `vite/client` types. The shared data-access seam
+// (templates/_shared/dataverse-seam) includes ServiceFactory, which reads
+// `import.meta.env.VITE_USE_PROXY` for the Vite custom-page host. This Power Pages
+// island does NOT use ServiceFactory (App.tsx builds MockApiService / PortalSeamService
+// directly), so it is tree-shaken from the bundle — but `tsc` / ts-loader still
+// typecheck it. This minimal ambient declaration lets that unused file compile here.
+//
+// NOTE: this file MUST live under src/ — the tsconfig is `include: ["src"]`, so a
+// project-root *.d.ts would be excluded and the shim would be missed.
+interface ImportMeta {
+  readonly env: Record<string, unknown>;
+}

package/templates/power-pages-island/src/islands.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { createRoot } from "react-dom/client";
+import { initLogging } from "@khester/reusable-components";
+import { App } from "./App";
+
+// Wire up the localhost-only troubleshooting hooks (window.dumpAppLogs()); no-op in a
+// live portal.
+initLogging();
+
+// A traditional Power Pages portal is server-rendered (Liquid). This bundle is an
+// ISLAND: it hydrates React ONLY into the nodes a maker tags in Liquid, leaving the
+// rest of the page untouched — the delta the MS code-site scaffolder (whole-page SPA)
+// can't do. Tag a mount point with `data-dvkit-island="<name>"` (the name is a hook
+// for future per-widget routing) and reference this web file:
+//
+//   <div data-dvkit-island="accounts"></div>
+//   <script src="/{{projectName}}.js"></script>
+//
+const SELECTOR = "[data-dvkit-island]";
+
+function mountIslands(): void {
+  document.querySelectorAll<HTMLElement>(SELECTOR).forEach((node) => {
+    // Idempotent — a partial-page refresh or a duplicated include must not double-mount.
+    if (node.dataset.dvkitMounted === "true") return;
+    node.dataset.dvkitMounted = "true";
+    createRoot(node).render(
+      <React.StrictMode>
+        <App island={node.dataset.dvkitIsland} />
+      </React.StrictMode>,
+    );
+  });
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", mountIslands);
+} else {
+  mountIslands();
+}

package/templates/power-pages-island/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true,
+    "lib": ["DOM", "DOM.Iterable", "ES2020"],
+    "types": []
+  },
+  "include": ["src"]
+}

package/templates/power-pages-island/webpack.config.js

@@ -0,0 +1,22 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+// A Power Pages ISLAND: one self-contained bundle, uploaded as a portal WEB FILE and
+// referenced from a Liquid page (see README). The output filename is STABLE (no
+// contenthash) so the Liquid `<script src>` URL stays fixed across rebuilds.
+// HtmlWebpackPlugin exists only for the local `webpack serve` preview — on a real
+// portal the Liquid page is the host, so the emitted index.html is never uploaded.
+module.exports = {
+  entry: './src/islands.tsx',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: '{{projectName}}.js',
+    clean: true,
+  },
+  resolve: { extensions: ['.ts', '.tsx', '.js'] },
+  module: {
+    rules: [{ test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ }],
+  },
+  plugins: [new HtmlWebpackPlugin({ template: './public/index.html' })],
+  devServer: { static: './dist', port: 8080, hot: true },
+};

package/templates/teams-app/README.md

@@ -8,6 +8,7 @@ A **Microsoft Teams tab** — React + Fluent UI v9 + `@microsoft/teams-js`, scaf
 | `basic` | Personal tab showing the Teams context — no auth. |
 | `sso` | Teams single sign-on (`getAuthToken`) with an MSAL browser fallback + `auth.html` bridge for interactive sign-in inside Teams. |
 | `dashboard` | Configurable channel/personal dashboard: widget grid, `/#/config` page wired to `pages.config`, theme-aware. SSO-capable (ships `useTeamsAuth`). |
+| `meeting` | In-meeting app: side panel + shared stage, chosen by the Teams `frameContext`, with `shareAppContentToStage`. Configurable meeting tab (`/#/config`), theme-aware. SSO-capable (ships `useTeamsAuth`). Requires the `MeetingStage.Write.Chat` RSC permission (in the manifest). |
 
 ## Develop
 

package/templates/teams-app/_variants/tab.meeting/appPackage/manifest.template.json

@@ -0,0 +1,46 @@
+{
+  "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.19/MicrosoftTeams.schema.json",
+  "manifestVersion": "1.19",
+  "id": "{{TEAMS_APP_ID}}",
+  "version": "1.0.0",
+  "developer": {
+    "name": "Contoso",
+    "websiteUrl": "https://example.com",
+    "privacyUrl": "https://example.com/privacy",
+    "termsOfUseUrl": "https://example.com/terms"
+  },
+  "name": { "short": "{{projectName}}", "full": "{{projectName}}" },
+  "description": { "short": "{{projectName}} meeting app", "full": "{{projectName}} in-meeting Microsoft Teams tab — side panel and shared stage" },
+  "icons": { "color": "color.png", "outline": "outline.png" },
+  "accentColor": "#6264A7",
+  "staticTabs": [
+    {
+      "entityId": "home",
+      "name": "{{projectName}}",
+      "contentUrl": "https://{{HOSTNAME}}/",
+      "websiteUrl": "https://{{HOSTNAME}}/",
+      "scopes": ["personal"]
+    }
+  ],
+  "configurableTabs": [
+    {
+      "configurationUrl": "https://{{HOSTNAME}}/#/config",
+      "canUpdateConfiguration": true,
+      "scopes": ["groupChat"],
+      "context": ["meetingSidePanel", "meetingStage"]
+    }
+  ],
+  "permissions": ["identity"],
+  "validDomains": ["{{HOSTNAME}}"],
+  "webApplicationInfo": {
+    "id": "{{CLIENT_ID}}",
+    "resource": "api://{{HOSTNAME}}/{{CLIENT_ID}}"
+  },
+  "authorization": {
+    "permissions": {
+      "resourceSpecific": [
+        { "name": "MeetingStage.Write.Chat", "type": "Delegated" }
+      ]
+    }
+  }
+}

package/templates/teams-app/_variants/tab.meeting/auth.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{{projectName}} — Sign in</title>
+    <style>
+      body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; padding: 24px; color: #555; }
+    </style>
+  </head>
+  <body>
+    <p id="status">Working…</p>
+    <script type="module" src="/src/auth-bridge.ts"></script>
+  </body>
+</html>

package/templates/teams-app/_variants/tab.meeting/env.local.template

@@ -0,0 +1,3 @@
+# Copy to .env.local — `teams-app-manager.sh identity` fills these automatically.
+VITE_CLIENT_ID=
+VITE_TENANT_ID=

package/templates/teams-app/_variants/tab.meeting/src/App.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import {
+  FluentProvider,
+  teamsLightTheme,
+  teamsDarkTheme,
+  teamsHighContrastTheme,
+  type Theme,
+  Spinner,
+} from '@fluentui/react-components';
+import { app } from '@microsoft/teams-js';
+import { useHashRoute } from './hooks/useHashRoute';
+import { SidePanel } from './components/SidePanel';
+import { StageView } from './components/StageView';
+import { Config } from './pages/Config';
+import { Remove } from './pages/Remove';
+
+const THEMES: Record<string, Theme> = {
+  default: teamsLightTheme,
+  dark: teamsDarkTheme,
+  contrast: teamsHighContrastTheme,
+};
+
+/**
+ * A Teams meeting app: one SPA that renders the in-meeting side panel or the
+ * shared stage depending on the frameContext Teams reports. Route precedence is
+ * load-bearing — the tab-configuration page loads at `/#/config` with
+ * frameContext `settings`, so `/config` and `/remove` must be matched BEFORE the
+ * meetingStage/sidePanel switch, or the config dialog would render the SidePanel.
+ */
+export const App: React.FC = () => {
+  const route = useHashRoute();
+  const [theme, setTheme] = React.useState<Theme>(teamsLightTheme);
+  const [frameContext, setFrameContext] = React.useState<string>('sidePanel');
+  const [initialized, setInitialized] = React.useState(false);
+
+  React.useEffect(() => {
+    const init = async () => {
+      try {
+        await app.initialize();
+        const context = await app.getContext();
+        setTheme(THEMES[context.app.theme] ?? teamsLightTheme);
+        setFrameContext(context.page?.frameContext ?? 'sidePanel');
+        app.registerOnThemeChangeHandler((t) => setTheme(THEMES[t] ?? teamsLightTheme));
+      } catch {
+        // Standalone browser mode — keep the light theme and the sidePanel view.
+      }
+      setInitialized(true);
+    };
+    void init();
+  }, []);
+
+  let page: React.ReactNode;
+  if (route === '/config') page = <Config />;
+  else if (route === '/remove') page = <Remove />;
+  else if (!initialized) page = <Spinner label="Loading…" />;
+  else page = frameContext === 'meetingStage' ? <StageView /> : <SidePanel />;
+
+  return <FluentProvider theme={theme}>{page}</FluentProvider>;
+};

package/templates/teams-app/_variants/tab.meeting/src/auth-bridge.ts

@@ -0,0 +1,52 @@
+import { app, authentication } from '@microsoft/teams-js';
+import { PublicClientApplication } from '@azure/msal-browser';
+
+/**
+ * Auth bridge — loaded by auth.html inside the window Teams opens for
+ * `authentication.authenticate()`. MSAL's popup flow is blocked inside the Teams
+ * tab iframe, so interactive sign-in happens here: loginRedirect → back to this
+ * page → handleRedirectPromise → notifySuccess back to the tab.
+ */
+const setStatus = (msg: string): void => {
+  const el = document.getElementById('status');
+  if (el) el.textContent = msg;
+};
+
+(async () => {
+  try {
+    await app.initialize();
+
+    const clientId = import.meta.env.VITE_CLIENT_ID ?? '';
+    const tenantId = import.meta.env.VITE_TENANT_ID ?? 'common';
+    if (!clientId) throw new Error('VITE_CLIENT_ID is not set — copy env.local.template to .env.local');
+
+    const pca = new PublicClientApplication({
+      auth: {
+        clientId,
+        authority: `https://login.microsoftonline.com/${tenantId}`,
+        redirectUri: `${window.location.origin}/auth.html`,
+      },
+      cache: { cacheLocation: 'localStorage' },
+    });
+    await pca.initialize();
+
+    setStatus('Completing sign-in…');
+    const response = await pca.handleRedirectPromise();
+    if (response?.account) {
+      setStatus(`Signed in as ${response.account.username}`);
+      authentication.notifySuccess(response.account.username);
+      return;
+    }
+
+    setStatus('Redirecting to sign in…');
+    await pca.loginRedirect({ scopes: ['User.Read'] });
+  } catch (err) {
+    const msg = err instanceof Error ? err.message : String(err);
+    setStatus(`Sign-in failed: ${msg}`);
+    try {
+      authentication.notifyFailure(msg);
+    } catch {
+      // Outside a Teams auth window — the status line above is the surface.
+    }
+  }
+})();