update

Author: meryldakin

examples/slack-connect-example/.env.sample

@@ -21,4 +21,8 @@ NEXT_PUBLIC_SLACK_CLIENT_ID=<slack client id>
 NEXT_PUBLIC_KNOCK_SLACK_CHANNEL_ID=<knock slack channel id>
 NEXT_PUBLIC_REDIRECT_URL=http://localhost:3000/
 
+# MS Teams configuration (optional — enables side-by-side testing with Slack)
+NEXT_PUBLIC_GRAPH_API_CLIENT_ID=<graph api client id>
+NEXT_PUBLIC_KNOCK_MS_TEAMS_CHANNEL_ID=<knock ms teams channel id>
+
 NEXT_PUBLIC_KNOCK_BRANCH=<optional>

examples/slack-connect-example/pages/api/set_token.ts

@@ -14,7 +14,10 @@ export default async function handler(
 
   const { tenant, user, slackChannelsRecipientObject } = req.body;
   try {
-    const signingKey = process.env.KNOCK_SIGNING_KEY!;
+    const rawKey = process.env.KNOCK_SIGNING_KEY!;
+    const signingKey = rawKey.startsWith("LS0t")
+      ? Buffer.from(rawKey, "base64").toString("utf-8")
+      : rawKey;
 
     // JWT NumericDates specified in seconds:
     const currentTime = Math.floor(Date.now() / 1000);
@@ -30,6 +33,7 @@ export default async function handler(
         grants: {
           [`https://api.knock.app/v1/objects/$tenants/${tenant}`]: {
             "slack/channels_read": [{}],
+            "ms_teams/channels_read": [{}],
           },
           [`https://api.knock.app/v1/objects/${slackChannelsRecipientObject.collection}/${slackChannelsRecipientObject.objectId}`]:
             {

examples/slack-connect-example/pages/index.tsx

@@ -1,6 +1,8 @@
 import {
+  KnockMsTeamsProvider,
   KnockProvider,
   KnockSlackProvider,
+  MsTeamsAuthButton,
   SlackAuthButton,
   SlackAuthContainer,
   SlackChannelCombobox,
@@ -26,10 +28,14 @@ export default function Home() {
     collection: process.env.NEXT_PUBLIC_CONNECTIONS_COLLECTION!,
   };
 
-  const onAuthComplete = (result: string) => {
+  const onSlackAuthComplete = (result: string) => {
     console.log("Result from Slack authentication:", result);
   };
 
+  const onTeamsAuthComplete = (result: string) => {
+    console.log("Result from MS Teams authentication:", result);
+  };
+
   const { isLoading, isError } = useSetToken({
     tenant,
     user,
@@ -114,7 +120,7 @@ export default function Home() {
                   <SlackAuthButton
                     slackClientId={process.env.NEXT_PUBLIC_SLACK_CLIENT_ID!}
                     redirectUrl={redirectUrl}
-                    onAuthenticationComplete={onAuthComplete}
+                    onAuthenticationComplete={onSlackAuthComplete}
                     additionalScopes={["users:read", "users:read.email"]}
                   />
                 </div>
@@ -146,6 +152,43 @@ export default function Home() {
           </div>
         </>
       </KnockSlackProvider>
+
+      {/* MS Teams provider rendered as sibling to reproduce KNO-13032 */}
+      {process.env.NEXT_PUBLIC_KNOCK_MS_TEAMS_CHANNEL_ID && (
+        <KnockMsTeamsProvider
+          knockMsTeamsChannelId={
+            process.env.NEXT_PUBLIC_KNOCK_MS_TEAMS_CHANNEL_ID
+          }
+          tenantId={tenant}
+        >
+          <div
+            style={{
+              marginTop: "60px",
+              borderTop: "2px solid #eee",
+              paddingTop: "20px",
+            }}
+          >
+            <div
+              style={{
+                marginBottom: "20px",
+                fontFamily: "monospace",
+                fontSize: "40px",
+              }}
+            >
+              MS Teams connector
+            </div>
+            <div style={{ margin: "10px", padding: "10px" }}>
+              <MsTeamsAuthButton
+                graphApiClientId={
+                  process.env.NEXT_PUBLIC_GRAPH_API_CLIENT_ID!
+                }
+                redirectUrl={redirectUrl}
+                onAuthenticationComplete={onTeamsAuthComplete}
+              />
+            </div>
+          </div>
+        </KnockMsTeamsProvider>
+      )}
     </KnockProvider>
   );
 }

packages/react-core/src/modules/core/hooks/useAuthPostMessageListener.ts

@@ -84,6 +84,11 @@ export function useAuthPostMessageListener(
         return;
       }
 
+      // Ignore messages when this integration hasn't opened a popup
+      if (!popupWindowRef.current || popupWindowRef.current.closed) {
+        return;
+      }
+
       const messageType = getMessageType(event.data);
 
       if (messageType === "authComplete") {

packages/react-core/test/core/hooks/useAuthPostMessageListener.test.ts

@@ -132,6 +132,50 @@ describe("useAuthPostMessageListener", () => {
     expect(popupWindowRef.current).toBeNull();
   });
 
+  it("should ignore messages when popupWindowRef is null", () => {
+    popupWindowRef.current = null;
+
+    renderHook(() =>
+      useAuthPostMessageListener({
+        knockHost,
+        popupWindowRef,
+        setConnectionStatus,
+        onAuthenticationComplete,
+      }),
+    );
+
+    const event = new MessageEvent("message", {
+      data: "authComplete",
+      origin: knockHost,
+    });
+    window.dispatchEvent(event);
+
+    expect(setConnectionStatus).not.toHaveBeenCalled();
+    expect(onAuthenticationComplete).not.toHaveBeenCalled();
+  });
+
+  it("should ignore messages when popup is closed", () => {
+    mockPopup.closed = true;
+
+    renderHook(() =>
+      useAuthPostMessageListener({
+        knockHost,
+        popupWindowRef,
+        setConnectionStatus,
+        onAuthenticationComplete,
+      }),
+    );
+
+    const event = new MessageEvent("message", {
+      data: "authComplete",
+      origin: knockHost,
+    });
+    window.dispatchEvent(event);
+
+    expect(setConnectionStatus).not.toHaveBeenCalled();
+    expect(onAuthenticationComplete).not.toHaveBeenCalled();
+  });
+
   it("should ignore messages from different origins", () => {
     renderHook(() =>
       useAuthPostMessageListener({