feat(microsoft-teams): better authentication flow and doc references

frontend/src/pages/admin/OverviewPage/components/MicrosoftTeamsIntegrationForm.tsx

@@ -80,11 +80,18 @@ export const MicrosoftTeamsIntegrationForm = ({ adminIntegrationsConfig }: Props
           </AccordionTrigger>
           <AccordionContent childrenClassName="px-0 py-0">
             <div className="flex w-full flex-col justify-start rounded-md rounded-t-none border border-t-0 border-mineshaft-500 bg-mineshaft-700 px-4 py-4">
-              <div className="mb-4 max-w-lg text-sm text-mineshaft-300">
-                Step 1: Create Microsoft Teams bot
+              <div className="mb-2 max-w-lg text-sm text-mineshaft-300">
+                Step 1: Create and configure Microsoft Teams bot and Azure Resources. Please refer
+                to the documentation below for more information.
               </div>
               <div className="mb-6">
-                <Button colorSchema="secondary">Documentation</Button>
+                <a
+                  href="https://infisical.com/docs/documentation/platform/workflow-integrations/microsoft-teams-integration"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <Button colorSchema="secondary">Documentation</Button>
+                </a>
               </div>
               <div className="mb-4 max-w-lg text-sm text-mineshaft-300">
                 Step 2: Configure your instance-wide settings to enable integration with Microsoft

frontend/src/pages/organization/SettingsPage/OauthCallbackPage/OauthCallbackPage.tsx

@@ -0,0 +1,99 @@
+import { useCallback, useEffect, useState } from "react";
+import { useNavigate, useSearch } from "@tanstack/react-router";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { ContentLoader } from "@app/components/v2";
+import { ROUTE_PATHS } from "@app/const/routes";
+import { useOrganization } from "@app/context";
+import { useCreateMicrosoftTeamsIntegration } from "@app/hooks/api";
+
+const stateSchema = z.object({
+  redirectUri: z.string(),
+  tenantId: z.string(),
+  slug: z.string(),
+  description: z.string().optional(),
+  csrfToken: z.string()
+});
+
+export const OAuthCallbackPage = () => {
+  const navigate = useNavigate();
+  const { currentOrg } = useOrganization();
+  const [isReady, setIsReady] = useState(false);
+
+  const search = useSearch({
+    from: ROUTE_PATHS.Organization.Settings.OauthCallbackPage.id
+  });
+
+  const createMicrosoftTeamsWorkflowIntegration = useCreateMicrosoftTeamsIntegration();
+
+  const { state: rawState, tenant: stateTenant, admin_consent: adminConsent } = search;
+
+  const state = stateSchema.parse(rawState);
+
+  const clearState = () => {
+    if (state.csrfToken !== localStorage.getItem("latestCSRFToken")) {
+      throw new Error("Invalid CSRF token");
+    }
+
+    localStorage.removeItem("latestCSRFToken");
+  };
+
+  const handleMicrosoftTeams = useCallback(async () => {
+    clearState();
+
+    if (Boolean(adminConsent.toLowerCase()) !== true) {
+      throw new Error("Failed to grant admin consent");
+    }
+
+    if (stateTenant !== state.tenantId) {
+      throw new Error(`Invalid tenant ID. Expected ${stateTenant}, got ${state.tenantId}`);
+    }
+
+    await createMicrosoftTeamsWorkflowIntegration.mutateAsync({
+      orgId: currentOrg.id,
+      tenantId: state.tenantId,
+      slug: state.slug,
+      description: state.description ?? "",
+      redirectUri: state.redirectUri
+    });
+  }, []);
+
+  // Ensure that the localstorage is ready for use, to avoid the form data being malformed
+  useEffect(() => {
+    if (!isReady) {
+      setIsReady(!!localStorage.length);
+    }
+  }, [localStorage.length]);
+
+  useEffect(() => {
+    if (!isReady) return;
+
+    (async () => {
+      try {
+        await handleMicrosoftTeams();
+
+        createNotification({
+          text: "Successfully granted Microsoft Teams admin consent",
+          type: "success"
+        });
+      } catch (err) {
+        console.error(err);
+        createNotification({
+          text: "Failed to grant Microsoft Teams admin consent",
+          type: "error"
+        });
+      }
+
+      navigate({
+        to: ROUTE_PATHS.Organization.SettingsPage.path
+      });
+    })();
+  }, [isReady]);
+
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <ContentLoader text="Please wait! Authentication in process." />
+    </div>
+  );
+};

frontend/src/pages/organization/SettingsPage/OauthCallbackPage/route.tsx

@@ -0,0 +1,27 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { zodValidator } from "@tanstack/zod-adapter";
+import { z } from "zod";
+
+import { OAuthCallbackPage } from "./OauthCallbackPage";
+
+const SettingsOAuthCallbackPageQueryParamsSchema = z.object({
+  state: z
+    .object({
+      tenantId: z.string(),
+      slug: z.string(),
+      description: z.string().optional(),
+      redirectUri: z.string(),
+      csrfToken: z.string()
+    })
+    .nullable()
+    .catch(null),
+  tenant: z.string().catch(""),
+  admin_consent: z.string().catch("")
+});
+
+export const Route = createFileRoute(
+  "/_authenticate/_inject-org-details/_org-layout/organization/settings/oauth/callback"
+)({
+  component: OAuthCallbackPage,
+  validateSearch: zodValidator(SettingsOAuthCallbackPageQueryParamsSchema)
+});

frontend/src/pages/organization/SettingsPage/components/OrgWorkflowIntegrationTab/MicrosoftTeamsIntegrationForm.tsx

@@ -1,3 +1,5 @@
+import crypto from "crypto";
+
 import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -7,7 +9,7 @@ import { createNotification } from "@app/components/notifications";
 import { Button, FormControl, Input } from "@app/components/v2";
 import { useOrganization } from "@app/context";
 import {
-  useCreateMicrosoftTeamsIntegration,
+  useGetMicrosoftTeamsClientId,
   useGetMicrosoftTeamsIntegrationById,
   useUpdateMicrosoftTeamsIntegration
 } from "@app/hooks/api";
@@ -38,8 +40,8 @@ export const MicrosoftTeamsIntegrationForm = ({ id, onClose }: Props) => {
 
   const { currentOrg } = useOrganization();
   const { data: microsoftTeamsIntegration } = useGetMicrosoftTeamsIntegrationById(id);
-  const { mutateAsync: createMicrosoftTeamsIntegration } = useCreateMicrosoftTeamsIntegration();
   const { mutateAsync: updateMicrosoftTeamsIntegration } = useUpdateMicrosoftTeamsIntegration();
+  const { data: microsoftTeamsClientId } = useGetMicrosoftTeamsClientId();
 
   useEffect(() => {
     if (microsoftTeamsIntegration) {
@@ -54,6 +56,14 @@ export const MicrosoftTeamsIntegrationForm = ({ id, onClose }: Props) => {
     description,
     tenantId
   }: TMicrosoftTeamsFormData) => {
+    if (!microsoftTeamsClientId) {
+      createNotification({
+        text: "Microsoft Teams client ID is not set. Please contact your instance administrator.",
+        type: "error"
+      });
+      return;
+    }
+
     if (id && microsoftTeamsIntegration) {
       if (!currentOrg) {
         return;
@@ -81,23 +91,37 @@ export const MicrosoftTeamsIntegrationForm = ({ id, onClose }: Props) => {
 
       onClose();
     } else {
-      await createMicrosoftTeamsIntegration({
-        orgId: currentOrg.id,
+      const csrfToken = crypto.randomBytes(32).toString("hex");
+      localStorage.setItem("latestCSRFToken", csrfToken);
+
+      const state = {
+        redirectUri: `${window.location.origin}/organization/settings/oauth/callback`,
         tenantId,
         slug,
-        description
-      });
+        description,
+        csrfToken
+      };
 
-      onClose();
-      createNotification({
-        text: "Successfully created Microsoft Teams integration",
-        type: "success"
-      });
+      const url = `https://login.microsoftonline.com/${tenantId}/adminconsent?client_id=${microsoftTeamsClientId.clientId}&redirect_uri=${state.redirectUri}&state=${encodeURIComponent(JSON.stringify(state))}`;
+      window.location.href = url;
     }
   };
 
   return (
     <form onSubmit={handleSubmit(handleMicrosoftTeamsFormSubmit)} autoComplete="off">
+      <div className="mb-4 text-xs text-mineshaft-200">
+        For seamless installations, ensure that the Infisical bot is already installed in your
+        Microsoft Teams tenant. For more information, please refer to the{" "}
+        <a
+          className="text-primary-500"
+          href="https://infisical.com/docs/documentation/platform/workflow-integrations/microsoft-teams-integration"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Microsoft Teams Workflow Integration Documentation
+        </a>
+        , which will guide you through the download and installation process.
+      </div>
       <Controller
         control={control}
         name="slug"

frontend/src/pages/organization/SettingsPage/route.tsx

@@ -11,7 +11,7 @@ const SettingsPageQueryParams = z.object({
 });
 
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/_org-layout/organization/settings"
+  "/_authenticate/_inject-org-details/_org-layout/organization/settings/"
 )({
   component: SettingsPage,
   validateSearch: zodValidator(SettingsPageQueryParams),

frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/EditWorkflowIntegrationModal.tsx

@@ -1,8 +1,8 @@
 import { Modal, ModalContent } from "@app/components/v2";
 import { WorkflowIntegrationPlatform } from "@app/hooks/api/workflowIntegrations/types";
 
-import { SlackIntegrationForm } from "./SlackIntegrationForm";
 import { MicrosoftTeamsIntegrationForm } from "./MicrosoftTeamsIntegrationForm";
+import { SlackIntegrationForm } from "./SlackIntegrationForm";
 
 type Props = {
   isOpen?: boolean;