Finish preliminary loop on SSH certificates

2026-10-15 14:27:23 +00:00 · 2024-12-02 22:37:23 -08:00
parent 82c3e943eb
commit 4fc8c509ac
65 changed files with 3685 additions and 26 deletions
@@ -23,7 +23,9 @@ export enum OrgPermissionSubjects {
  Kms = "kms",
  AdminConsole = "organization-admin-console",
  AuditLogs = "audit-logs",
-  ProjectTemplates = "project-templates"
+  ProjectTemplates = "project-templates",
+  SshCertificateAuthorities = "ssh-certificate-authorities",
+  SshCertificateTemplates = "ssh-certificate-templates"
 }

 export enum OrgPermissionAdminConsoleAction {
@@ -47,6 +49,8 @@ export type OrgPermissionSet =
  | [OrgPermissionActions, OrgPermissionSubjects.Kms]
  | [OrgPermissionAdminConsoleAction, OrgPermissionSubjects.AdminConsole]
  | [OrgPermissionActions, OrgPermissionSubjects.AuditLogs]
-  | [OrgPermissionActions, OrgPermissionSubjects.ProjectTemplates];
+  | [OrgPermissionActions, OrgPermissionSubjects.ProjectTemplates]
+  | [OrgPermissionActions, OrgPermissionSubjects.SshCertificateAuthorities]
+  | [OrgPermissionActions, OrgPermissionSubjects.SshCertificateTemplates];

 export type TOrgPermission = MongoAbility<OrgPermissionSet>;
@@ -1,3 +1,5 @@
+import { SshCaStatus } from "@app/hooks/api/ssh-ca";
+
 import { CaStatus, CaType } from "./enums";

 export const caTypeToNameMap: { [K in CaType]: string } = {
@@ -11,7 +13,7 @@ export const caStatusToNameMap: { [K in CaStatus]: string } = {
  [CaStatus.PENDING_CERTIFICATE]: "Pending Certificate"
 };

-export const getCaStatusBadgeVariant = (status: CaStatus) => {
+export const getCaStatusBadgeVariant = (status: CaStatus | SshCaStatus) => {
  switch (status) {
    case CaStatus.ACTIVE:
      return "success";
@@ -38,6 +38,8 @@ export * from "./secretSharing";
 export * from "./secretSnapshots";
 export * from "./serverDetails";
 export * from "./serviceTokens";
+export * from "./ssh-ca";
+export * from "./sshCertificateTemplates";
 export * from "./ssoConfig";
 export * from "./subscriptions";
 export * from "./tags";
@@ -19,6 +19,6 @@ export {
  useGetOrgPmtMethods,
  useGetOrgTaxIds,
  useGetOrgTrialUrl,
+  useListOrgSshCas,
  useUpdateOrg,
-  useUpdateOrgBillingDetails
-} from "./queries";
+  useUpdateOrgBillingDetails} from "./queries";
@@ -4,6 +4,7 @@ import { apiRequest } from "@app/config/request";
 import { OrderByDirection } from "@app/hooks/api/generic/types";

 import { TGroupOrgMembership } from "../groups/types";
+import { TSshCertificateAuthority } from "../ssh-ca/types";
 import { IntegrationAuth } from "../types";
 import {
  BillingDetails,
@@ -41,7 +42,8 @@ export const organizationKeys = {
  }: TListOrgIdentitiesDTO) =>
    [...organizationKeys.getOrgIdentityMemberships(orgId), params] as const,
  getOrgGroups: (orgId: string) => [{ orgId }, "organization-groups"] as const,
-  getOrgIntegrationAuths: (orgId: string) => [{ orgId }, "integration-auths"] as const
+  getOrgIntegrationAuths: (orgId: string) => [{ orgId }, "integration-auths"] as const,
+  getOrgSshCas: ({ orgId }: { orgId: string }) => [{ orgId }, "org-ssh-cas"] as const
 };

 export const fetchOrganizations = async () => {
@@ -495,3 +497,18 @@ export const useGetOrgIntegrationAuths = <TData = IntegrationAuth[],>(
    select
  });
 };
+
+export const useListOrgSshCas = ({ orgId }: { orgId: string }) => {
+  return useQuery({
+    queryKey: organizationKeys.getOrgSshCas({ orgId }),
+    queryFn: async () => {
+      const {
+        data: { cas }
+      } = await apiRequest.get<{ cas: TSshCertificateAuthority[] }>(
+        `/api/v1/organization/${orgId}/ssh-cas`
+      );
+      return cas;
+    },
+    enabled: Boolean(orgId)
+  });
+};
@@ -0,0 +1,4 @@
+export enum SshCaStatus {
+  ACTIVE = "active",
+  DISABLED = "disabled"
+}
@@ -0,0 +1,3 @@
+export { SshCaStatus } from "./enums";
+export { useCreateSshCa, useDeleteSshCa,useUpdateSshCa } from "./mutations";
+export { useGetSshCaById, useGetSshCaCertTemplates } from "./queries";
@@ -0,0 +1,61 @@
+
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { organizationKeys } from "../organization/queries";
+import {
+  TCreateSshCaDTO,
+  TDeleteSshCaDTO,
+  TSshCertificateAuthority,
+  TUpdateSshCaDTO} from "./types";
+
+export const sshCaKeys = {
+  getSshCaById: (caId: string) => [{ caId }, "ssh-ca"]
+};
+
+export const useCreateSshCa = () => {
+  const queryClient = useQueryClient();
+  return useMutation<TSshCertificateAuthority, {}, TCreateSshCaDTO>({
+    mutationFn: async (body) => {
+      const {
+        data: { ca }
+      } = await apiRequest.post<{ ca: TSshCertificateAuthority }>("/api/v1/ssh/ca/", body);
+      return ca;
+    },
+    onSuccess: ({ orgId }) => {
+      queryClient.invalidateQueries(organizationKeys.getOrgSshCas({ orgId }));
+    }
+  });
+};
+
+export const useUpdateSshCa = () => {
+  const queryClient = useQueryClient();
+  return useMutation<TSshCertificateAuthority, {}, TUpdateSshCaDTO>({
+    mutationFn: async ({ caId, ...body }) => {
+      const {
+        data: { ca }
+      } = await apiRequest.patch<{ ca: TSshCertificateAuthority }>(`/api/v1/ssh/ca/${caId}`, body);
+      return ca;
+    },
+    onSuccess: ({ orgId }, { caId }) => {
+      queryClient.invalidateQueries(organizationKeys.getOrgSshCas({ orgId }));
+      queryClient.invalidateQueries(sshCaKeys.getSshCaById(caId));
+    }
+  });
+};
+
+export const useDeleteSshCa = () => {
+  const queryClient = useQueryClient();
+  return useMutation<TSshCertificateAuthority, {}, TDeleteSshCaDTO>({
+    mutationFn: async ({ caId }) => {
+      const {
+        data: { ca }
+      } = await apiRequest.delete<{ ca: TSshCertificateAuthority }>(`/api/v1/ssh/ca/${caId}`);
+      return ca;
+    },
+    onSuccess: ({ orgId }) => {
+      queryClient.invalidateQueries(organizationKeys.getOrgSshCas({ orgId }));
+    }
+  });
+};
@@ -0,0 +1,37 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { TSshCertificateTemplate } from "../sshCertificateTemplates/types";
+import { TSshCertificateAuthority } from "./types";
+
+export const sshCaKeys = {
+  getSshCaById: (caId: string) => [{ caId }, "ssh-ca"],
+  getSshCaCertTemplates: (caId: string) => [{ caId }, "ssh-ca-cert-templates"]
+};
+
+export const useGetSshCaById = (caId: string) => {
+  return useQuery({
+    queryKey: sshCaKeys.getSshCaById(caId),
+    queryFn: async () => {
+      const {
+        data: { ca }
+      } = await apiRequest.get<{ ca: TSshCertificateAuthority }>(`/api/v1/ssh/ca/${caId}`);
+      return ca;
+    },
+    enabled: Boolean(caId)
+  });
+};
+
+export const useGetSshCaCertTemplates = (caId: string) => {
+  return useQuery({
+    queryKey: sshCaKeys.getSshCaCertTemplates(caId),
+    queryFn: async () => {
+      const { data } = await apiRequest.get<{
+        certificateTemplates: TSshCertificateTemplate[];
+      }>(`/api/v1/ssh/ca/${caId}/certificate-templates`);
+      return data;
+    },
+    enabled: Boolean(caId)
+  });
+};
@@ -0,0 +1,26 @@
+import { CertKeyAlgorithm } from "../certificates/enums";
+import { SshCaStatus } from "./enums";
+
+export type TSshCertificateAuthority = {
+  id: string;
+  orgId: string;
+  status: SshCaStatus;
+  friendlyName: string;
+  keyAlgorithm: CertKeyAlgorithm;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export type TCreateSshCaDTO = {
+  friendlyName?: string;
+  keyAlgorithm: CertKeyAlgorithm;
+};
+
+export type TUpdateSshCaDTO = {
+  caId: string;
+  status?: SshCaStatus;
+};
+
+export type TDeleteSshCaDTO = {
+  caId: string;
+};
@@ -0,0 +1,5 @@
+export {
+  useCreateSshCertTemplate,
+  useDeleteSshCertTemplate,
+  useUpdateSshCertTemplate} from "./mutations";
+export { useGetSshCertTemplate } from "./queries";
@@ -0,0 +1,59 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { sshCaKeys } from "../ssh-ca/queries";
+import {
+  TCreateSshCertificateTemplateDTO,
+  TDeleteSshCertificateTemplateDTO,
+  TSshCertificateTemplate,
+  TUpdateSshCertificateTemplateDTO
+} from "./types";
+
+export const useCreateSshCertTemplate = () => {
+  const queryClient = useQueryClient();
+  return useMutation<TSshCertificateTemplate, {}, TCreateSshCertificateTemplateDTO>({
+    mutationFn: async (data) => {
+      const { data: certificateTemplate } = await apiRequest.post<TSshCertificateTemplate>(
+        "/api/v1/ssh/certificate-templates",
+        data
+      );
+      return certificateTemplate;
+    },
+    onSuccess: ({ sshCaId }) => {
+      queryClient.invalidateQueries(sshCaKeys.getSshCaCertTemplates(sshCaId));
+    }
+  });
+};
+
+export const useUpdateSshCertTemplate = () => {
+  const queryClient = useQueryClient();
+  return useMutation<TSshCertificateTemplate, {}, TUpdateSshCertificateTemplateDTO>({
+    mutationFn: async (data) => {
+      const { data: certificateTemplate } = await apiRequest.patch<TSshCertificateTemplate>(
+        `/api/v1/ssh/certificate-templates/${data.id}`,
+        data
+      );
+
+      return certificateTemplate;
+    },
+    onSuccess: ({ sshCaId }) => {
+      queryClient.invalidateQueries(sshCaKeys.getSshCaCertTemplates(sshCaId));
+    }
+  });
+};
+
+export const useDeleteSshCertTemplate = () => {
+  const queryClient = useQueryClient();
+  return useMutation<TSshCertificateTemplate, {}, TDeleteSshCertificateTemplateDTO>({
+    mutationFn: async (data) => {
+      const { data: certificateTemplate } = await apiRequest.delete<TSshCertificateTemplate>(
+        `/api/v1/ssh/certificate-templates/${data.id}`
+      );
+      return certificateTemplate;
+    },
+    onSuccess: ({ sshCaId }) => {
+      queryClient.invalidateQueries(sshCaKeys.getSshCaCertTemplates(sshCaId));
+    }
+  });
+};
@@ -0,0 +1,22 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { TSshCertificateTemplate } from "./types";
+
+export const certTemplateKeys = {
+  getSshCertTemplateById: (id: string) => [{ id }, "ssh-cert-template"]
+};
+
+export const useGetSshCertTemplate = (id: string) => {
+  return useQuery({
+    queryKey: certTemplateKeys.getSshCertTemplateById(id),
+    queryFn: async () => {
+      const { data: certificateTemplate } = await apiRequest.get<TSshCertificateTemplate>(
+        `/api/v1/ssh/certificate-templates/${id}`
+      );
+      return certificateTemplate;
+    },
+    enabled: Boolean(id)
+  });
+};
@@ -0,0 +1,40 @@
+export type TSshCertificateTemplate = {
+  id: string;
+  sshCaId: string;
+  name: string;
+  ttl: string;
+  maxTTL: string;
+  allowedUsers: string[];
+  allowedHosts: string[];
+  allowUserCertificates: boolean;
+  allowHostCertificates: boolean;
+  allowCustomKeyIds: boolean;
+};
+
+export type TCreateSshCertificateTemplateDTO = {
+  sshCaId: string;
+  name: string;
+  ttl: string;
+  maxTTL: string;
+  allowedUsers: string[];
+  allowedHosts: string[];
+  allowUserCertificates: boolean;
+  allowHostCertificates: boolean;
+  allowCustomKeyIds: boolean;
+};
+
+export type TUpdateSshCertificateTemplateDTO = {
+  id: string;
+  name?: string;
+  ttl?: string;
+  maxTTL?: string;
+  allowedUsers?: string[];
+  allowedHosts?: string[];
+  allowUserCertificates?: boolean;
+  allowHostCertificates?: boolean;
+  allowCustomKeyIds?: boolean;
+};
+
+export type TDeleteSshCertificateTemplateDTO = {
+  id: string;
+};
@@ -513,6 +513,16 @@ export const AppLayout = ({ children }: LayoutProps) => {
                          </MenuItem>
                        </a>
                      </Link>
+                      <Link href={`/org/${currentOrg?.id}/ssh`} passHref>
+                        <a>
+                          <MenuItem
+                            isSelected={router.asPath === `/org/${currentOrg?.id}/ssh`}
+                            icon="system-outline-90-lock-closed"
+                          >
+                            SSH
+                          </MenuItem>
+                        </a>
+                      </Link>
                      <Link href={`/org/${currentOrg?.id}/secret-scanning`} passHref>
                        <a>
                          <MenuItem
@@ -0,0 +1,18 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import Head from "next/head";
+
+import { SshCaPage } from "@app/views/Org/SshCaPage";
+
+export default function SshCa() {
+  return (
+    <>
+      <Head>
+        <title>SSH Certificate Authority</title>
+        <link rel="icon" href="/infisical.ico" />
+      </Head>
+      <SshCaPage />
+    </>
+  );
+}
+
+SshCa.requireAuth = true;
@@ -0,0 +1,29 @@
+import { useTranslation } from "react-i18next";
+import Head from "next/head";
+
+import { SshPage } from "@app/views/Org/SshPage";
+
+// TODO: update meta tags
+
+const Ssh = () => {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Head>
+        <title>{t("common.head-title", { title: t("approval.title") })}</title>
+        <link rel="icon" href="/infisical.ico" />
+        <meta property="og:image" content="/images/message.png" />
+        <meta property="og:title" content={String(t("approval.og-title"))} />
+        <meta name="og:description" content={String(t("approval.og-description"))} />
+      </Head>
+      <div className="h-full">
+        <SshPage />
+      </div>
+    </>
+  );
+};
+
+export default Ssh;
+
+Ssh.requireAuth = true;
@@ -0,0 +1,139 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { useRouter } from "next/router";
+import { faChevronLeft, faEllipsis } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+import { createNotification } from "@app/components/notifications";
+import { OrgPermissionCan, ProjectPermissionCan } from "@app/components/permissions";
+import {
+  Button,
+  DeleteActionModal,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Tooltip
+} from "@app/components/v2";
+import {
+  OrgPermissionActions,
+  OrgPermissionSubjects,
+  ProjectPermissionActions,
+  ProjectPermissionSub,
+  useOrganization
+} from "@app/context";
+import { withPermission } from "@app/hoc";
+import { useDeleteSshCa, useGetSshCaById } from "@app/hooks/api";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { SshCaDetailsSection, SshCertificateTemplatesSection } from "./components";
+
+export const SshCaPage = withPermission(
+  () => {
+    const { currentOrg } = useOrganization();
+    const router = useRouter();
+    const caId = router.query.caId as string;
+    const { data } = useGetSshCaById(caId);
+
+    const { mutateAsync: deleteSshCa } = useDeleteSshCa();
+
+    const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+      "sshCa",
+      "deleteSshCa"
+    ] as const);
+
+    const onRemoveCaSubmit = async (caIdToDelete: string) => {
+      try {
+        if (!currentOrg?.id) return;
+
+        await deleteSshCa({ caId: caIdToDelete });
+
+        await createNotification({
+          text: "Successfully deleted SSH CA",
+          type: "success"
+        });
+
+        handlePopUpClose("deleteSshCa");
+        router.push(`/org/${currentOrg.id}/ssh`);
+      } catch (err) {
+        console.error(err);
+        createNotification({
+          text: "Failed to delete SSH CA",
+          type: "error"
+        });
+      }
+    };
+
+    return (
+      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+        {data && (
+          <div className="mx-auto mb-6 w-full max-w-7xl py-6 px-6">
+            <Button
+              variant="link"
+              type="submit"
+              leftIcon={<FontAwesomeIcon icon={faChevronLeft} />}
+              onClick={() => router.push(`/org/${currentOrg?.id}/ssh`)}
+              className="mb-4"
+            >
+              SSH Certificate Authorities
+            </Button>
+            <div className="mb-4 flex items-center justify-between">
+              <p className="text-3xl font-semibold text-white">{data.friendlyName}</p>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild className="rounded-lg">
+                  <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                    <Tooltip content="More options">
+                      <FontAwesomeIcon size="sm" icon={faEllipsis} />
+                    </Tooltip>
+                  </div>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start" className="p-1">
+                  <OrgPermissionCan
+                    I={OrgPermissionActions.Delete}
+                    a={OrgPermissionSubjects.SshCertificateAuthorities}
+                  >
+                    {(isAllowed) => (
+                      <DropdownMenuItem
+                        className={twMerge(
+                          isAllowed
+                            ? "hover:!bg-red-500 hover:!text-white"
+                            : "pointer-events-none cursor-not-allowed opacity-50"
+                        )}
+                        onClick={() =>
+                          handlePopUpOpen("deleteSshCa", {
+                            caId: data.id
+                          })
+                        }
+                        disabled={!isAllowed}
+                      >
+                        Delete SSH CA
+                      </DropdownMenuItem>
+                    )}
+                  </OrgPermissionCan>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+            <div className="flex">
+              <div className="mr-4 w-96">
+                <SshCaDetailsSection caId={caId} handlePopUpOpen={handlePopUpOpen} />
+              </div>
+              <div className="w-full">
+                <SshCertificateTemplatesSection caId={caId} />
+              </div>
+            </div>
+          </div>
+        )}
+        <DeleteActionModal
+          isOpen={popUp.deleteSshCa.isOpen}
+          title="Are you sure want to remove the SSH CA from the project?"
+          onChange={(isOpen) => handlePopUpToggle("deleteSshCa", isOpen)}
+          deleteKey="confirm"
+          onDeleteApproved={() =>
+            onRemoveCaSubmit((popUp?.deleteSshCa?.data as { caId: string })?.caId)
+          }
+        />
+      </div>
+    );
+  },
+  { action: OrgPermissionActions.Read, subject: OrgPermissionSubjects.SshCertificateAuthorities }
+);
@@ -0,0 +1,94 @@
+import { faCheck, faCopy, faPencil } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { OrgPermissionCan } from "@app/components/permissions";
+import { IconButton, Tooltip } from "@app/components/v2";
+import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
+import { useTimedReset } from "@app/hooks";
+import { useGetSshCaById } from "@app/hooks/api";
+import { caStatusToNameMap } from "@app/hooks/api/ca/constants";
+import { certKeyAlgorithmToNameMap } from "@app/hooks/api/certificates/constants";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  caId: string;
+  handlePopUpOpen: (popUpName: keyof UsePopUpState<["sshCa"]>, data?: {}) => void;
+};
+
+export const SshCaDetailsSection = ({ caId, handlePopUpOpen }: Props) => {
+  const [copyTextId, isCopyingId, setCopyTextId] = useTimedReset<string>({
+    initialState: "Copy ID to clipboard"
+  });
+
+  const { data: ca } = useGetSshCaById(caId);
+
+  return ca ? (
+    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
+        <h3 className="text-lg font-semibold text-mineshaft-100">CA Details</h3>
+        <OrgPermissionCan
+          I={OrgPermissionActions.Edit}
+          a={OrgPermissionSubjects.SshCertificateAuthorities}
+        >
+          {(isAllowed) => {
+            return (
+              <Tooltip content="Edit SSH CA">
+                <IconButton
+                  isDisabled={!isAllowed}
+                  ariaLabel="copy icon"
+                  variant="plain"
+                  className="group relative"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handlePopUpOpen("sshCa", {
+                      caId: ca.id
+                    });
+                  }}
+                >
+                  <FontAwesomeIcon icon={faPencil} />
+                </IconButton>
+              </Tooltip>
+            );
+          }}
+        </OrgPermissionCan>
+      </div>
+      <div className="pt-4">
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">SSH CA ID</p>
+          <div className="group flex align-top">
+            <p className="text-sm text-mineshaft-300">{ca.id}</p>
+            <div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+              <Tooltip content={copyTextId}>
+                <IconButton
+                  ariaLabel="copy icon"
+                  variant="plain"
+                  className="group relative ml-2"
+                  onClick={() => {
+                    navigator.clipboard.writeText(ca.id);
+                    setCopyTextId("Copied");
+                  }}
+                >
+                  <FontAwesomeIcon icon={isCopyingId ? faCheck : faCopy} />
+                </IconButton>
+              </Tooltip>
+            </div>
+          </div>
+        </div>
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">Friendly Name</p>
+          <p className="text-sm text-mineshaft-300">{ca.friendlyName}</p>
+        </div>
+        <div className="mb-4">
+          <p className="text-sm font-semibold text-mineshaft-300">Status</p>
+          <p className="text-sm text-mineshaft-300">{caStatusToNameMap[ca.status]}</p>
+        </div>
+        <div>
+          <p className="text-sm font-semibold text-mineshaft-300">Key Algorithm</p>
+          <p className="text-sm text-mineshaft-300">{certKeyAlgorithmToNameMap[ca.keyAlgorithm]}</p>
+        </div>
+      </div>
+    </div>
+  ) : (
+    <div />
+  );
+};
@@ -0,0 +1,347 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Button,
+  FormControl,
+  Input,
+  Modal,
+  ModalContent,
+  Select,
+  SelectItem,
+  Switch} from "@app/components/v2";
+import { useOrganization } from "@app/context";
+import {
+  useCreateSshCertTemplate,
+  useGetSshCaById,
+  useGetSshCertTemplate,
+  useListOrgSshCas,
+  useUpdateSshCertTemplate} from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const schema = z.object({
+  sshCaId: z.string(),
+  name: z.string().min(1),
+  ttl: z.string().trim().min(1),
+  maxTTL: z.string().trim().min(1),
+  allowedUsers: z.string(),
+  allowedHosts: z.string(),
+  allowUserCertificates: z.boolean().optional().default(false),
+  allowHostCertificates: z.boolean().optional().default(false),
+  allowCustomKeyIds: z.boolean().optional().default(false)
+});
+
+export type FormData = z.infer<typeof schema>;
+
+type Props = {
+  sshCaId: string;
+  popUp: UsePopUpState<["sshCertificateTemplate"]>;
+  handlePopUpToggle: (
+    popUpName: keyof UsePopUpState<["sshCertificateTemplate"]>,
+    state?: boolean
+  ) => void;
+};
+
+export const SshCertificateTemplateModal = ({ popUp, handlePopUpToggle, sshCaId }: Props) => {
+  const { currentOrg } = useOrganization();
+
+  const { data: ca } = useGetSshCaById(sshCaId);
+
+  const { data: certTemplate } = useGetSshCertTemplate(
+    (popUp?.sshCertificateTemplate?.data as { id: string })?.id || ""
+  );
+
+  const { data: cas } = useListOrgSshCas({
+    orgId: currentOrg?.id ?? ""
+  });
+
+  const { mutateAsync: createSshCertTemplate } = useCreateSshCertTemplate();
+  const { mutateAsync: updateSshCertTemplate } = useUpdateSshCertTemplate();
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: zodResolver(schema),
+    defaultValues: {}
+  });
+
+  useEffect(() => {
+    if (certTemplate) {
+      reset({
+        sshCaId: certTemplate.sshCaId,
+        name: certTemplate.name,
+        ttl: certTemplate.ttl,
+        maxTTL: certTemplate.maxTTL,
+        allowedUsers: certTemplate.allowedUsers.join(", "),
+        allowedHosts: certTemplate.allowedHosts.join(", "),
+        allowUserCertificates: certTemplate.allowUserCertificates,
+        allowHostCertificates: certTemplate.allowHostCertificates,
+        allowCustomKeyIds: certTemplate.allowCustomKeyIds
+      });
+    } else {
+      reset({
+        sshCaId,
+        name: "",
+        ttl: "1h",
+        maxTTL: "30d",
+        allowedUsers: "",
+        allowedHosts: "",
+        allowUserCertificates: false,
+        allowHostCertificates: false,
+        allowCustomKeyIds: false
+      });
+    }
+  }, [certTemplate, ca]);
+
+  const onFormSubmit = async ({
+    name,
+    ttl,
+    maxTTL,
+    allowUserCertificates,
+    allowHostCertificates,
+    allowedUsers,
+    allowedHosts,
+    allowCustomKeyIds
+  }: FormData) => {
+    try {
+      if (certTemplate) {
+        await updateSshCertTemplate({
+          id: certTemplate.id,
+          name,
+          ttl,
+          maxTTL,
+          allowedUsers: allowedUsers ? allowedUsers.split(",").map((user) => user.trim()) : [],
+          allowedHosts: allowedHosts ? allowedHosts.split(",").map((host) => host.trim()) : [],
+          allowUserCertificates,
+          allowHostCertificates,
+          allowCustomKeyIds
+        });
+
+        createNotification({
+          text: "Successfully updated SSH certificate template",
+          type: "success"
+        });
+      } else {
+        await createSshCertTemplate({
+          sshCaId,
+          name,
+          ttl,
+          maxTTL,
+          allowedUsers: allowedUsers ? allowedUsers.split(",").map((user) => user.trim()) : [],
+          allowedHosts: allowedHosts ? allowedHosts.split(",").map((host) => host.trim()) : [],
+          allowUserCertificates,
+          allowHostCertificates,
+          allowCustomKeyIds
+        });
+
+        createNotification({
+          text: "Successfully created SSH certificate template",
+          type: "success"
+        });
+      }
+
+      reset();
+      handlePopUpToggle("sshCertificateTemplate", false);
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to save changes",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={popUp?.sshCertificateTemplate?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("sshCertificateTemplate", isOpen);
+        reset();
+      }}
+    >
+      <ModalContent
+        title={certTemplate ? "SSH Certificate Template" : "Create SSH Certificate Template"}
+      >
+        <form onSubmit={handleSubmit(onFormSubmit)}>
+          {certTemplate && (
+            <FormControl label="SSH Certificate Template ID">
+              <Input value={certTemplate.id} isDisabled className="bg-white/[0.07]" />
+            </FormControl>
+          )}
+          <Controller
+            control={control}
+            defaultValue=""
+            name="name"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="SSH Template Name"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                isRequired
+              >
+                <Input {...field} placeholder="My SSH Certificate Template" />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="sshCaId"
+            defaultValue={sshCaId}
+            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+              <FormControl
+                label="Issuing SSH CA"
+                errorText={error?.message}
+                isError={Boolean(error)}
+                className="mt-4"
+                isRequired
+              >
+                <Select
+                  defaultValue={field.value}
+                  {...field}
+                  onValueChange={(e) => onChange(e)}
+                  className="w-full"
+                  isDisabled
+                >
+                  {(cas || []).map(({ id, friendlyName }) => (
+                    <SelectItem value={id} key={`ssh-ca-${id}`}>
+                      {friendlyName}
+                    </SelectItem>
+                  ))}
+                </Select>
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="allowedUsers"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Allowed Users"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="ec2-user, developer, ..." />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="allowedHosts"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Allowed Hosts"
+                isError={Boolean(error)}
+                errorText={error?.message}
+              >
+                <Input {...field} placeholder="*.compute.amazonaws.com, api.example.com, ..." />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="ttl"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="TTL"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                isRequired
+              >
+                <Input {...field} placeholder="2 days, 1d, 2h, 1y, ..." />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="maxTTL"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Max TTL"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                isRequired
+              >
+                <Input {...field} placeholder="2 days, 1d, 2h, 1y, ..." />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="allowUserCertificates"
+            render={({ field, fieldState: { error } }) => {
+              return (
+                <FormControl isError={Boolean(error)} errorText={error?.message}>
+                  <Switch
+                    id="allow-user-certificates"
+                    onCheckedChange={(value) => field.onChange(value)}
+                    isChecked={field.value}
+                  >
+                    <p className="ml-1 w-full">Allow User Certificates</p>
+                  </Switch>
+                </FormControl>
+              );
+            }}
+          />
+          <Controller
+            control={control}
+            name="allowHostCertificates"
+            render={({ field, fieldState: { error } }) => {
+              return (
+                <FormControl isError={Boolean(error)} errorText={error?.message}>
+                  <Switch
+                    id="allow-host-certificates"
+                    onCheckedChange={(value) => field.onChange(value)}
+                    isChecked={field.value}
+                  >
+                    <p className="ml-1 w-full">Allow Host Certificates</p>
+                  </Switch>
+                </FormControl>
+              );
+            }}
+          />
+          <Controller
+            control={control}
+            name="allowCustomKeyIds"
+            render={({ field, fieldState: { error } }) => {
+              return (
+                <FormControl isError={Boolean(error)} errorText={error?.message}>
+                  <Switch
+                    id="allow-custom-key-ids"
+                    onCheckedChange={(value) => field.onChange(value)}
+                    isChecked={field.value}
+                  >
+                    <p className="ml-1 w-full">Allow Custom Key IDs</p>
+                  </Switch>
+                </FormControl>
+              );
+            }}
+          />
+          <div className="mt-4 flex items-center">
+            <Button
+              className="mr-4"
+              size="sm"
+              type="submit"
+              isLoading={isSubmitting}
+              isDisabled={isSubmitting}
+            >
+              Save
+            </Button>
+            <Button
+              colorSchema="secondary"
+              variant="plain"
+              onClick={() => handlePopUpToggle("sshCertificateTemplate", false)}
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};
@@ -0,0 +1,92 @@
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import { OrgPermissionCan } from "@app/components/permissions";
+import { DeleteActionModal, IconButton } from "@app/components/v2";
+import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
+import { usePopUp } from "@app/hooks";
+import { useDeleteSshCertTemplate } from "@app/hooks/api";
+
+import { SshCertificateTemplateModal } from "./SshCertificateTemplateModal";
+import { SshCertificateTemplatesTable } from "./SshCertificateTemplatesTable";
+
+type Props = {
+  caId: string;
+};
+
+export const SshCertificateTemplatesSection = ({ caId }: Props) => {
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "sshCertificateTemplate",
+    "deleteSshCertificateTemplate",
+    "upgradePlan"
+  ] as const);
+
+  const { mutateAsync: deleteSshCertTemplate } = useDeleteSshCertTemplate();
+
+  const onRemoveSshCertificateTemplateSubmit = async (id: string) => {
+    try {
+      await deleteSshCertTemplate({
+        id
+      });
+
+      await createNotification({
+        text: "Successfully deleted SSH certificate template",
+        type: "success"
+      });
+
+      handlePopUpClose("deleteSshCertificateTemplate");
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to delete SSH certificate template",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <div className="h-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
+        <h3 className="text-lg font-semibold text-mineshaft-100">Certificate Templates</h3>
+        <OrgPermissionCan
+          I={OrgPermissionActions.Create}
+          a={OrgPermissionSubjects.SshCertificateTemplates}
+        >
+          {(isAllowed) => (
+            <IconButton
+              ariaLabel="copy icon"
+              variant="plain"
+              className="group relative"
+              onClick={() => handlePopUpOpen("sshCertificateTemplate")}
+              isDisabled={!isAllowed}
+            >
+              <FontAwesomeIcon icon={faPlus} />
+            </IconButton>
+          )}
+        </OrgPermissionCan>
+      </div>
+      <div className="py-4">
+        <SshCertificateTemplatesTable handlePopUpOpen={handlePopUpOpen} sshCaId={caId} />
+      </div>
+      <SshCertificateTemplateModal
+        popUp={popUp}
+        handlePopUpToggle={handlePopUpToggle}
+        sshCaId={caId}
+      />
+      <DeleteActionModal
+        isOpen={popUp.deleteSshCertificateTemplate.isOpen}
+        title={`Are you sure want to delete the SSH certificate template ${
+          (popUp?.deleteSshCertificateTemplate?.data as { name: string })?.name || ""
+        }?`}
+        onChange={(isOpen) => handlePopUpToggle("deleteSshCertificateTemplate", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={() =>
+          onRemoveSshCertificateTemplateSubmit(
+            (popUp?.deleteSshCertificateTemplate?.data as { id: string })?.id
+          )
+        }
+      />
+    </div>
+  );
+};
@@ -0,0 +1,118 @@
+import { faEllipsis, faFileAlt, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+import { OrgPermissionCan } from "@app/components/permissions";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  EmptyState,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tooltip,
+  Tr
+} from "@app/components/v2";
+import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
+import { useGetSshCaCertTemplates } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  sshCaId: string;
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<
+      ["sshCertificateTemplate", "deleteSshCertificateTemplate", "upgradePlan"]
+    >,
+    data?: {
+      id?: string;
+      name?: string;
+    }
+  ) => void;
+};
+
+export const SshCertificateTemplatesTable = ({ handlePopUpOpen, sshCaId }: Props) => {
+  const { data, isLoading } = useGetSshCaCertTemplates(sshCaId);
+
+  return (
+    <div>
+      <TableContainer>
+        <Table>
+          <THead>
+            <Tr>
+              <Th>Name</Th>
+              <Th />
+            </Tr>
+          </THead>
+          <TBody>
+            {isLoading && <TableSkeleton columns={2} innerKey="project-cas" />}
+            {!isLoading &&
+              data?.certificateTemplates.map((certificateTemplate) => {
+                return (
+                  <Tr className="h-10" key={`certificate-${certificateTemplate.id}`}>
+                    <Td>{certificateTemplate.name}</Td>
+                    <Td className="flex justify-end">
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild className="rounded-lg">
+                          <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                            <Tooltip content="More options">
+                              <FontAwesomeIcon size="sm" icon={faEllipsis} />
+                            </Tooltip>
+                          </div>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="start" className="p-1">
+                          <DropdownMenuItem
+                            onClick={() =>
+                              handlePopUpOpen("sshCertificateTemplate", {
+                                id: certificateTemplate.id
+                              })
+                            }
+                            icon={<FontAwesomeIcon icon={faFileAlt} size="sm" className="mr-1" />}
+                          >
+                            Edit Template
+                          </DropdownMenuItem>
+                          <OrgPermissionCan
+                            I={OrgPermissionActions.Delete}
+                            a={OrgPermissionSubjects.SshCertificateTemplates}
+                          >
+                            {(isAllowed) => (
+                              <DropdownMenuItem
+                                className={twMerge(
+                                  !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                                )}
+                                disabled={!isAllowed}
+                                icon={<FontAwesomeIcon icon={faTrash} size="sm" className="mr-1" />}
+                                onClick={() =>
+                                  handlePopUpOpen("deleteSshCertificateTemplate", {
+                                    id: certificateTemplate.id,
+                                    name: certificateTemplate.name
+                                  })
+                                }
+                              >
+                                Delete Template
+                              </DropdownMenuItem>
+                            )}
+                          </OrgPermissionCan>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </Td>
+                  </Tr>
+                );
+              })}
+          </TBody>
+        </Table>
+        {!isLoading && !data?.certificateTemplates?.length && (
+          <EmptyState
+            title="No certificate templates have been created for this SSH CA"
+            icon={faFileAlt}
+          />
+        )}
+      </TableContainer>
+    </div>
+  );
+};
@@ -0,0 +1,2 @@
+export { SshCaDetailsSection } from "./SshCaDetailsSection";
+export { SshCertificateTemplatesSection } from "./SshCertificateTemplatesSection";
@@ -0,0 +1 @@
+export { SshCaPage } from "./SshCaPage";
@@ -0,0 +1,18 @@
+import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
+import { withPermission } from "@app/hoc";
+
+import { SshCaSection } from "./components";
+
+export const SshPage = withPermission(
+  () => {
+    return (
+      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+        <div className="mx-auto mb-6 w-full max-w-7xl py-6 px-6">
+          <p className="mr-4 mb-4 text-3xl font-semibold text-white">SSH</p>
+          <SshCaSection />
+        </div>
+      </div>
+    );
+  },
+  { action: OrgPermissionActions.Read, subject: OrgPermissionSubjects.SshCertificateAuthorities }
+);
@@ -0,0 +1,167 @@
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Button,
+  FormControl,
+  Input,
+  Modal,
+  ModalContent,
+  Select,
+  SelectItem
+} from "@app/components/v2";
+import { useCreateSshCa, useGetSshCaById, useUpdateSshCa } from "@app/hooks/api";
+import { certKeyAlgorithms } from "@app/hooks/api/certificates/constants";
+import { CertKeyAlgorithm } from "@app/hooks/api/certificates/enums";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  popUp: UsePopUpState<["sshCa"]>;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["sshCa"]>, state?: boolean) => void;
+};
+
+const schema = z
+  .object({
+    friendlyName: z.string(),
+    keyAlgorithm: z.enum([
+      CertKeyAlgorithm.RSA_2048,
+      CertKeyAlgorithm.RSA_4096,
+      CertKeyAlgorithm.ECDSA_P256,
+      CertKeyAlgorithm.ECDSA_P384
+    ])
+  })
+  .required();
+
+export type FormData = z.infer<typeof schema>;
+
+export const SshCaModal = ({ popUp, handlePopUpToggle }: Props) => {
+  const { data: ca } = useGetSshCaById((popUp?.sshCa?.data as { caId: string })?.caId || "");
+
+  const { mutateAsync: createMutateAsync } = useCreateSshCa();
+  const { mutateAsync: updateMutateAsync } = useUpdateSshCa();
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      friendlyName: "",
+      keyAlgorithm: CertKeyAlgorithm.RSA_2048
+    }
+  });
+
+  const onFormSubmit = async ({ friendlyName, keyAlgorithm }: FormData) => {
+    try {
+      if (ca) {
+        // update
+        await updateMutateAsync({
+          caId: ca.id
+        });
+      } else {
+        // create
+        await createMutateAsync({
+          friendlyName,
+          keyAlgorithm
+        });
+      }
+
+      reset();
+      handlePopUpToggle("sshCa", false);
+
+      createNotification({
+        text: `Successfully ${ca ? "updated" : "created"} SSH CA`,
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to create SSH CA",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={popUp?.sshCa?.isOpen}
+      onOpenChange={(isOpen) => {
+        reset();
+        handlePopUpToggle("sshCa", isOpen);
+      }}
+    >
+      <ModalContent title={`${ca ? "View" : "Create"} SSH CA`}>
+        <form onSubmit={handleSubmit(onFormSubmit)}>
+          {ca && (
+            <FormControl label="CA ID">
+              <Input value={ca.id} isDisabled className="bg-white/[0.07]" />
+            </FormControl>
+          )}
+          <Controller
+            control={control}
+            defaultValue=""
+            name="friendlyName"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl
+                label="Friendly Name"
+                isError={Boolean(error)}
+                errorText={error?.message}
+                isRequired
+              >
+                <Input {...field} placeholder="My SSH CA" isDisabled={Boolean(ca)} />
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            name="keyAlgorithm"
+            defaultValue={CertKeyAlgorithm.RSA_2048}
+            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+              <FormControl
+                label="Key Algorithm"
+                errorText={error?.message}
+                isError={Boolean(error)}
+              >
+                <Select
+                  defaultValue={field.value}
+                  {...field}
+                  onValueChange={(e) => onChange(e)}
+                  className="w-full"
+                  isDisabled={Boolean(ca)}
+                >
+                  {certKeyAlgorithms.map(({ label, value }) => (
+                    <SelectItem value={String(value || "")} key={label}>
+                      {label}
+                    </SelectItem>
+                  ))}
+                </Select>
+              </FormControl>
+            )}
+          />
+          <div className="flex items-center">
+            <Button
+              className="mr-4"
+              size="sm"
+              type="submit"
+              isLoading={isSubmitting}
+              isDisabled={isSubmitting}
+            >
+              {popUp?.sshCa?.data ? "Update" : "Create"}
+            </Button>
+            <Button
+              colorSchema="secondary"
+              variant="plain"
+              onClick={() => handlePopUpToggle("sshCa", false)}
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};
@@ -0,0 +1,120 @@
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import { OrgPermissionCan } from "@app/components/permissions";
+import { Button, DeleteActionModal } from "@app/components/v2";
+import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
+import { SshCaStatus, useDeleteSshCa, useUpdateSshCa } from "@app/hooks/api";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { SshCaModal } from "./SshCaModal";
+import { SshCaTable } from "./SshCaTable";
+
+export const SshCaSection = () => {
+  const { mutateAsync: deleteSshCa } = useDeleteSshCa();
+  const { mutateAsync: updateSshCa } = useUpdateSshCa();
+
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "sshCa",
+    "deleteSshCa",
+    "sshCaStatus", // enable / disable
+    "upgradePlan"
+  ] as const);
+
+  const onRemoveSshCaSubmit = async (caId: string) => {
+    try {
+      await deleteSshCa({ caId });
+
+      await createNotification({
+        text: "Successfully deleted SSH CA",
+        type: "success"
+      });
+
+      handlePopUpClose("deleteSshCa");
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to delete SSH CA",
+        type: "error"
+      });
+    }
+  };
+
+  const onUpdateSshCaStatus = async ({ caId, status }: { caId: string; status: SshCaStatus }) => {
+    try {
+      await updateSshCa({ caId, status });
+
+      await createNotification({
+        text: `Successfully ${status === SshCaStatus.ACTIVE ? "enabled" : "disabled"} SSH CA`,
+        type: "success"
+      });
+
+      handlePopUpClose("sshCaStatus");
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: `Failed to ${status === SshCaStatus.ACTIVE ? "enabled" : "disabled"} SSH CA`,
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="mb-4 flex justify-between">
+        <p className="text-xl font-semibold text-mineshaft-100">Certificate Authorities</p>
+        <OrgPermissionCan
+          I={OrgPermissionActions.Create}
+          a={OrgPermissionSubjects.SshCertificateAuthorities}
+        >
+          {(isAllowed) => (
+            <Button
+              colorSchema="primary"
+              type="submit"
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              onClick={() => handlePopUpOpen("sshCa")}
+              isDisabled={!isAllowed}
+            >
+              Create SSH CA
+            </Button>
+          )}
+        </OrgPermissionCan>
+      </div>
+      <SshCaTable handlePopUpOpen={handlePopUpOpen} />
+      <SshCaModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
+      <DeleteActionModal
+        isOpen={popUp.deleteSshCa.isOpen}
+        title="Are you sure want to remove the SSH CA?"
+        onChange={(isOpen) => handlePopUpToggle("deleteSshCa", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={() =>
+          onRemoveSshCaSubmit((popUp?.deleteSshCa?.data as { caId: string })?.caId)
+        }
+      />
+      <DeleteActionModal
+        isOpen={popUp.sshCaStatus.isOpen}
+        title={`Are you sure want to ${
+          (popUp?.sshCaStatus?.data as { status: string })?.status === SshCaStatus.ACTIVE
+            ? "enable"
+            : "disable"
+        } the CA?`}
+        subTitle={
+          (popUp?.sshCaStatus?.data as { status: string })?.status === SshCaStatus.ACTIVE
+            ? "This action will allow the SSH CA to start issuing certificates again."
+            : "This action will prevent the SSH CA from issuing new certificates."
+        }
+        onChange={(isOpen) => handlePopUpToggle("sshCaStatus", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={() =>
+          onUpdateSshCaStatus(popUp?.sshCaStatus?.data as { caId: string; status: SshCaStatus })
+        }
+      />
+      {/* <UpgradePlanModal
+        isOpen={popUp.upgradePlan.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+        text={(popUp.upgradePlan?.data as { description: string })?.description}
+      /> */}
+    </div>
+  );
+};
@@ -0,0 +1,153 @@
+import { useRouter } from "next/router";
+import { faBan, faCertificate, faEllipsis, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+import { OrgPermissionCan } from "@app/components/permissions";
+import {
+  Badge,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  EmptyState,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tooltip,
+  Tr
+} from "@app/components/v2";
+import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
+import { SshCaStatus , useListOrgSshCas } from "@app/hooks/api";
+import { caStatusToNameMap, getCaStatusBadgeVariant } from "@app/hooks/api/ca/constants";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+  handlePopUpOpen: (
+    popUpName: keyof UsePopUpState<["deleteSshCa", "sshCaStatus"]>,
+    data?: {}
+  ) => void;
+};
+
+export const SshCaTable = ({ handlePopUpOpen }: Props) => {
+  const router = useRouter();
+  const { currentOrg } = useOrganization();
+  const { data, isLoading } = useListOrgSshCas({
+    orgId: currentOrg?.id ?? ""
+  });
+
+  return (
+    <div>
+      <TableContainer>
+        <Table>
+          <THead>
+            <Tr>
+              <Th>Friendly Name</Th>
+              <Th>Status</Th>
+              <Th />
+            </Tr>
+          </THead>
+          <TBody>
+            {isLoading && <TableSkeleton columns={3} innerKey="org-ssh-cas" />}
+            {!isLoading &&
+              data &&
+              data.length > 0 &&
+              data.map((ca) => {
+                return (
+                  <Tr
+                    className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
+                    key={`ca-${ca.id}`}
+                    onClick={() => router.push(`/org/${currentOrg?.id}/ssh/ca/${ca.id}`)}
+                  >
+                    <Td>{ca.friendlyName}</Td>
+                    <Td>
+                      <Badge variant={getCaStatusBadgeVariant(ca.status)}>
+                        {caStatusToNameMap[ca.status]}
+                      </Badge>
+                    </Td>
+                    <Td className="flex justify-end">
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild className="rounded-lg">
+                          <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                            <Tooltip content="More options">
+                              <FontAwesomeIcon size="lg" icon={faEllipsis} />
+                            </Tooltip>
+                          </div>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="start" className="p-1">
+                          {(ca.status === SshCaStatus.ACTIVE ||
+                            ca.status === SshCaStatus.DISABLED) && (
+                            <OrgPermissionCan
+                              I={OrgPermissionActions.Edit}
+                              a={OrgPermissionSubjects.SshCertificateAuthorities}
+                            >
+                              {(isAllowed) => (
+                                <DropdownMenuItem
+                                  className={twMerge(
+                                    !isAllowed &&
+                                      "pointer-events-none cursor-not-allowed opacity-50"
+                                  )}
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    handlePopUpOpen("sshCaStatus", {
+                                      caId: ca.id,
+                                      status:
+                                        ca.status === SshCaStatus.ACTIVE
+                                          ? SshCaStatus.DISABLED
+                                          : SshCaStatus.ACTIVE
+                                    });
+                                  }}
+                                  disabled={!isAllowed}
+                                  icon={<FontAwesomeIcon icon={faBan} />}
+                                >
+                                  {`${
+                                    ca.status === SshCaStatus.ACTIVE ? "Disable" : "Enable"
+                                  } SSH CA`}
+                                </DropdownMenuItem>
+                              )}
+                            </OrgPermissionCan>
+                          )}
+                          <OrgPermissionCan
+                            I={OrgPermissionActions.Delete}
+                            a={OrgPermissionSubjects.SshCertificateAuthorities}
+                          >
+                            {(isAllowed) => (
+                              <DropdownMenuItem
+                                className={twMerge(
+                                  !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                                )}
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handlePopUpOpen("deleteSshCa", {
+                                    caId: ca.id
+                                  });
+                                }}
+                                disabled={!isAllowed}
+                                icon={<FontAwesomeIcon icon={faTrash} />}
+                              >
+                                Delete SSH CA
+                              </DropdownMenuItem>
+                            )}
+                          </OrgPermissionCan>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </Td>
+                  </Tr>
+                );
+              })}
+          </TBody>
+        </Table>
+        {!isLoading && data?.length === 0 && (
+          <EmptyState
+            title="No SSH certificate authorities have been created"
+            icon={faCertificate}
+          />
+        )}
+      </TableContainer>
+    </div>
+  );
+};
@@ -0,0 +1 @@
+export { SshCaSection } from "./SshCaSection";
@@ -0,0 +1 @@
+export { SshPage } from "./SshPage";
@@ -17,7 +17,7 @@ import {
  // DatePicker
 } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
-import { CaType, useCreateCa, useGetCaById,useUpdateCa } from "@app/hooks/api/ca";
+import { CaType, useCreateCa, useGetCaById, useUpdateCa } from "@app/hooks/api/ca";
 import { certKeyAlgorithms } from "@app/hooks/api/certificates/constants";
 import { CertKeyAlgorithm } from "@app/hooks/api/certificates/enums";
 import { UsePopUpState } from "@app/hooks/usePopUp";
@@ -72,7 +72,7 @@ export const CaModal = ({ popUp, handlePopUpToggle }: Props) => {
  // const [isStartDatePickerOpen, setIsStartDatePickerOpen] = useState(false);

  const { data: ca } = useGetCaById((popUp?.ca?.data as { caId: string })?.caId || "");
-  
+
  const { mutateAsync: createMutateAsync } = useCreateCa();
  const { mutateAsync: updateMutateAsync } = useUpdateCa();

@@ -151,7 +151,7 @@ export const CaModal = ({ popUp, handlePopUpToggle }: Props) => {
  }: FormData) => {
    try {
      if (!currentWorkspace?.slug) return;
-      
+
      if (ca) {
        // update
        await updateMutateAsync({
@@ -1,10 +1,5 @@
 import { useRouter } from "next/router";
-import {
-  faBan,
-  faCertificate,
-  faEllipsis,
-  faTrash
-} from "@fortawesome/free-solid-svg-icons";
+import { faBan, faCertificate, faEllipsis, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { format } from "date-fns";
 import { twMerge } from "tailwind-merge";
@@ -1,7 +1,3 @@
-/**
- * TODO (dangtony98): Reevaluate if this component should be in main
- * CertificateTab or under CA page in the future.
- */
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

@@ -18,7 +14,7 @@ import { CertificateTemplatesTable } from "./CertificateTemplatesTable";

 type Props = {
  caId: string;
-}
+};

 export const CertificateTemplatesSection = ({ caId }: Props) => {
  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
				`@@ -0,0 +1 @@`
				`export { SshCaSection } from "./SshCaSection";`