@khester/create-dynamics-app 2.6.6 → 2.7.0

package/templates/teams-app/_variants/tab.sso/src/hooks/useTeamsAuth.ts

@@ -0,0 +1,121 @@
+import { useState, useEffect, useCallback } from 'react';
+import { app, authentication } from '@microsoft/teams-js';
+import { PublicClientApplication, type AccountInfo } from '@azure/msal-browser';
+
+/**
+ * Teams-first auth: try Teams SSO (`authentication.getAuthToken()`), fall back to
+ * MSAL. Inside the Teams iframe, interactive sign-in must go through the auth
+ * bridge (`auth.html`) — `loginPopup` is blocked there; outside Teams (plain
+ * browser tab) MSAL redirect works directly.
+ *
+ * VITE_CLIENT_ID / VITE_TENANT_ID come from `.env.local` (see env.local.template);
+ * `teams-app-manager.sh identity` writes them after registering the Entra app.
+ */
+const clientId = import.meta.env.VITE_CLIENT_ID ?? '';
+const tenantId = import.meta.env.VITE_TENANT_ID ?? 'common';
+
+const msalInstance = new PublicClientApplication({
+  auth: {
+    clientId,
+    authority: `https://login.microsoftonline.com/${tenantId}`,
+    redirectUri: window.location.origin,
+  },
+  cache: { cacheLocation: 'localStorage' },
+});
+
+export interface AuthState {
+  token: string | null;
+  account: AccountInfo | null;
+  inTeams: boolean;
+  loading: boolean;
+  error: Error | null;
+}
+
+export function useTeamsAuth(): AuthState & { login: () => Promise<void> } {
+  const [state, setState] = useState<AuthState>({
+    token: null,
+    account: null,
+    inTeams: false,
+    loading: true,
+    error: null,
+  });
+
+  const getToken = useCallback(async () => {
+    // 1. Teams SSO — works once the app registration exposes api://{host}/{clientId}
+    //    with the Teams client ids pre-authorized.
+    try {
+      await app.initialize();
+      const ssoToken = await authentication.getAuthToken();
+      setState({ token: ssoToken, account: null, inTeams: true, loading: false, error: null });
+      return;
+    } catch {
+      // Not in Teams, or SSO not consented yet — fall through to MSAL.
+    }
+
+    // 2. MSAL silent — a previous interactive sign-in left an account in the cache.
+    try {
+      await msalInstance.initialize();
+      const redirect = await msalInstance.handleRedirectPromise().catch(() => null);
+      const account = redirect?.account ?? msalInstance.getAllAccounts()[0];
+      if (account) {
+        const result = await msalInstance.acquireTokenSilent({
+          scopes: ['User.Read'],
+          account,
+        });
+        setState({
+          token: result.accessToken,
+          account: result.account,
+          inTeams: false,
+          loading: false,
+          error: null,
+        });
+        return;
+      }
+      setState((prev) => ({ ...prev, loading: false }));
+    } catch (error) {
+      setState((prev) => ({ ...prev, loading: false, error: error as Error }));
+    }
+  }, []);
+
+  /** Interactive sign-in. In Teams → auth bridge popup; in a browser → MSAL redirect. */
+  const login = useCallback(async () => {
+    if (!clientId) {
+      setState((prev) => ({
+        ...prev,
+        error: new Error('VITE_CLIENT_ID is not set — copy env.local.template to .env.local'),
+      }));
+      return;
+    }
+    let inTeams = false;
+    try {
+      await app.initialize();
+      inTeams = true;
+    } catch {
+      // Plain browser tab.
+    }
+
+    try {
+      if (inTeams) {
+        // Teams opens auth.html in a real window where MSAL's redirect flow is
+        // allowed; the bridge calls notifySuccess/notifyFailure when done.
+        await authentication.authenticate({
+          url: `${window.location.origin}/auth.html`,
+          width: 600,
+          height: 535,
+        });
+        await getToken();
+        return;
+      }
+      await msalInstance.initialize();
+      await msalInstance.loginRedirect({ scopes: ['User.Read'] });
+    } catch (error) {
+      setState((prev) => ({ ...prev, error: error as Error }));
+    }
+  }, [getToken]);
+
+  useEffect(() => {
+    void getToken();
+  }, [getToken]);
+
+  return { ...state, login };
+}

package/templates/teams-app/_variants/tab.sso/src/vite-env.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_CLIENT_ID?: string;
+  readonly VITE_TENANT_ID?: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

package/templates/teams-app/_variants/tab.sso/vite.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { fileURLToPath, URL } from 'node:url';
+
+export default defineConfig({
+  plugins: [react()],
+  // Teams tabs must be served over HTTPS; `vite --https` or a tunnel in dev.
+  server: { port: 3000 },
+  build: {
+    outDir: 'dist',
+    rollupOptions: {
+      // MPA: the tab plus the auth bridge Teams opens for interactive sign-in.
+      input: {
+        main: fileURLToPath(new URL('./index.html', import.meta.url)),
+        auth: fileURLToPath(new URL('./auth.html', import.meta.url)),
+      },
+    },
+  },
+});

package/templates/teams-app/gitignore

@@ -1,5 +1,7 @@
 node_modules/
 dist/
+build/
 .env
 .env.local
+.teams/
 *.log

package/templates/teams-app/package.json

@@ -14,7 +14,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "@fluentui/react-components": "^9.46.2",
-    "@microsoft/teams-js": "^2.19.0"
+    "@microsoft/teams-js": "^2.24.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",