Merge pull request #2014 from Infisical/cert-san

Add Certificate Support for Alt Names (SANs)

frontend/src/hooks/api/ca/types.ts

@@ -81,6 +81,7 @@ export type TCreateCertificateDTO = {
   caId: string;
   friendlyName?: string;
   commonName: string;
+  altNames: string; // sans
   ttl: string; // string compatible with ms
   notBefore?: string;
   notAfter?: string;

frontend/src/hooks/api/certificates/types.ts

@@ -6,6 +6,7 @@ export type TCertificate = {
   status: CertStatus;
   friendlyName: string;
   commonName: string;
+  altNames: string;
   serialNumber: string;
   notBefore: string;
   notAfter: string;

frontend/src/views/Project/CertificatesPage/components/CertificatesTab/components/CertificateModal.tsx

@@ -24,6 +24,7 @@ const schema = z.object({
   caId: z.string(),
   friendlyName: z.string(),
   commonName: z.string().trim().min(1),
+  altNames: z.string(),
   ttl: z.string().trim()
 });
 
@@ -71,6 +72,7 @@ export const CertificateModal = ({ popUp, handlePopUpToggle }: Props) => {
         caId: cert.caId,
         friendlyName: cert.friendlyName,
         commonName: cert.commonName,
+        altNames: cert.altNames,
         ttl: ""
       });
     } else {
@@ -78,12 +80,13 @@ export const CertificateModal = ({ popUp, handlePopUpToggle }: Props) => {
         caId: "",
         friendlyName: "",
         commonName: "",
+        altNames: "",
         ttl: ""
       });
     }
   }, [cert]);
 
-  const onFormSubmit = async ({ caId, friendlyName, commonName, ttl }: FormData) => {
+  const onFormSubmit = async ({ caId, friendlyName, commonName, altNames, ttl }: FormData) => {
     try {
       if (!currentWorkspace?.slug) return;
 
@@ -92,6 +95,7 @@ export const CertificateModal = ({ popUp, handlePopUpToggle }: Props) => {
         caId,
         friendlyName,
         commonName,
+        altNames,
         ttl
       });
 
@@ -192,6 +196,24 @@ export const CertificateModal = ({ popUp, handlePopUpToggle }: Props) => {
                 </FormControl>
               )}
             />
+            <Controller
+              control={control}
+              defaultValue=""
+              name="altNames"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Alternative Names (SANs)"
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <Input
+                    {...field}
+                    placeholder="app1.acme.com, app2.acme.com, ..."
+                    isDisabled={Boolean(cert)}
+                  />
+                </FormControl>
+              )}
+            />
             <Controller
               control={control}
               name="ttl"